AJAX 是什么
AJAX(Asynchronous JavaScript and XML),指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。
后来,AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。
AJAX 的步骤
- 创建 XMLHttpRequest 实例
- 发出 HTTP 请求
- 服务器返回 XML 格式的字符串
- JS 解析 XML,并更新局部页面
不过随着历史进程的推进,XML 已经被淘汰,取而代之的是 [JSON]
先上代码
基础代码
const request = new XMLHttpRequest() request.open('get', 'https://api.apihubs.cn/holiday/get'); request.onreadystatechange = function () { // 4代表下载完成 if(request.readyState === 4) { if(request.status >= 200 && request.status < 300 || request.status === 304 ) { // 成功的callback }else{ // 失败的callback } } } request.send();
稍加封装
const ajax = (method, url, data, success, fail) => { const request = new XMLHttpRequest() request.open(method, url); request.onreadystatechange = function () { if(request.readyState === 4) { if(request.status >= 200 && request.status < 300 || request.status === 304 ) { success(request) }else{ fail(request) } } } request.send(data); } function successCallback(data){ console.log("suceessData:",data) } function failCallback(data){ console.log("failData:",data) } //操作示例 ajax('get','https://api.apihubs.cn/holiday/get',{},successCallback,failCallback)
属性参考(如有需要)
XMLHttpRequest 的实例属性
XMLHttpRequest.readyState
XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。
值 | 状态 | 描述 |
0 | UNSENT | 代理被创建,但尚未调用 open() 方法 |
1 | OPENED | open() 方法已经被调用 |
2 | HEADERS_RECEIVED | send() 方法已经被调用,并且头部和状态已经可获得 |
3 | LOADING | 下载中; responseText 属性已经包含部分数据 |
4 | DONE | 下载操作已完成 |
XMLHttpRequest.status
XMLHttpRequest.status 属性返回一个整数,表示服务器回应的 HTTP 状态码。
XMLHttpRequest.onreadystatechange
XMLHttpRequest.onreadystatechange 属性指向一个监听函数。readystatechange 事件发生时(实例的 readyState 属性变化),就会执行这个属性。
XMLHttpRequest.responseText
XMLHttpRequest.responseText 属性返回从服务器接收到的字符串,该属性为只读。只有 HTTP 请求完成接收以后,该属性才会包含完整的数据。
XMLHttpRequest 的实例方法
XMLHttpRequest.open()
XMLHttpRequest.open 方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。
它一共可以接受五个参数:
- method:表示 HTTP 动词方法,比如GET、POST、PUT、DELETE、HEAD等
- url: 表示请求发送目标 URL
- async(可选): 布尔值,表示请求是否为异步,默认为 true。如果设为 false,则 send() 方法只有等到收到服务器返回了结果,才会进行下一步操作。由于同步 AJAX 请求会造成浏览器失去响应,许多浏览器已经禁止在主线程使用,只允许 Worker 里面使用。所以,这个参数轻易不应该设为false。
- user(可选):表示用于认证的用户名,默认为空字符串
- password(可选):表示用于认证的密码,默认为空字符串
注意:再次使用 open()
,等同于调用 abort()
。
XMLHttpRequest.send()
XMLHttpRequest.send 方法用于实际发出 HTTP 请求。
它的参数是可选的:
- 如果不带参数,就表示 HTTP 请求只有一个 URL,没有数据体,典型例子就是 GET 请求
- 如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是 POST 请求
GET 请求:
const request = new XMLHttpRequest() request.open('get', url); request.onreadystatechange = function () { .... }) request.send();
POST 请求:
const request = new XMLHttpRequest() request.open('post', url); request.onreadystatechange = function () { .... }) request.send({ key: 'value', });
XMLHttpRequest.setRequestHeader()
XMLHttpRequest.setRequestHeader 方法用于设置浏览器发送的 HTTP 请求的头信息。
该方法必须在open()之后、send()之前调用。
该方法接受两个参数。第一个参数是字符串,表示头信息的字段名,第二个参数是字段值。
**
xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Content-Length', JSON.stringify(data).length); xhr.send(JSON.stringify(data));
XMLHttpRequest.getResponseHeader()
XMLHttpRequest.getResponseHeader 方法返回 HTTP 头信息指定字段的值。
XMLHttpRequest.getAllResponseHeaders()
XMLHttpRequest.getAllResponseHeaders 方法返回一个字符串,表示服务器发来的所有 HTTP 头信息。
格式为字符串,每个头信息之间使用 CRLF 分隔(回车+换行),如果没有收到服务器回应,该属性为 null。如果发生网络错误,该属性为空字符串。