AJAX（Asynchronous JavaScript And XML）

最新推荐文章于 2025-05-28 14:02:39 发布

卡卡_西

最新推荐文章于 2025-05-28 14:02:39 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

文章标签： ajax xml

本文链接：https://blog.csdn.net/m0_47224321/article/details/121182977

本文介绍了AJAX（异步JavaScript和XML）的基本概念，包括其无刷新的数据交换特性、优缺点。同时，讲解了XML作为数据传输格式的作用，尽管现在已被JSON取代。接着，概述了HTTP协议的基础知识，以及Express框架在处理AJAX请求中的应用。最后，讨论了AJAX在IE浏览器中遇到的缓存问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、AJAX简介

1、AJAX全称为Asynchronous JavaScript And XML，就是异步的JS 和XML。
2、通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
3、AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新的方式。

二、XML简介

1、XML 可扩展标记语言
2、XML 被设计用来传输和存储数据
3、XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。
4、现在已经被JSON取代了。

三、AJAX的特点

1、AJAX的优点
（1）可以无需刷新页面而与服务器端进行通信
（2）允许你根据用户事件来更新部分页面内容

2、AJAX的缺点
（1）没有浏览历史，不能回退
（2）存在跨域问题（同源）
（3）SEO（搜索引擎优化）不友好

四、HTTP

HTTP（hypertext transport protocol）协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1、请求报文
重点是格式和参数

行		POST  /s?ie=utf-8   HTTP/1.1
头		Host: baidu.com
		Cookie: name=beijing
		Content-type: application/x-www-form-urlencoded
		User-Agent: chrome 83
空行
体		username=admin&password=admin

2、响应报文

行		HTTP/1.1   200    OK
头		Content-Type: text/html;charset=utf-8
		Content-length: 2048
		Content-encoding: gzip
空行
体		<html>
			<head>
			</head>
			<body>
				<h1>北京</h1>
			</body>
		</html>

五、Express框架介绍与基本使用

以下为js文件，在浏览器开始加载页面之前先使用node 文件名.js启动服务器

1、引入express
const express = require('express');

2、创建应用对象
const app = express();

3、创建路由规则
request 是对请求报文的封装
response  是对响应报文的封装
app.get('/',(request,response)=>{
    设置响应头，设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    设置响应
    console.log("hello express");
});

4、监听端口启动服务
app.listen(8000,()=>{
    console.log("服务器已经启动，8000端口监听中...");
});

1、AJAX的GET请求
onreadystatechange
（1） on 当…的时候
（2） readystate是xhr对象中的属性表示状态
—— 0 未初始化
—— 1 open方法已经调用完毕
—— 2 send方法已经调用完毕
—— 3 服务端返回了部分的结果
—— 4 服务端返回了所有的结果
（3） change 改变的时候

（4）判断响应状态码 200 404 403 401 500
（5）2xx 表示成功

<button>点我发动请求</button>
<div id="result"></div>
<script>
    获取button元素
    let btn = document.getElementsByTagName("button")[0];
    let result = document.getElementById("result");
    绑定事件
    btn.onclick = function () {
        1、创建对象
        let xhr = new XMLHttpRequest();
        2、初始化  设置请求方法的  url
        xhr.open('GET','10.1.46.36:8000/server?a=100&b=200&c=300');
        3、发送
        xhr.send();
        4、事件绑定  处理服务端返回的结果
        xhr.onreadystatechange = function () {
            判断（服务端返回了所有的结果）
            if(xhr.readyState === 4){             
                if (xhr.status>=200 && xhr.status<300){
                    处理结果  行  头  空行  体
                    响应
                    //console.log(xhr.status);  //状态码
                    //console.log(xhr.statusText);  //状态字符串
                    //console.log(xhr.getResponseHeader());  //所有响应头
                    //console.log(xhr.response);  //响应体

                    设置result的文本
                    result.innerHTML = xhr.response;
                }else{
                }
            }
        }
    }
</script>

2、AJAX的POST请求

<div id="result"></div>
<script>
    获取元素对象
    let result = document.getElementById("result");
    绑定事件
    result.addEventListener("mouseenter",function () {
        1、创建对象
        let xhr = new XMLHttpRequest();
        2、初始化  设置类型与 URL
        xhr.open('POST','http://10.1.46.36:8000/server');
        设置请求头
        xhr.setRequestHeader('Content-Type','application/x-form-urlencoded');
        3、发送
        xhr.send('a=100&b=200&c=300');
        4、事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4){
                if (xhr.status >=200 && xhr.status <300){
                    处理服务端返回的结果
                    result.innerHTML = xhr.response;
                }
            }
        }
    })
</script>

3、服务端响应JSON数据

<div id="result"></div>
<script>
    let result = document.getElementById("result");
    window.onkeydown = function () {
        发送请求
        let xhr = new XMLHttpRequest();
        设置响应体数据的类型
        xhr.responseType = 'json';
        初始化
        xhr.open('GET','http://10.1.46.36:8000/json-server');
        发送
        xhr.send();
        事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4){
                if (xhr.status>=200 && xhr.status<300){
                    /*result.innerHTML = xhr.response;*/
                    1、手动对数据转化
                    let data = JSON.parse(xhr.response);
                    console.log(data);
                    result.innerHTML = data.name;
                    2、自动转换
                    console.log(xhr.response);
                    result.innerHTML = xhr.response.name;
                }
            }
        }
    }
</script>

JS代码
1、引入express
const express = require('express');

2、创建应用对象
const app = express();

3、创建路由规则
app.all('/json-server',(request,response)=>{
    //设置响应头，设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name:'beijing'
    };
    //对对象字符串转换
    let str = JSON.stringify(data);
    //设置响应
    response.send(str);
});

//4、监听端口启动服务
app.listen(8000,()=>{
    console.log("服务器已经启动，8000端口监听中...");
});