Ajax简单使用 - Ocean Han

338 字

2 分钟

Ajax简单使用

2023-03-03

前端

JS

Ajax#

描述#

TIP
Ajax在浏览器是通过XMLHttpRequest对象来实现数据传输的。

1
// `XMLHttpRequest`对象进行`HTTP`请求前必须通过open初始化，`open`接受五个参数，分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证。
2
open(Method, URL, Asynchronous, UserName, Password)
3
//  在成功初始化请求之后，XMLHttpRequest对象的setRequestHeader方法可以用来设置请求头。
4
setRequestHeader(key,value)
5
//  调用open()方法后，就可以通过调用send()方法按照open方法设定的参数将请求进行发送。
6
send(Data)
7
//  当open方法设定发送的方式为异步请求时，onreadystatechange事件监听器将自动在XMLHttpRequest对象的readyState属性改变时被触发
8
switch(readyState){
9
    case 1: break; //当open方法被成功调用,readyState为1
10
    case 2: break; //当send方法被调用，readyState属性被置为2
11
    case 3: break; //HTTP响应内容开始加载，readyState属性被置为3
12
    case 4: break; //HTTP响应内容结束加载，readyState属性被置为4
13
}
14
//  如果XMLHttpRequest对象的readyState属性还没有变成4，abort可以终止请求。这个方法可以确保异步请求中的回调不被执行
15
abort()

ajax简单使用#

1
function Ajax(url,method = 'GET',data = null,async = true) {
2
    let XHR = XMLHttpRequest;
3
    XHR = new XMLHttpRequest();
4
    XHR.onreadystatechange = function () {
5
        if(XHR.readyState === 4)
6
            console.log(`响应状态:${XHR.status}`,'FINISH');
7
    }
8
    XHR.open(method,url,async);
9
    XHR.send(data);
10
}