XMLHttpRequest对象

XMLHttpRequest对象是浏览器提供的向服务器请求和解析响应数据的接口。

XMLHttpRequest Level1（版本1）

XHR对象由IE最早提出，并在之后所有主流浏览器都实现了该对象。最初使用该对象的方式被称作版本1。

function getJSON1 (url, callback) {
var xhr = new XMLHttpRequest()
// 请求/响应的当前活动阶段变化时，触发该方法
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText)
}
}
xhr.open('GET', url)
xhr.send(null)
}

 get方式请求接口，必须将参数与url拼接，形成如下格式的字符串
http://localhost/findByName?name=wujiang&id=1
open()方法第三个参数默认为异步调用，默认值为true

XMLHttpRequest Level2（版本2）

在XHR得到广泛接受后，W3C将其规范化，并对XHR进行升级、规范，形成了XMLHttpRequest Level2的规范。

function getJSON1 (url, callback) {
var xhr = new XMLHttpRequest()
// 请求成功时
xhr.onload= function () {
callback(xhr.responseText)
}
xhr.open('GET', url)
xhr.send(null)
}

设置请求头

function submitData (url, callback) {
varxhr = new XMLHttpRequest()
xhr.onload = function () {
callback(xhr.responseText)
}
xhr.open('POST', url, true)
// 设置请求头，以post表单的方式发送请求，参数格式为'a=1&b=2c=yyy'
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=wujiang&id=1')
}

当以POST方式发送请求时，请求参数必须通过send()方法传递，且请求头必须设置在
open()方法和send()方法之间。如果以表单的方式发送请求，需设置Content-Type
值为'application/x-www-form-urlencoded'，且其数据格式为'a=1&b=2'。
若以json格式发送请求，需设置Content-Type值为'application/json'，
且其数据格式为json字符串，即JSON.Stringify(obj)，obj为javascript对象。

跨浏览器创建XHR对象

// 跨浏览器创建XMLHttpRequest对象
function createXHR () {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject !== 'undefined') {
if (typeof arguments.callee.activeXString !== 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
],
i, len
for (i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i])
arguments.callee.activeXString = versions[i]
break
} catch (e) {
}
}
}
return new ActiveXObject(arguments.callee.activeXString)
} else {
throw new Error('No XHR object available.')
}
}

参考

https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#event-xhr-load
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

最后

以上就是优美高跟鞋为你收集整理的javascript-深入理解XMLHttpRequest对象（一）XMLHttpRequest对象的全部内容，希望文章能够帮你解决javascript-深入理解XMLHttpRequest对象（一）XMLHttpRequest对象所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。