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

相关推荐
Allen Bright几秒前
【HTML-4】HTML段落标签:构建内容结构的基础
前端·html
老天文学家了1 小时前
HashMap的基础用法(java)
java·前端·javascript
speedoooo1 小时前
App Builder技术选型指南:从AI编程到小程序容器,外卖App开发实战
前端·小程序·前端框架·ai编程·web app
漂流瓶jz1 小时前
聊一下CSS中的标准流,浮动流,文本流,文档流
前端·css·float·浮动·文档流·文本流·标准流
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Blurry Loading (毛玻璃加载)
前端·javascript·vue.js
哎哟喂_!1 小时前
深入掌握Node.js HTTP模块:从开始到放弃
开发语言·前端·javascript·http·node.js
无名之逆1 小时前
Build High-Performance Web Services with Hyperlane
服务器·开发语言·前端·http·rust
七月shi人2 小时前
Canvas设计图片编辑器全讲解(一)Canvas基础(万字图文讲解)
前端·javascript·canvas
患得患失9492 小时前
【css】【面试提问】css经典问题总结
前端·css
程序员Bears2 小时前
React深度解析:Hooks体系与Redux Toolkit现代状态管理实践
前端·react.js·前端框架