AJAX - XMLHttpRequest 对象

XMLHttpRequest对象用于与服务器交换数据。

XMLHttpRequest对象

所有现代浏览器(Chrome,Firefox,IE7 +,Edge,Safari,Opera)都具有内置XMLHttpRequest对象。

XMLHttpRequest 通过与幕后的Web服务器交换数据来允许异步更新网页。

您可以从URL检索数据,而不必刷新整个页面。

这使网页可以更新页面的一部分,而不会中断用户的操作。

创建一个XMLHttpRequest对象

在客户端和服务器之间执行AJAX通信之前,首先要做的是示例化一个XMLHttpRequest对象,如下所示:

语法:

var request = new XMLHttpRequest();
var httpRequest = new XMLHttpRequest();
测试看看

跨站点XMLHttpRequest

出于安全原因,现代浏览器不允许跨域访问。

这意味着该网页及其尝试加载的请求文件都必须位于同一服务器上。

xxs100.com上的示例均打开了位于xxs100.com域中的所有打开的请求文件。

如果要在自己的网页之一上使用上面的示例,则请求的文件必须位于您自己的服务器上。

较旧的浏览器(适用于IE 6及更早版本)

Internet Explorer的旧版本(6和更早版本)使用的是ActiveX对象而不是XMLHttpRequest对象。

Syntax:
var request = new ActiveXObject("Microsoft.XMLHTTP");

要处理IE6及更早版本,请检查浏览器是否支持该XMLHttpRequest对象,否则创建一个ActiveX对象:

var httpRequest;

if (window.XMLHttpRequest) {
    // 目前主流的浏览器(Chrome, Mozilla, Safari, IE7+, ...)
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // <= IE 6 或早期IE版本
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
测试看看

XMLHttpRequest对象属性

下表列出了XMLHttpRequest对象的所有属性:

属性描述
onreadystatechange定义当readyState属性更改时要调用的函数
readyState保持XMLHttpRequest的状态:
0:请求未初始化
1:服务器连接建立
2:收到请求
3:处理请求
4:请求完成并且响应准备就绪
responseText以字符串形式返回响应数据
responseXML将响应数据作为XML数据返回
status返回请求的状态号:
200:“OK”
403:“Forbidden”
404:“Not Found”
有关完整列表,请访问HTTP状态代码参考
statusText返回状态文本(例如,“OK”或“Not Found”)

XMLHttpRequest对象方法

下表列出了XMLHttpRequest对象的所有方法:

方法描述
new XMLHttpRequest()创建一个新的XMLHttpRequest对象
abort()取消当前请求
getAllResponseHeaders()返回标题信息
getResponseHeader()返回特定的标头信息
open(method, url, async)指定请求
method:请求类型GETPOST
url:文件位置
async:true(异步)或false(同步)
send()将请求发送到
用于GET请求的服务器
send(string)将请求发送到服务器。
用于POST请求
setRequestHeader(header, value)将HTTP标头设置为请求
header:指定标头名称
value:指定标头值