JS-AJAX

参考: 用js实现Ajax请求;

封装Ajax

AJAX

定义：Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

作用：提高用户体验，减少网络数据的传输量

Asynchronous JavaScript And XML(异步的JS和XML) ;

不过现在已经很少请求XML数据了。而改为请求JSON格式的数据。

本质: AJAX，其实就是通过JS代码异步发送请求获取数据，更新到页面上。

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。

---

第一步：初始化一个JS对象 ,这个js对象可以发送http请求;

var xhr = new XMLHttpRequest();

第二步：添加onreadystatechange事件

    // 这个事件名字，叫做 当等待状态改变

xhr.onreadystatechange = function() { }

XMLHttpRequest对象的5种状态：

• 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
• 1：请求已开始，open()方法已调用，但还没调用send()方法；
• 2：请求发送完成状态，send()方法已调用；
• 3：开始读取服务器响应；
• 4：读取服务器响应结束。 

onreadystatechange事件会在状态为1、2、3、4时引发。

但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其实我们还要关心服务器响应的状态码是否为200，我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

我们还需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText属性得到服务器响应内容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

第三步：调用open方法

xhr.open( )

作用：打开TCP连接

open的第一个参数 是请求方式
open的第二个参数 是URL
open的第三个参数 是否异步发送请求 （,默认不写是 true，异步； false，同步）
xhr.open('get', './regist.php', true);

php能接收到表单提交的数据,但接收不到ajax的,所以要伪装成表单提交的,所以修改请求头;

 post有;修改请求头

xhr.setRequestHeader("content-type", 'application/x-www-form-urlencoded');

第四步：调用send方法

xhr.send( ); // 发送请求正文

send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在open方法的URL后连接参数。

post请求写到send方法里; 而get请求要写到open方法的url参数上;

封装Ajax;

ajax提交数据要阻止表单我叫数据;

var QF = {

    get(url, data, callback) {
        if (typeof data === 'function') {
            //如果只传两个参数,url和function时,执行这个代码;
            //calback保存的还是函数,date保存的还是数据{};
            callback = data;
            data = {};
        }
        // 假设data =>  {a:1, b: 2, c:3, d: 4}
        // 最终需要的querystring => "a=1&b=2&c=3&d=4"
        let querystring = '';
        for (var i in data) {
            querystring += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + "&";
            // 第一次循环 i 是 a  data[i]是 1  querystring => a=1&
            // 第二次循环 i 是 b  data[i]是 2  querystring => a=1&b=2&
            // 第三次循环 querystring => a=1&b=2&c=3&
            // 第四次循环 querystring => a=1&b=2&c=3&d=4&
        }
        // 去掉最后一个&
        querystring = querystring.slice(0, -1);
        // 初始化
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                try {
                    var data = JSON.parse(xhr.responseText);

                } catch (e) {
                    throw new Error("返回数据的格式不是JSON格式，请检查返回数据")
                }
                callback(data);
            }
        }

        // 调用open方法
        xhr.open("get", url + "?" + querystring, true);
        // 发送请求
        xhr.send();
    },

    post(url, data, callback) {
        var querystring = "";
        for (var i in data) {
            querystring += i + "=" + data[i] + "&";
        }
        querystring = querystring.slice(0, -1);
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                try {
                    var data = JSON.parse(xhr.responseText);

                } catch (e) {
                    throw new Error("返回数据的格式不是JSON格式，请检查返回数据")
                }
                callback(data);
            }
        }
        xhr.open("post", url, true);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(querystring);
    }
}

调用方法: get和post;

QF.get(url,数据{ }, 回调函数);

QF.post(url,数据{ }, 回调函数);