Ajax

概念

• Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。
• Asynchronous Javascript And XML （异步的JavaScript和XML）

应用场景

• 数据表单验证
• 按需获取数据
• 自动更新页面
• jsonp

原理

• 依赖浏览器提供的XMLHttpRequest对象，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。

原生Ajax

const SERVER_url = '/server';
let xhr = new XMLHttpRequest();
xhr.open('Get', SERVER_url, true);
// 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type
// 告诉一下服务端我给你的是一个什么样子的数据格式
//xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
​
xhr.onreadystatechange = function() {
    if (this.readyState !== 4) return;
    if (this.status >= 200 && this.status <= 300) {
        handle(this.response)
    } else {
        console.error(this.statusText);
    }
}
​
xhr.onerror = function() {
    console.error(this.statusText);
}
xhr.responseType = 'json'
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

JQuery使用

 $.ajax({
    async: true, // 表示请求是否异步处理。默认是 true。
    type: "POST", // 规定请求的类型（GET 或 POST）。
    url: url,  // 规定发送请求的 URL。默认是当前页面。
    timeout: 1000, // 设置本地的请求超时时间（以毫秒计）。
    data: , // 规定要发送到服务器的数据。
    dataType: "json", // 预期的服务器响应的数据类型。
    contentType: , 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
    beforeSend(xhr), // 发送请求前,返回结果前运行的函数。
    success(result,status,xhr), // 当请求成功时运行的函数。
    error(xhr,status,error), // 如果请求失败要运行的函数。
    complete(xhr,status), 请求完成时运行的函数（在请求成功或失败之后均调用，即在success 和 error 函数之后）。
});

Promise封装Ajax

function getjson(url) {
    let promise = new Promise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open('Get', SERVER_url, true);
        xhr.onreadystatechange = function() {
            if (this.readyState !== 4) return;
            if (this.status >= 200 && this.status <= 300) {
                resolve(this.response)
            } else {
                reject(this.statusText);
            }
        }
​
        xhr.onerror = function() {
            reject(this.statusText);
        }
        xhr.responseType = 'json'
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send(null);
    })
    return promise
}

优点

• 减轻服务器的负担,按需取数据,最大程度的减少冗余请求。
• 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
• 基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离。

缺点

• 属 js 原生，基于XHR（XMLHttpRequest）进行开发，XHR 结构不清晰。
• 针对 mvc 编程，由于近来vue和React的兴起，不符合mvvm前端开发流程。
• 单纯使用 ajax 封装，核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话，容易产生回调地狱

参考资料

• # 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较