手动实现AJAX
时间:2022-07-24
本文章向大家介绍手动实现AJAX,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
AJAX
每日更新前端基础,如果觉得不错,点个star吧 ? https://github.com/WindrunnerMax/EveryDay
AJAX
在浏览器是通过XMLHttpRequest
对象来实现数据传输的
XMLHttpRequest
对象进行HTTP请求前必须通过open初始化,open接受五个参数,分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证
open(Method, URL, Asynchronous, UserName, Password)
在成功初始化请求之后,XMLHttpRequest
对象的setRequestHeader
方法可以用来设置请求头
setRequestHeader(key,value)
调用open()
方法后,就可以通过调用send()
方法按照open方法设定的参数将请求进行发送
send(Data)
当open
方法设定发送的方式为异步请求时,onreadystatechange
事件监听器将自动在XMLHttpRequest
对象的readyState
属性改变时被触发
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
可以终止请求。这个方法可以确保异步请求中的回调不被执行。
abort()
ajax的简单实现
由于浏览器的同源策略(协议 url 端口号 任一不同都算为跨域请求),于是此代码需要打开百度的首页,在开发者工具的Console
直接执行,在Network
查看效果
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");
- HDUOJ---1996汉诺塔VI
- HDUOJ---(1995)汉诺塔V
- HDUOJ----(2612)Find a way
- HDUOJ----2512一卡通大冒险
- HDUOJ------(1230)火星A+B
- nyoj-----前缀式计算
- HDUOJ----(4788)Hard Disk Drive
- NYOJ-------笨蛋难题四
- Win平台Web访问白名单设置脚本(IP安全性原则)
- NYOJ-------表达式求值
- HDUOJ----1181 变形课
- 正确的Win主机网站伪静态设置方法
- HDUOJ----(1084)What Is Your Grade?
- HDUOJ------(1272)小希的迷宫
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【colab pytorch】模型定义
- 初级爬虫--爬取拉勾网职位信息
- requests库
- hadoop之完全分布式集群配置(centos7)
- XPath
- 62. Vue 饿了么Mint UI组件的基本使用
- 【colab pytorch】数据处理
- requests+lxml+xpath爬取豆瓣电影
- python之子类继承父类时进行初始化的一些问题
- 【猫狗数据集】定义模型并进行训练模型
- springmvc之处理模型数据Map
- requests+lxml+xpath爬取电影天堂
- 【python-leetcode90-子集】子集Ⅱ
- 【colab pytorch】保存模型
- 【猫狗数据集】保存训练模型并加载进行继续训练