ajax实现异步传输

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/16019173.html

---

对于ajax实现异步数据传输，需要以下步骤：

　　1.创建XmlHttpRequest对象：

var xhr = new XMLHttpRequest();

 

　　2.创建一个新的HTTP请求 ：

　　

/*
* 规定请求的类型、URL 以及是否异步处理请求。
* open(method,url,async)  
* method：请求的类型；GET 或 POST
* url：文件在服务器上的位置
* async：true（异步）或 false（同步）
*/
例：//get方式
   xmlhttp.open("GET","ajax_info.txt",true);
   //post方式发送数据需要设置请求头
   xmlhttp.open("post","test.php",true)
   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

 

　　3.发送HTTP请求：

XMLHttpRequest.send(data); //data是个可选参数

 

　　4.设置响应http请求状态变化的函数，设置获取服务器返回数据的代码语句：

 

　　XMLHttpRequest的五种状态

　　发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5种状态。

　　0：未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态。
　　1：初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态，还没有调用send()
　　2：发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态。
　　3：接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态。
　　4：完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。
　　只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。

　　HTTP状态码：

　　200：请求成功

　　400：客户端请求语法错误，服务端无法理解信息

　　404：服务器无法根据用户请求找到相应的资源，例如URL等等

　　500：服务器内部错误

 

当readyState=4并且状态码是200的时候，就表示响应已经就绪：

 xmlHttpRequest.onreadystatechange = getData;

    //定义函数
    function getData() {
        //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
        if (xmlHttpRequest.readyState == 4) {
            //如果HTML文件不是在Web服务器上运行，而是在本地运行，则xmlHttpRequest.status的返回值为0。因此，如果该文件在本地运行，则应该加上xmlHttpRequest.status == 0的判断
            if (xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0) { 
                document.write(xmlHttpRequest.responseText); //将返回结果以字符串形式输出
            }
        }
    }

 

　　5.获取返回的数据：（获取返回的数据有多种方式，get，post，Ajax）

下面是Ajax的方法：

function ajax(options) {
        //存储默认值
        var defaults = {
            type: 'get',
            url: '',
            data: {},
            header: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function () {},
            error: function () {}
        }

        //使用options对象中的属性覆盖defaults对象中的属性
        Object.assign(defaults, options);

        var xhr = new XMLHttpRequest();

        var params = '';
        //循环用户传递进来的对象格式参数
        for (var attr in defaults.data) {
            //将参数转化为字符串格式
            params += attr + '=' + defaults.data[attr] + '&'
        }
        //将参数最后的&截取掉
        params = params.substr(0, params.length - 1)

        //判断请求方式
        if (defaults.type == 'get') {
            defaults.url = defaults.url + '?' + params
        }

        xhr.open(defaults.type, defaults.url);

        //如果请求方式为post
        if (defaults.type == 'post') {
            //请求参数类型
            var ContentType = defaults.header['Content-Type']
            xhr.setRequestHeader('Content-Type', ContentType);
            if (ContentType == 'application/json') {
                //传递json数据格式
                xhr.send(JSON.stringify(defaults.data))
            } else {
                //传递字符串拼接格式
                xhr.send(params)
            }
        } else {
            xhr.send();
        }

        xhr.onload = function () {
            //获取响应头数据
            var contenTtype = xhr.getResponseHeader('Content-Type')

            //服务器端返回的数据
            var responseText = xhr.responseText

            //判断是否包含application/json
            if (contenTtype.includes('application/json')) {
                //将json字符串转化为json对象
                responseText = JSON.parse(responseText)
            }

            //判断是否成功
            if (xhr.status == 200) {
                defaults.success(responseText, xhr);
            } else {
                defaults.error(responseText, xhr)
            }
        }
}

//get方式
    ajax({
        url: 'http://localhost:3000/top/album?offset=0&limit=3',
        type: 'GET',
        dataType: 'json',
        success: function (data, xhr) {
            console.log(data, xhr)
        },
})

//post方式
ajax({
        url: 'http://localhost:3000/top/album',
        type: 'POST',
        data: {
            offset: 0,
            limit: 3
        },
        dataType: 'json',
        success: function (data, xhr) {
            console.log(data, xhr)
        },
    })

 

　　操作获取数据：

 <div class="container">
        <p id="list"></p>
 </div>

var xhr = new XMLHttpRequest();
    xhr.open("get",
        "http://localhost:3000/search/hot",
        true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            var res = xhr.responseText;
            // 将res转换为json对象
            var lists = eval("(" + res + ")").result.hots;
            var data =(new Function("","return "+res))();
            
            console.log(lists)
            for (i = 0; i < 10; i++) {
                var dom = `<div class="songname">${lists[i].first}</div>`
                $("#list").append(dom)
            }
        }
}

//jquery
$.ajax({
        url: 'http://localhost:3000/top/album?offset=0&limit=3',
        type: 'GET',
        dataType: 'json',
        success: function (result) {
            var lists = result.monthData;
            for (i = 0; i < 10; i++) {
                console.log(lists[i].name);
                dom = `<div class = "songname">${lists[i].name}</div>`
                $("#list").append(dom)
            }
        }
})