Ajax 如何使用

本文介绍: Aja x 如何使用一个完整的 AJAX 请求包括五个步骤：1、创建 XMLHTTPReque s t 对象2、使用 open 方法创建 http 请求，并设置请求地址 xhr.op en（get/post，url，async，true（异步），false（同步））经常使用前三个参数3、设置发送的数据，用 send 发送请求4、注册事件（给 ajax 设置事件）5、获取响应并更新页面 function Api ({url, method = ‘GET’, header = {}, call b ack

Ajax 如何使用

一个完整的 AJAX 请求包括五个步骤：

1、创建 XMLHTTPReque s t 对象
2、使用 op en 方法创建 http 请求，并设置请求地址
 xhr.op en（get/post，url，async，true（异步），false（同步））
经常使用前三个参数
3、设置发送的数据，用 send 发送请求
4、注册事件（给 ajax 设置事件）
5、获取响应并更新页面

function  Api ({url, method = 'GET', header = {}, callback = function(){}}) {
    
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.responseType = 'json';

    for (let x in header) {
        xhr.setRequestHeader(x, header[x]);
    }

    xhr.send();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
            callback(xhr.response);
        }
    }
}

function  Api ({ url, method = 'GET' }) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.responseType = 'json';

        // for (let x in header) {
        // xhr.setRequestHeader(x, header[x]);
        // }

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                resolve(xhr.response);
                // resolve才有api({}).then()方法
            }
        }
    })
}