Ajax是什么

AJAX 即 Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。可以通过Ajax向服务端发起异步请求数据，最大的优势在于无需刷新即可获取到数据。

Ajax的优缺点

优点

  1. 可以无需刷新页面而与服务器端进行通信
  2. 充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担

缺点

  1. Ajax干掉了Back和History功能，即对浏览器机制的破坏。
  2. 没有浏览历史，不能回退
  3. 存在跨域问题(同源)
  4. SEO 不友好

发起请求的常见响应状态码

  • 200 OK 请求成功。一般用于GET 与POST 请求
  • 201 Created 已创建。成功请求并创建了新的资源
  • 401 Unauthorized 未授权/请求要求用户的身份认证
  • 404 Not Found 服务器无法根据客户端的请求找到资源
  • 500 Internal Server Error 服务器内部错误，无法完成请求

常见请求类型

  • GET: 从服务器端读取数据（查）
  • POST: 向服务器端添加新数据 （增）
  • PUT: 更新服务器端已经数据 （改）
  • DELETE: 删除服务器端数据 （删）

Ajax实现过程

  1. 创建Ajax的核心对象XMLHttpRequest对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 在发起请求之前，通过setRequestHeader方法来为Ajax请求添加头信息
  4. 发送HTTP请求
  5. 获取异步调用返回的数据，XMLHttpRequest状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果
  6. 使用JavaScript和DOM实现局部刷新

手写Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 1. 创建对象 
const xhr = new XMLHttpRequest();
// 2. 初始化 设置请求方法和url
xhr.open('GET','https://www.baidu.com/',true);
// 3.设置请求头
xhr.setRequestHeader("Access-Control-Allow-Origin","*");
// xhr.responseType = "json";
// 4. 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function(){
    // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
    // 判断 (服务端返回了所有的结果
    if(xhr.readyState === 4){
        // 判断响应状态码 200 404 403 401 500
        if(xhr.status >= 200 && xhr.status < 300){
        // 处理结果 行 头 空行 体
        // 响应
        console.log('状态码', xhr.status); // 状态码
        console.log('状态字符串', xhr.statusText); // 状态字符串
        console.log('所有响应头', xhr.getAllResponseHeaders()); // 所有响应头
        console.log('响应体', xhr.response); // 响应体
        
        //设置 result 的文本
        result.innerHTML=xhr.response;
      }
    }

}
xhr.onerror = function(){
 console.error(this.statusText);
}
// 5. 发送
xhr.send();

加入Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function ajax(url){
    const promise = new Promise((resolve,reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET',url,true)
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    resolve(JSON.parse(xhr.responseText))
                }else{
                    reject(new Error('error'))
                }
            }
        }
        xhr.send(null)
    })
    return promise
}

// 使用
const url = 'xxxx.com'
ajax(url).then(res => {
    console.log(res)
}).catch(err =>{
    console.error(err)
})

API总结

  • XMLHttpRequest()：创建 XHR 对象的构造函数
  • status：响应状态码值，如 200、404
  • statusText：响应状态文本，如 ’ok‘、‘not found’
  • readyState：标识请求状态的只读属性 0-1-2-3-4
  • onreadystatechange：绑定 readyState 改变的监听
  • responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
  • response：响应体数据，类型取决于 responseType 的指定
  • timeout：指定请求超时时间，默认为 0 代表没有限制
  • ontimeout：绑定超时的监听
  • onerror：绑定请求网络错误的监听
  • open()：初始化一个请求，参数为：(method, url[, async])
  • send(data)：发送请求
  • abort()：中断请求 （发出到返回之间）
  • getResponseHeader(name)：获取指定名称的响应头值
  • getAllResponseHeaders()：获取所有响应头组成的字符串
  • setRequestHeader(name, value)：设置请求头