Ajax(Asynchronous JavaScript and XML)，其核心是通過XMLHttpRequest物件，以一種非同步的方式，向伺服器傳送資料請求，並通過該物件接收請求返回的資料，從而完成人機互動的資料操作。Ajax技術並不侷限於Web動態頁面，在普通的靜態HTML頁面中同樣可以實現！

1. 傳統的JavaScript方法實現Ajax功能

    var objXmlHttp = null; //宣告一個空的XMLHTTP變數
    function CreateXMLHTTP() {
        //根據瀏覽器的不同，返回該變數的實體物件
        if (window.ActiveXObject) {
            objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            if (window.XMLHttpRequest) {
                objXmlHttp = new XMLHttpRequest();
            }
            else {
                alert("初始化XMLHTTP錯誤！");
            }
        }
    }
    function GetSendData() {
        document.getElementById("divTip").innerHTML = "<img alt='' title='正在載入中...' src='Images/Loading.gif' />"; //初始化內容
        var strSendUrl = "b.html?date="+Date(); //設定傳送地址變數並賦初始值
        CreateXMLHTTP(); //例項化XMLHttpRequest物件
        objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest
        objXmlHttp.onreadystatechange = function() { //回撥事件函式
            if (objXmlHttp.readyState == 4) { //如果請求完成載入
                if (objXmlHttp.status == 200) { //如果響應已成功
                    //顯示獲取的資料
                    document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                }
            }
        }
        objXmlHttp.send(null); //send傳送設定的請求 
    }
 

2. load(url,[data],[callback])方法實現Ajax功能
    load()方法可以很快地載入資料到頁面中，但如需對獲取的資料進行處理，必須在先插入頁面中，然後才能進行，執行效率較低。
    例：$("#divTip").load("b.html"); //load()方法載入資料
3. getJSON(url,[data],[callback])函式獲取資料
    採用將要獲取的資料集另存為一種輕量級的資料交換格式，即JSON檔案格式

<span style="white-space:pre"></span>$.getJSON("UserInfo.json", function(data) {
    $("#divTip").empty(); //先清空標記中的內容
    var strHTML = ""; //初始化儲存內容變數
    $.each(data, function(InfoIndex, Info) { //遍歷獲取的資料
        strHTML += "姓名：" + Info["name"] + "<br>";
        strHTML += "性別：" + Info["sex"] + "<br>";
        strHTML += "郵箱：" + Info["email"] + "<hr>";
    })
    $("#divTip").html(strHTML); //顯示處理後的資料
})
 

4. getScript(url,[data],[callback])函式獲取JS檔案內容

    <script type="text/javascript" src="js/*.js"><scirpt>  //傳統方式
    $("<script type="text/javascript" src="js/*.js" />").appendTo("head");  //傳統方式
    例：$.getScript("UserInfo.js");//開啟已獲取返回資料的檔案

5. get(url,[data],[callback],[type])實現非同步獲取xml文件資料

    [type]：表示返回資料的格式，如HTML、XML、JS、JSON、TEXT等

$.get("UserInfo.xml", function(data) {
    $("#divTip").empty(); //先清空標記中的內容
    var strHTML = ""; //初始化儲存內容變數
    $(data).find("User").each(function() { //遍歷獲取的資料
        var $strUser = $(this);
        strHTML += "姓名：" + $strUser.find("name").text() + "<br>";
        strHTML += "性別：" + $strUser.find("sex").text() + "<br>";
        strHTML += "郵箱：" + $strUser.find("email").text() + "<hr>";
    })
    $("#divTip").html(strHTML); //顯示處理後的資料
})

6. $.get傳送請求

$.get("UserInfo.aspx",{ name: encodeURI($("#txtName").val()) },function(data) {
    $("#divTip").empty() //先清空標記中的內容
    <span style="white-space:pre">		</span>.html(data); //顯示伺服器返回的資料
})

7. $.post傳送請求

$.post("User_Info.aspx",{ name: encodeURI($("#txtName").val()),
     <span style="white-space:pre">			</span>  sex: encodeURI($("#selSex").val()) },function(data) {
    $("#divTip").empty() //先清空標記中的內容
   <span style="white-space:pre">		</span>.html(data); //顯示伺服器返回的資料
})

8. GET方式不適合傳遞資料量較大的資料
    GET方式請求的歷史資訊會在瀏覽器的快取中，有一定的安全風險
9. serialize()序列化表單，簡化引數傳值的方式
    將所有選擇的DOM元素轉換成能隨Ajax傳遞的字串，即序列化所選擇的DOM元素！
    例：$("#frmUserInfo").serialize(), //序列化表單資料
    不足：如表單中有多選項被選中時，該方法只能傳遞一項的值
10. $.ajax([options])方法傳送請求，$.ajax() 是最低層方法，功能最強大

$(function() {
<span style="white-space:pre">	</span>$.ajax({ //請求登入頁
	    url: "login.html", //登入靜態頁
	    dataType: "html",
	    success: function(HTML) { //返回頁面內容
	        $("#frmUserLogin").html(HTML); //將頁面內容置入表單
	        $("#btnLogin").click(function() { //“登入”按鈕單擊事件
	            //獲取使用者名稱稱
	            var strTxtName = encodeURI($("#txtName").val());
	            //獲取輸入密碼
	            var strTxtPass = encodeURI($("#txtPass").val());
	            //開始傳送資料
	            $.ajax({ //請求登入處理頁
	                url: "login.aspx", //登入處理頁
	                dataType: "html",
	                //傳送請求資料
	                data: { txtName: strTxtName, txtPass: strTxtPass },
	                success: function(strValue) { //登入成功後返回的資料
	                    //根據返回值進行狀態顯示
	                    if (strValue == "True") {
	                        $(".clsShow").html("操作提示，登入成功！");
	                    }
	                    else {
	                        $("#divError").show().html("使用者名稱或密碼錯誤！");
	                    }
	                }
	            })
	        })
	    }
	})
})   

11. $.ajaxSetup([options])方法全域性設定Ajax，一次設定，全域性有效    

$.ajaxSetup({ //設定全域性性的Ajax選項
    type: "GET",
    url: "UserInfo.xml",
    dataType: "xml"
})
 $("#Button1").click(function() { //"姓名”按鈕的單擊事件
    $.ajax({
        success: function(data) { //傳回請求響應的資料
            ShowData(data, "姓名", "name"); //顯示"姓名"部分
        }
    })
})
$("#Button2").click(function() { //"性別”按鈕的單擊事件
    $.ajax({
        success: function(data) { //傳回請求響應的資料
            ShowData(data, "性別", "sex"); //顯示"性別"部分
        }
    })
})

12. Ajax中的全域性事件
      ajaxStart和ajaxStop這兩個全域性事件的使用頻率非常高。前者是當請求開始執行時觸發，往往用於編寫一些準備性的工作，如提示“正在獲取資料...”字樣；後者是當請求結束時觸發，在這一事件中，常常與前者配合，說明請求的最後進展狀態，如將顯示中的“正在獲取資料...”字樣修改為“成功獲取資料...”字樣，然後漸漸消失。

//元素繫結全域性ajaxStart事件
$("#divMsg").ajaxStart(function() {
    $(this).show(); //顯示元素
})
//元素繫結全域性ajaxStop事件
$("#divMsg").ajaxStop(function() {
    $(this).html("已成功獲取資料。").hide();
})