AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
AJAX = 異步 JavaScript 和 XML。
通過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新内容，必需重載整個網頁面。
AJAX isnot a programming language.
It is justa technique for creating better and more interactive web applications.
XMLHttpRequest 是 AJAX 的基礎。
所有現代浏覽器均支援 XMLHttpRequest 對象（IE5和IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在背景與伺服器交換資料。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。當你的頁面全部加載完畢後，用戶端會通過 XMLHttpRequest對象向伺服器請求資料，伺服器端接受資料并處理後，向用戶端回報資料。
建立XMLHttpRequest 對象
所有現代浏覽器（IE7+、Firefox、Chrome、Safari以及Opera）均内建 XMLHttpRequest 對象。
variable=newXMLHttpRequest();
XMLHttpRequest 對象用于和伺服器交換資料。
如需将請求發送到伺服器，我們使用 XMLHttpRequest 對象的open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
Google Suggest
在 2005 年，Google 通過其Google Suggest 使 AJAX 變得流行起來。
GoogleSuggest 使用 AJAX 創造出動态性極強的 web 界面：當您在谷歌的搜尋框輸入關鍵字時，JavaScript 會把這些字元發送到伺服器，然後伺服器會傳回一個搜尋建議的清單。
AJAX的工作原理相當于在使用者和伺服器之間加了—個中間層(AJAX引擎)，使使用者操作與伺服器響應異步化。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<script>
functionloadXMLDoc()
{
varxmlhttp;
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp=new XMLHttpRequest(); //建立XMLHttpRequest對象
}
else
{// code for IE6, IE5老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
//由于 HTTP 響應是由服務端發出的，并且伺服器做出響應需要時間（比如網速慢等原因），是以我們需要監聽伺服器響應的狀态，然後才能進行處理。當發送一個請求後，用戶端需要确定這個請求什麼時候會完成，是以，XMLHttpRequest對象提供了 onreadystatechange
//事件機制來捕獲請求的狀态，繼而實作響應。
xmlhttp.onreadystatechange=function()
{
//對于 responseText 屬性，隻有當 readyState 屬性值變為4時，responseText 屬性才可用，因為這表明AJAX請求已經結束！
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
//如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//如需将請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文本内容</h2></div>
<button type="button"onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
Ajax與PHP
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<script>
functionshowHint(str)
{
varxmlhttp;
//如果輸入框為空 (str.length==0)，則該函數清空 txtHint 占位符的内容，并退出函數。
//如果輸入框不為空，showHint() 函數執行以下任務：
建立 XMLHttpRequest 對象
當伺服器響應就緒時執行函數
把請求發送到伺服器上的檔案
請注意我們向 URL 添加了一個參數 q （帶有輸入框的内容）
if(str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//由上面的 JavaScript 調用的伺服器頁面是 PHP 檔案，名為"gethint.php"。
xmlhttp.open("GET","/statics/demosource/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Starttyping a name in the input field below:</h3>
<formaction="">
//當使用者在上面的輸入框中鍵入字元時，會執行函數 "showHint()" 。該函數由 "onkeyup" 事件觸發：
First name:<input type="text" id="txt1"onkeyup="showHint(this.value)" />
</form>
<p>Suggestions:<span id="txtHint"></span></p>
</body>
</html>
ajax送出表單分為兩種：
1、無傳回結果的，就是把表單資料直接送出給背景，讓背景直接處理；
最簡單的就是$(“#formid”).submit();直接将form表單送出到背景。
2、傳回有結果的，這種情況下，背景不管是執行成功還是失敗，最終的資訊都需要傳回到前台。
第二種是使用最多的一種，因為程式的執行成功與否都需要給使用者提示，程式一般也都是多步完成的，執行完插入操作，需要發起流程，這就需要在界面上判斷成功與否。ajax本身屬于有傳回結果的一類，其中的success方法就是處理背景傳回結果的。
ajax送出表單有傳回結果的有兩種實作方式：
1、将form表單資料序列化
<span style="font-size:18px;"> $.ajax({
type: "POST",
url:your-url,
data:$('#yourformid').serialize(),
async: false,
error: function(request) {
alert("Connectionerror");
},
success: function(data) {
//接收背景傳回的結果
}
});</span>
需要注意的是，使用這種方法的前提是form表單中的項一定要有name屬性，背景擷取的鍵值對為key=name值，value=各項值。
注意：無論是input标簽還是span标簽或者其他标簽，一定要有name屬性，沒有name屬性背景是擷取不到該項的。
2、通過視窗查找form送出
<span style="font-size:18px;"> // 送出表單
var obj =document.getElementById("xx_iframe").contentWindow;
obj.$("#yourform").form("submit",{
success :function(data){
//對結果處理
}
});</span>
因為在目前界面上彈出對話框，然後在對話框上的按鈕觸發對話框中表單送出，對話框又是連結的另外的html頁面，如此通過$(“#formid”)的方式是找不到對話框中的form的，是以這種情況下隻能使用這種方式送出表單。
另外ajax中封裝的get,post請求也都屬于有傳回結果的一類。
總的來說，無傳回結果的和有傳回結果的(将form表單資料序列化+通過視窗實作form送出)，form表單都必須要有name屬性。
在jQuery中，Ajax常見的請求方式主要有一下4種：
1、$.ajax()傳回其建立的 XMLHttpRequest 對象。
$.ajax() 隻有一個參數：參數 key/value 對象，包含各配置及回調函數資訊。
如果你指定了dataType選項，那麼需要保證伺服器傳回正确的MIME資訊，(如 xml 傳回 "text/xml")。
執行個體：
儲存資料到伺服器，成功時顯示資訊。
$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount:data.split("$")[1], buttonClickCallback: PageClick});
$("#anhtml").html(data.split("$")[0]);
}
}
});
2.通過遠端 HTTP GET 請求載入資訊。
相比于複雜的$.ajax而言，GET請求功能則顯得更加簡單，請求成功時可調用回調函數。當然如果需要在出錯時執行函數，那麼還請使用$.ajax。
執行個體：
$.get("test.cgi", { name: "John", time:"2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通過遠端 HTTP POST 請求載入資訊。
POST請求功能也相對比較簡單，請求成功時可調用回調函數。如果需要在出錯時執行函數，那麼請使用 $.ajax請求。
執行個體：
$.post("/Resources/addfriend.ashx", { "fid":fids, "fname": fnames, "tuid": tuids, "tuname":tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})
4.通過 HTTP GET 請求載入 JSON 資料。
執行個體：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items,function(i,item){
$("<img/>").attr("src",item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});