Ajax 的核心是 XMLHttpRequest 对象。
XMLHttpRequest 对象
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分,而不需要重新加载整个页面。
创建 XMLHttpRequest 对象
所有现代浏览器(Chrom、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是:
variable = new XMLHttpRequest();
老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:
variable = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,创建 XMLHttpRequest 对象,如果不支持,则创建 ActiveX 对象:
实例
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
亲自试一试
跨域访问
出于安全原因,现代浏览器不允许跨域访问。
这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
W3School 上的实例都会打开位于 W3School 域上的 XML 文件。
如果您希望在自己的页面上使用以上实例,那么您所加载的 XML 文件必须位于您自己的服务器上。
老版本的 Internet Explorer(IE5 和 IE6)
老版本的 Internet Explorer(IE5 和 IE6)不支持 XMLHttpRequest 对象。
为了对付 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象,亦或创建 ActiveXObject 对象:
实例
if (window.XMLHttpRequest) {
// 用于现代浏览器的代码
xmlhttp = new XMLHttpRequest();
} else {
// 应对老版本 IE 浏览器的代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
亲自试一试
XMLHttpRequest 对象方法
方法 描述
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw)
规定请求
method:请求类型 GET 或 POST
url:文件位置
async:true(异步)或 false(同步)
user:可选的用户名称
psw:可选的密码
send() 将请求发送到服务器,用于 GET 请求
send(string) 将请求发送到服务器,用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对
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")
AJAX 简介
AJAX 请求
JavaScript 和 HTML DOM 参考手册
JavaScript 实例
JavaScript 测验
JavaScript 高级教程
W3School 简体中文版提供的内容仅用于培训和测试,不保证内容 |