手写AJAX - 技术栈

手写AJAX

Repeater、2024-02-09 17:48

javascript 复制代码

function ajax(method,url,data,success,fail){
    let xhr = new XMLHttpRequest()
    xhr.open(method,url)
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                success(xhr)
            }else{
                fail(xhr)
            }
        }
    }
    xhr.send(data) // 如果是post有请求体，get没有请求体
}


ajax('get','https://www.baidu.com/',{},(xhr)=>{console.log('success',xhr)}, (xhr)=>{console.log('fail',xhr)})

ajax('post','https://www.baidu.com/',{a:123},(xhr)=>{console.log('success',xhr)}, (xhr)=>{console.log('fail',xhr)})

readyState有五种状态，分别是:

0：UNSENT 代理被创建，但尚未调用 open() 方法。

1：OPENED open() 方法已经被调用。

2：HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。

3：LOADING 下载中； responseText 属性已经包含部分数据。

4：DONE 下载操作已完成。