通信方式 AJAX

原创已于 2025-02-20 19:06:16 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX

于 2019-03-13 11:22:13 首次发布

AJAX 专栏收录该内容

2 篇文章

订阅专栏

AJAX： Async JavaScript And XML，异步 JavaScript 和 XML。是浏览器与服务器之间的一种异步通信方式，它可以使用 JSON、XML、HTML 和 TEXT 等格式发送和接收数据，实现了在不重新刷新页面的情况下与服务器通信、交换数据。

只要是客户端向服务器端发送网络请求，并且请求的只是数据，而不是网页相关的东西，就可以称为是 AJAX。

Ajax 技术的核心是 XMLHttpRequest，简称 XHR，用于客户端和服务端数据的传递和接收。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 构造函数，老版本的 IE5 和 IE6 使用 ActiveXObject 构造函数。

异步 JavaScript：异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情，直到成功获取响应后，浏览器才开始处理响应数据。
XML：可扩展标记语言，是前后端数据通信时传输数据的一种的格式。XML 现在已经不怎么用了，比较常用的是 JSON。

AJAX、Fetch、Axios 等是前后端通信的方式。
HTTP 是前后端通信的协议。
JSON 是前后端通信的数据格式。

优势和不足：

优势：

不需要安装插件，只要浏览器支持 JavaScript 即可。
局部刷新页面，用户体验极佳。
减轻服务器和宽带的负担，按需取数据，减少了冗余请求。

不足：

不同版本的浏览器对 XMLHttpRequest 对象的支持度不足。
前进、后退的功能被破环：因为 Ajax 不会跳转提交当前页面，所以永远在当前页面。
搜索引擎的支持度不够：因为搜索引擎爬虫对静态纯文本 HTML 理解得很透彻，但对 Ajax 在内部动态地加载更新数据还不能理解。

创建 XHR 实例对象：

// 通过 new XMLHttpRequest 创建一个 XHR 实例对象
var xhr = new XMLHttpRequest()
console.log(xhr)

在这里插入图片描述

兼容所有浏览器的写法：

var xhr;
if (window.XMLHttpRequest){
  xhr = new XMLHttpRequest()
 }else{
  xhr = new ActiveXObject("Microsoft.XMLHTTP")
}

XHR 实例对象的属性：

timeout：设置请求的超时时间，当达到超时时间后请求还没有成功，那么本次请求会被自动取消掉。默认值为 0，表示没有设置超时时间。单位为 ms。
```
xhr.timeout = 10000 // 一般会配合 timeout 事件一起使用
```
withCredentials：指定发送请求时是否携带 Cookie。

不过最终是否能成功，还需要看服务器端的设置。
使用 Ajax 发送请求，默认情况下，同域会携带 Cookie，跨域不会。
```
xhr.withCredentials = true
```
responseType：设置接收的数据类型。默认为 text 文本类型。
```
xhr.responseType = 'text'
```
response：返回的响应数据。
responseText：返回的响应文本类型的数据。
responseXML：返回的响应 XML 类型的数据。
readyState：返回的响应的状态。
- 0：表示未初始化。此时尚未调用 open() 方法。
- 1：表示启动。已经调用 open() 方法，但尚未调用 send() 方法。
- 2：表示发送。已经调用 send() 方法，此时可获取到响应头信息。
- 3：表示接收。已经接收到部分响应数据。
- 4：表示完成。已经接收到全部响应数据，可以在浏览器中使用了。
XMLHttpRequest 中定义了一些常量来对应 readyState 状态码。
XMLHttpRequest.UNSENT 对应 0。
XMLHttpRequest.OPEND 对应 1。
XMLHttpRequest.HEADERS_RECEIVED 对应 2。
XMLHttpRequest.LOADING 对应 3。
XMLHttpRequest.DONE 对应 4。
status：返回的响应的 HTTP 状态码。
statusText：返回的响应的 HTTP 状态说明。

XHR 实例对象的方法：

open(type, url, async)：配置请求。接收三个参数，分别是请求方法，大小写都可以；请求地址；是否异步，true 表示异步，不会阻塞后面 JS 代码的执行，false 表示同步，会阻塞后面 JS 代码的执行。

open() 方法并不会真正发送请求，而只是做好发送请求前的准备工作。
```
xhr.open('GET’, ’demo.php’, true)
```
send(data)：发送请求。接收一个字符串参数，作为请求体携带的数据。
GET 请求不能通过请求体携带数据，所以如果 open() 方法中是 GET 请求，那么send() 方法中不能传参或者传一个 null。GET 请求可以通过 queryString 查询字符串传递参数。
```
xhr.open('GET', 'http://123.207.32.32:8000/home/multidata?page=1&size=10')
```
send() 方法一般用于 POST 请求来传参。send() 方法不能直接传递 JS 对象，可以通过 JSON.stringify() 转换成 JSON 字符串。
```
xhr.open('POST', 'http://123.207.32.32:1888/02_param/postjson')
xhr.setRequestHeader('Content-type', 'application/json')
xhr.send(JSON.stringify({name: 'Lee', age: 18}))
```
abort()：取消当前请求。
```
xhr.abort()
```
setRequestHeader(头部字段的名称, 头部字段的值)：设置头信息。

浏览器出于安全性考虑，只允许设置部分头信息。
```
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
```

XHR 实例对象的事件：

loadstart：请求开始时触发。
progress：请求进行中触发。
- progress：下载时的 progress 事件，可以用来返回下载时的进度信息。
- upload.progress：上传时的 progress 事件，可以用来返回上传时的进度信息。
load：请求成功时触发，此时 readyState 状态为 4。
abort：请求取消时触发。
error：请求发生错误时触发。
timeout：请求超时时触发。
loadend：请求结束时触发，在 load、abort、error、timeout 之后都会触发。
readystatechange：每当 XHR 对象状态变化时触发。响应的数据会自动填充到 XHR 对象的属性中。

使用 XHR 发送一个网络请求的完整过程：

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 监听结果（宏任务）
xhr.onload = () => {
	if (xhr.status >= 200 &&  xhr.status <= 300) {
		console.log(xhr.response)
	}
} 
// 3. 调用 open() 方法配置请求
xhr.open('GET', 'http://123.207.32.32:8000/home/multidata', true)
// 4. 调用 send() 方法发送请求（由浏览器来发送请求）
xhr.send()

jQuery 对 Ajax 的封装：

jQuery 对 Ajax 的封装解决了大部分浏览器的兼容性问题。

jQuery 对 Ajax 的第一层封装：$.ajax()；
jQuery 对 Ajax 的第二层封装：$.get()、$.post()；
jQuery 对 Ajax 的第三层封装：$.getJSON()、$.getScript()；

$.ajax()是所有 jQuery 对 Ajax 封装的方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。使用$.ajax()方法可以代替所有的方法。

`$.ajax()`方法：

$.ajax({url,type,data,dataType,success,error,async})。参数有：

url：请求地址。
type：请求方法。
data：请求参数。
dataType：预期服务器返回的数据类型。

html：返回的是一个html文档。
text：返回的是纯文本。
json：返回的是 json 字符串。
xml：返回的是一个 xml 文档。
script：返回的是一个 javascript 脚本。
success(function)：请求成功后的回调函数，有两个参数：data 是服务器返回的数据，textStatus 是描述状态的字符串。
error(function)：请求失败时调用的函数，有三个参数：xhr 为底层的 XMLHttpRequest 对象，textStatus 为错误的描述，errorThrown 为 null。
async：true 异步，false 同步。

$.ajax({
	url : "/servlet/DemoServlet",
	type : "post",
	data : {
		"name" : $("#name").val()
	},
	dataType : "text",
	success : function(data) {
		console.log(data);
	}
});

`$.get()`方法：

$.get(url,data,callback,dataType)：使用 GET 方式向服务器发送请求。参数有：

url：请求地址。
data：请求参数，有两种形式：字符串形式 "name=Lee&age=23"，对象形式{'name':'Lee','age':23}。
callback：回调函数，格式是 function(data,statusText)。
dataType：预期服务器返回的数据类型。

$.get("/servlet/DemoServlet",function(data,statusText) {
		console.log(data);
	}
);

`$.post()`方法：

$.post(url,data,callback,dataType)：使用 POST 方式向服务器发送请求。参数有：

url：请求地址。
data：请求参。
callback：回调函数，格式是 function(data,statusText)。
dataType：预期服务器返回的数据类型。

$.post("/servlet/DemoServlet",{'name':'Lee','age':23},function(data,statusText) {
		console.log(data);
	}
);

`$.getJSON()`方法：

$.getJSON(url,data,callback)：使用 GET 方式向服务器请求 JSON 格式的数据。

`$.getScript()`方法：

$.getScript(url,callback)：使用 GET 方式加载 JavaScript 文件并运行它。

该函数用于动态加载 JS 文件，并在全局作用域下执行文件中的 JS 代码。
该函数是通过异步方式加载数据。
可以加载跨域的 JS 文件。

Ajax 请求携带 token:

$.ajax({
    type: "GET",
    url: "/access/logout/" + userCode,
    headers: {'token': token}
});

$.ajax({
        type: "GET",
        url: "/access/logout/" + userCode,
        beforeSend: function(request) {
            request.setRequestHeader("Authorization", token);
        },
        success: function(result) {
        }
    });