前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手动实现AJAX

手动实现AJAX

作者头像
WindrunnerMax
发布2020-08-27 16:35:06
4650
发布2020-08-27 16:35:06
举报
文章被收录于专栏:Czy‘s BlogCzy‘s Blog

AJAX

每日更新前端基础,如果觉得不错,点个star吧 ? https://github.com/WindrunnerMax/EveryDay

AJAX在浏览器是通过XMLHttpRequest对象来实现数据传输的

XMLHttpRequest对象进行HTTP请求前必须通过open初始化,open接受五个参数,分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证

代码语言:javascript
复制
open(Method, URL, Asynchronous, UserName, Password)

在成功初始化请求之后,XMLHttpRequest对象的setRequestHeader方法可以用来设置请求头

代码语言:javascript
复制
setRequestHeader(key,value)

调用open()方法后,就可以通过调用send()方法按照open方法设定的参数将请求进行发送

代码语言:javascript
复制
send(Data)

open方法设定发送的方式为异步请求时,onreadystatechange事件监听器将自动在XMLHttpRequest对象的readyState属性改变时被触发

代码语言:javascript
复制
switch(readyState){
    case 1: break; //当open方法被成功调用,readyState为1
    case 2: break; //当send方法被调用,readyState属性被置为2
    case 3: break; //HTTP响应内容开始加载,readyState属性被置为3
    case 4: break; //HTTP响应内容结束加载,readyState属性被置为4
}

如果XMLHttpRequest对象的readyState属性还没有变成4,abort可以终止请求。这个方法可以确保异步请求中的回调不被执行。

代码语言:javascript
复制
abort()
ajax的简单实现

由于浏览器的同源策略(协议 url 端口号 任一不同都算为跨域请求),于是此代码需要打开百度的首页,在开发者工具的Console直接执行,在Network查看效果

代码语言:javascript
复制
    function ajax(url,method="GET",data=null,async=true) {
        // 声明XMLHttpRequest //在IE5和IE6中需要使用ActiveX对象
        var XHR = XMLHttpRequest;
        // 创建XMLHttqRequest
        XHR = new XMLHttpRequest()
        // 设置请求状态改变时执行的函数
        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4 ) console.log(`响应状态:${XHR.status}`,"FINISH") //XHR.responseText为响应体
         }
         // 初始化请求参数
         XHR.open(method,url,async)
         // 发起请求
         XHR.send(data)
    }

    ajax("https://www.baidu.com");
    ajax("https://www.baidu.com","POST","A=1&B=2");
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • AJAX
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档