Ajax XMLHttpRequest对象详细讲解及使用实例分析
1.XMLHttpRequest对象
- 创建XHR对象:let xhr = new XMLHttpRequest();
- open():启动一个请求准备发送
open()接收3个参数:请求类型('GET'、'POST')、请求的URL、是否异步发送请求(true or false)。
-
send():发送请求
send()
接受一个参数:作为请求主体要发送的数据,如果不需要发送数据,传入一个null, 以防止出现未知错误。 -
setRequestHeader():设置自定义的请求头部信息
setRequestHeader()
接收两个参数:头部字段的名称和头部字段的值;调用此方法必须要在调用open()
方法之后,send()
之前。 -
getResponseHeader():获取响应信息中的某个指定头部信息
-
getAllResponseHeaders():获取响应信息的所有头部信息
getResponseHeader()
接收一个参数:需要知道的头部信息的名称;但W3C标准对这两个方法有限制,它们不能获取如Set-Cookie
、Set-Cookie2
等的头部信息;所以getAllResponseHeaders()
只能拿到限制以外(即被视为safe
)的头部信息,而不是全部;而调用getResponseHeader(string)
方法时,传入的参数必须是限制以外的头部名称,否则会报错。 -
XHR对象属性:
-
responseText:作为响应主体被返回的文本。
-
responseXml:如果相应的内容类型为XML, 此属性保存响应数据的XML DOM文档; 如果为非XML数据,则为null。
-
status: 响应的HTTP状态。
-
statusText:HTTP的状态说明。
-
readyState:表示请求/响应过程的阶段
-
0:未初始化;未调用
open()
方法。 -
1:启动;已调用
open()
方法,但未调用send()
方法。 -
2:发送;已调用
send()
方法,但未接收到响应。 -
3:接收;已接收到部分响应数据。
-
4:完成;已接收到所有响应数据。
备注:
readyState
的值每改变一次,都会触发readystatechange
事件。
-
-
- XHR兼容性(2018-11 from www.caniuse.com)
2.创建具有兼容性的XMLHttpRequest对象
1 function getXHR() { 2 let xhr = null; 3 if (window.XMLHttpRequest) { 4 //IE10+以及其他主流浏览器 5 xhr = new XMLHttpRequest(); 6 7 } else if (window.ActiveXObject) { 8 //IE9及以下、MSXML3、MSXML2.6及以下 9 let versions = [ 10 'MSXML2.XMLHttp.6.0', 11 'MSXML2.XMLHttp3.0', 12 'MSXML2.XMLHttp', 13 'Microsoft.XMLHttp' 14 ]; 15 for (let i=0; i<versions.length; i++) { 16 try { 17 //创建成功结束循环,创建失败抛出错误 18 xhr = new ActiveXObject(versions[i]); 19 break; 20 } catch (e) { 21 //skip_跳过 22 } 23 } 24 25 } 26 return xhr; 27 }
3.封装Ajax请求数据函数
1 function ajax(opts) { 2 let xhr = getXHR(); 3 if (xhr) { 4 //检查参数 5 let async = opts.async === undefined ? true:opts.async; 6 let method = opts.method.toUpperCase(); 7 let data = opts.data === undefined ? null:opts.data; 8 9 xhr.open(method, opts.url, async); 10 11 //回调函数 12 xhr.onreadystatechange = function() { 13 if (xhr.readyState == 4) { 14 let status = xhr.status; 15 if (status >= 200 && status < 300 || status == 304) { 16 opts.success && opts.success(xhr.responseText, xhr.responseXML); 17 18 } else { 19 opts.fail && opts.fail(status); 20 } 21 } 22 } 23 24 if (method == 'POST') { 25 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 26 } 27 xhr.send(data); 28 29 } else { 30 let error = { 31 message: 'not support ajax.', 32 code: -1; 33 } 34 opts.fail && opts.fail(error); 35 } 36 } 37 38 //使用 39 ajax({ 40 url: /example, 41 method: POST, 42 data: {...}, 43 success: function(){...}, 44 fail: function(){...}, 45 async:true 46 });
4.备注
最近在看网页向服务端请求数据相关的内容,忽然记起自己还有个blog,于是把markdown中的笔记改改发上来,太懒了,XMLHttpRequest level 2就不写了,现在应该都是用fetch()了。
5.参考
stackoverflow上的答案:https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery?answertab=votes#。
- 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 数组属性和方法
- H5-locaStorage解析
- h5-history解析
- h5-worker多线程js
- ES6-MapES5模拟实现
- NodeJs前导课
- NodeJs-Lesson1-require和module.exports探究
- NodeJs-lesson2-深入探究exports等~
- jdk1.7-HashMap原理分析
- osi七层网络模型及网络基础知识
- 【Nio】01--初始Nio组件
- 【Netty】01-服务端和客户端的搭建
- 【Netty】02-netty中不得不说的粘包与拆包
- 【不可思议的CANVAS】画一只会跟着鼠标走的小狗
- 【Netty】03-实战之序列化与反序列化协议
- JDK15正式发布,划时代的ZGC同时宣布转正