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

相关推荐
Hooray27 分钟前
为了在 Vue 项目里用上想要的 React 组件,我写了这个 skill
前端·ai编程
咸鱼翻身了么29 分钟前
模仿ai数据流 开箱即用
前端
风花雪月_29 分钟前
🔥IntersectionObserver:前端性能优化的“隐形监工”
前端
Bigger29 分钟前
告别 AI 塑料感:我是如何用 frontend-design skill 重塑项目官网的
前端·ai编程·trae
发际线向北29 分钟前
0x02 Android DI 框架解析之Hilt
前端
zhensherlock43 分钟前
Protocol Launcher 系列:Overcast 一键订阅播客
前端·javascript·typescript·node.js·自动化·github·js
liangdabiao1 小时前
开源AI拼豆大升级 - 一键部署cloudflare page - 全免费 web和小程序
前端·人工智能·小程序
SuperHeroWu72 小时前
【鸿蒙基础入门】概念理解和学习方法论说明
前端·学习·华为·开源·harmonyos·鸿蒙·移动端
Full Stack Developme2 小时前
MyBatis-Plus 流式查询教程
前端·python·mybatis
用户412467508372 小时前
用 Locust 压测一个网站,记录一下学习过程
前端