使用Ajax 可以做到只更新页面中的一小部分,不必再次加载整个页面了。其他内容一一标志、导航、头部、脚部,都不用重新加载。
Ajax 的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求,它会在后台处理请求,与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容,而不会打断用户的浏览体验。利用Ajax , 可使Web 应用功能丰富、交互敏捷,Ajax 有它自己的适用范围。Ajax依赖JavaScript,所以可能会有浏览器不支持它,而搜索引擎的蜘蛛程序也不会抓取到有关内容。
XMLHttpRequest 对象
Ajax 技术的核心就是XMLHttpRequest 对象。这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。
微软最早在IE5 中以ActiveX 对象的形式实现了一个名叫XMLHTTP 的对象。在IE 中创建新的对象要使用下列代码:
var request = new ActiveXOb ject(“Msxml2 .XMLHTTP.3.0”);
其他浏览器则基于XMLHttpRequest 来创建新对象:
var request = new XMLHttpRequest();
更麻烦的是,不同IE 版本中使用的XMLHTIP 对象也不完全相同。
在你的脚本中要使用XMLHttpRequest 对象时,可以将这个新对象直接赋值给一个变量:
var request = getHTTPObject()j
XMLHttpRequest 对象有许多的方法。其中最有用的是open 方法,它用来指定服务器上将要访
问的文件,指定请求类型:GET、POST 或SEND。这个方法的第三个参数用于指定请求是否以异步
方式发送和处理。
注意在为onreadystatechange 指定函数引用时,不要在函数名后面加括号。因为加括号表示立即调用函数,而我们在此只想把函数自身的引用(而不是函数结果)赋值给onreactystate-change 属性。
request.onreadystatechange = doSomething;
在指定了请求的目标,也明确了如何处理响应之后,就可以用send 方法来发送请求了:
request.send(null);
在使用Ajax 时,千万妥注意同源策略。使用XMLHttpRequest 对象发送的请求只能访问与其所在的HTML 处于同一个域中的数据,不能向其他域发送请求。
服务器在向XMLHttpRequest 对象发回响应时,该对象有许多属性可用,浏览器会在不同阶段更新readyState 属性的值,它有5 个可能的值:
口0 表示未初始化
口1 表示正在加载
口2 表示加载完毕
口3 表示正在交互
口4 表示完成
只要readyState 属性的值变成了4 ,就可以访问服务器发送回来的数据了。
访问服务器发送回来的数据要通过两个属性完成。
- 一个是responseText 属性,这个属性用于保存文本字符串形式的数据。
- 另一个属性是responseXML 属性,用于保存Content-Type 头部中指定为”text/xml”的数据,其实是一个DocumentFragment 对象。你可使用各种DOM 方法来处理这个对象。而这也正是XMLHttpRequest 这个名称里有XML 的原因。
aiax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax</title>
</head>
<body>
<div id="new"></div>
<script src="main.js"></script>
</body>
</html>
main.js
function addLoadEvent (func) {
var oldonload = window.onload
if (typeof window.onload !== 'function') {
window.onload = func
} else {
window.onload = function () {
oldonload()
func()
}
}
}
function getHTTPObject () {
if (typeof XMLHttpRequest === 'undefined') {
XMLHttpRequest = function () {
try { return new ActiveXObject('Msxml2.XMLHTTP.6.0') } catch (e) {}
try { return new ActiveXObject('Msxml2.XMLHTTP.3.0') } catch (e) {}
try { return new ActiveXObject('Msxml2.XMLHTTP') } catch (e) {}
return false
}
}
return new XMLHttpRequest()
}
function getNewContent () {
var request = getHTTPObject()
if (request) {
request.open('GET', 'example.txt', true)
request.onreadystatechange = function () {
if (request.readyState === 4) {
var para = document.createElement('p')
var txt = document.createTextNode(request.responseText)
para.appendChild(txt)
document.getElementById('new').appendChild(para)
}
}
request.send(null)
} else {
alert("Sorry,your browser doesn\'t support XMLHttpRequest")
}
}
addLoadEvent(getHTTPObject)
addLoadEvent(getNewContent)
最后在同一目录文件下创建example.txt