對於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)
            }
        }
})