Ajax：Asynchronous Javascript and XML， 異步的Javascript和XML技術。是指一種創建交互式網頁應用的網頁開發技術。它不是一種單一的技術，而是有機地利用一系列的相關技術的組合，即：Javascript + XMLHttpRequest + CSS + 服務器端 的集合。
Ajax的優點：
1.Ajax在本質上是一個瀏覽器端的技術
2.Ajax技術之主要目的在於局部交換客戶端及服務器間之數據
3.這個技術的主角XMLHttpRequest的最主要特點，在於能夠不用重新載入整個版面來更新資料，也就是所謂的Refreshwithout Reload(輕刷新)
4.與服務器之間的溝通，完全是透過Javascript來實行
5.使用XMLHttpRequest本身傳送的數據量很小，所以反應會更快，也就讓網絡程式更像一個桌面應用程序
6.AJAX就是運用Javascript在後臺悄悄幫你去跟服務器要資料，最後再由Javascript或DOM來幫你呈現結果，因爲所有動作都是由Javascript代勞，所以省去了網頁重載的麻煩， 使用者也感受不到等待的痛苦
異步請求基本步驟：使用XMLHttpRequest對象
按照下面模式，可以同步地XMLHttpRequest對象：
1.創建對象；-new (叫助手過來)
2.創建請求；-open (告訴他要去做的事情)
3.發送請求；-send (去吧)
下面是一個jsHelper類，條用Ajax方法
具體代碼（獲得服務器時間）
<script type="text/javascript">
window.onload = function () {
document.getElementById("btnGetTime").onclick = function () {
//向服務器請求 時間
//1.創建異步對象（小瀏覽器）
var xhr = new XMLHttpRequest();
//2.設置參數
xhr.open("get", "GetTime.ashx?name=jameszou", true);
//3.讓get請求不從瀏覽器獲取緩存數據
xhr.setRequestHeader("If-Modified-Since","0");
//3.設置回調函數
xhr.onreadystatechange = function () {
//3.1當完全接收完響應報文後 並且 響應狀態碼爲200的時候
if (xhr.readyState == 4 && xhr.status == 200)
{
//3.2獲取相應報文體內容
var res = xhr.responseText;
alert(res);
}
};
//4.發送異步請求
xhr.send(null);
};
document.getElementById("btnPostTime").onclick = function () {
//向服務器請求 時間
//1.創建異步對象（小瀏覽器）
var xhr = new XMLHttpRequest();
//2.設置參數
xhr.open("post", "GetTime.ashx", true);
//3.設置 請求 報文體 的 編碼格式（設置爲 表單默認編碼格式）
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.設置回調函數
xhr.onreadystatechange = function () {
//3.1當完全接收完響應報文後 並且 響應狀態碼爲200的時候
if (xhr.readyState == 4 && xhr.status == 200) {
//3.2獲取相應報文體內容
var res = xhr.responseText;
alert(res);
}
};
//5.發送異步請求"name=jameszou"
//5.1格式：直接拼接字符串 key=value&key1=value2
xhr.send("name=jameszou&age=29");
};
};
</script>
<body>
<input type="button" id="btnGetTime" value="get獲取服務器時間" />
<input type="button" id="btnPostTime" value="post獲取服務器時間" />
</body>
public class GetTime : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//接收瀏覽器 ajax 方式發送來的 get 參數
string strName = context.Request.Params["name"];
//休息
System.Threading.Thread.Sleep(1000);
//輸出響應報文
context.Response.Write(DateTime.Now.ToString() + ",name=" + strName);
}
public bool IsReusable
{
get
{
return false;
}
}
}下面是一個jsHelper類，條用Ajax方法
var jsHelper = {
/*1.0 瀏覽器兼容的方式創建異步對象*/
makeXHR: function () {
//聲明異步對象變量
var xmlHttp = false;
//聲明 擴展 名
var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"];
//判斷瀏覽器是否支持 XMLHttpRequest，如果支持，則是新式瀏覽器，可以直接創建
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//否則，只能循環 遍歷 老式瀏覽器 異步對象名，一一嘗試創建，直到創建成功爲止
else if (window.ActiveXObject) {
for (i = 0; i < xmlHttpObj.length; i++) {
xmlHttp = new ActiveXObject(xmlHttpObj[i]);
if (xmlHttp) {
break;
}
}
}
//判斷 異步對象 是否創建 成功，如果 成功，則返回異步對象，否則返回false
return xmlHttp ? xmlHttp : false;
},
/*2.0 發送Ajax請求*/
doAjax: function (method, url, data, isAyn, callback,errCallback) {
method = method.toLowerCase();
//2.1創建異步對象
var xhr = this.makeXHR();
//2.2設置請求參數（如果是get，則帶url參數，如果不是，則不帶）
xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn);
//2.3根據請求謂詞(get/post)，添加不同的請求頭
if (method == "get") {
xhr.setRequestHeader("If-Modified-Since", 0);
} else {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
//2.4設置回調函數
xhr.onreadystatechange = function () {
//如果接受完畢 服務器發回的 響應報文
if (xhr.readyState == 4) {
//判斷狀態碼是否正常
if (xhr.status == 200) {
//正常，則調用回調函數
callback(xhr);//當 異步對象調用 回調函數時，爲回調函數 傳入 xhr 對象
}
//如果不正常，則嘗試調用 異常回調函數
else {
//如果 異常回調函數 存在，則調用，並傳入 狀態碼
if (errCallback) {
errCallback(xhr.status);
}
//否則，直接提示 錯誤~！
else {
alert("錯誤啦~~狀態碼:" + xhr.status);
}
}
}
};
//2.5發送（如果是post，則傳參數，否則不傳）
xhr.send(method != "get" ? data : null);
},
/*3.0 直接發送Post請求*/
doPost: function (url, data, isAyn, callback, errCallback) {
this.doAjax("post", url, data, isAyn, callback);
},
/*4.0 直接發送Get請求*/
doGet: function (url, data, isAyn, callback, errCallback) {
this.doAjax("get", url, data, isAyn, callback);
}
};
