AJAX

1. 实现一个ajax

AJAX创建异步对象XMLHttpRequest，操作XMLHttpRequest对象：

（1）       设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2）       设置一个处理服务器响应的回调函数，使用onreadystatechange，类似于函数指针

（3）       获取异步对象的readyState属性：该属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行。

（4）       判断响应报文的状态，若为200说明服务器正常运行并返回响应数据。

（5）       读取响应数据，可以通过responseText属性来获取由服务器返回的数据。

2. 写出原生的AJAX

AJAX能够在不重新加载整个页面的情况下域服务器交换数据并更新部分网页，实现局部刷新，大大降低了资源的浪费，是一门英语快速创建动态网页的技术，ajax使用分为四个部分：

1. 创建XMLHttpRequest对象 var xhr=new XMLHttpRequest()
2. 向服务器发送请求，使用XMLHttpRequest对象的open和send方法
3. 监听状态变化，执行响应的回调函数
4. 判断响应报文拽太是否为200， 通过responseText属性读取响应报文数据

如果要发出两个顺序的ajax，可以用回调函数，也可以使用Promise.then或者async

var xhr=newHttpRequest()

xhr.open(‘get’,’aabb.php,true);

xhr.send(null)

xhr.onreadystatechange=function(){

   if(xhr.readyState==4){

            if(xhr.status==200){

console.log(xhr.responseText)

}

}

}

 

3. AJAX返回的状态

0-------（未初始化）还没有调用send方法

1-------（载入）已调用send方法正在发送请求

2-------（载入完成）send方法执行完成，已经接受到全部响应的内容

3-------（交互）正在解析响应内容

4-------（完成）响应内容解析完成，可以在客户端调用了。

4. Promise封装后的ajax请求。

function fetch(method, url, data){

    return new Promise((resolve, reject) => {

        var xhr = new XMLHttpRequest();

        var method = method || "GET";

        var data = data || null;

        xhr.open(method, url, true);

        xhr.onreadystatechange = function() {

            if(xhr.status === 200 && xhr.readyState === 4){

                resolve(xhr.responseText);

            } else {

                reject(xhr.responseText);

            }

        }

        xhr.send(data);

        })

}