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

相关推荐
lichenyang45338 分钟前
为什么需要双线程通信、JavaScriptProxy 和 runJavaScript 分别干什么
前端
以和为贵1 小时前
前端也能搞懂 RAG:用 JS 手写一条最小检索增强链路
前端·人工智能·面试
风止何安啊1 小时前
网课倍速痛点解决:一套前端代码实现自由控速播放器
前端·javascript·node.js
牧艺1 小时前
用 Next.js + React Three Fiber 打造 3D 快递仓储可视化
前端·three.js
锋行天下2 小时前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架
光影少年2 小时前
原生DOM操作在React 中的注意事项
前端·javascript·react.js
禅思院4 小时前
前端部署“三层漏斗”完全指南:从CI/CD到自动回滚的工程化实战【开题】
前端·架构·前端框架
快乐肚皮5 小时前
深入理解Loop Engineering
前端·后端
风骏时光牛马5 小时前
VHDL十大经典基础功能设计实例代码合集
前端
hunterandroid5 小时前
Notification 通知:从基础到渠道适配
前端