使用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