手写AJAX

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 下载操作已完成。

相关推荐
ly76896 小时前
HTML5 从入门到工程实践:语义化、表单、多媒体、性能与项目规范详解
前端·html·html5
人民广场吃泡面10 小时前
前端该重视的编程思想
前端
冬夜戏雪10 小时前
agent的trace 和eval
开发语言·前端·javascript
IT_陈寒10 小时前
Redis的DEL命令居然没删干净数据?这个坑我爬了半天
前端·人工智能·后端
kyriewen10 小时前
面试官让我现场用 AI 改一个真实 bug——他打断我的 3 个理由
前端·面试·ai编程
计算机魔术师12 小时前
斯坦福研究:AI 对入门级岗位冲击最大
前端
Simon_He12 小时前
一个渲染内核,五个框架包:我的流式 Markdown 渲染库是怎么长成“全家桶”的
前端·vue.js·markdown
小满zs12 小时前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app