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

相关推荐
橙某人12 小时前
LogicFlow 插件魔改实录:手把手教你重写动态分组(DynamicGroup)🛠️
前端·javascript·vue.js
阿蔹12 小时前
UI测试自动化-Web-Python-Selenium-2-元素操作、浏览器操作
前端·python·selenium·ui·自动化
谎言西西里12 小时前
React hooks 之 一篇文章掌握 useState 和 useEffect 的核心机制
前端·react.js
Apifox.12 小时前
Apifox 12 月更新| AI 生成用例同步生成测试数据、接口文档完整性检测、设计 SSE 流式接口、从 Git 仓库导入数据
前端·人工智能·git·ai·postman·团队开发
bjzhang7512 小时前
使用 HTML + JavaScript 实现滑动验证码
前端·javascript·html
行走的陀螺仪13 小时前
使用uniapp,实现根据时间倒计时执行进度条变化
前端·javascript·uni-app·vue2·h5
科技D人生13 小时前
Vue.js 学习总结(19)—— Vue3 按钮防重复点击三种方案总结
前端·vue.js·uniapp·vue3 防重复提交·uniapp 防重复提交·前端防抖
指尖跳动的光13 小时前
前端视角-如何保证系统稳定性
前端
fruge13 小时前
2025全栈技术深耕与实践:从框架融合到工程落地
前端
秋42713 小时前
tomcat与web服务器
服务器·前端·tomcat