1、什么是 Ajax?
Ajax，英文名 Asynchronous JavaScript and XML，也就是異步的 JavaScript 和 XML。它不是一門新的語言，而是一種使用現有標准的新方法，可以在不重新加載整個頁面的情況下，與服務器交換數據並更新部分網頁內容，而且不需要任何瀏覽器插件，只需要用戶允許 JavaScript 在瀏覽器上執行。
2、Ajax 的工作原理
由上圖我們可以看到，瀏覽器首先 創建一個 XMLHttpRequest 對象，然后將這個對象發送給服務器；服務器響應並封裝一些數據回傳給瀏覽器；瀏覽器接收到服務器的響應數據，根據數據做出相應的操作，比如更新頁面內容等操作。
3、如何使用 Ajax?
①、創建 XMLHttpRequest 對象
②、編寫狀態響應函數
③、調用 open() 方法
④、發送請求 send()
下面我們通過一個簡單的例子來模擬 通過 Ajax 來更新頁面上的內容
第一步：首先新建一個 AjaxTest.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/AjaxTest.js"></script>//這里引用了 AjaxTest.js 文件
</head>
<body>
<div style="border:1px solid red;width:200px;height:200px;" id="mydiv"></div>
<input type="button" onclick="Ajax()" value="發送Ajax 請求改變內容" /> //定義點擊事件 Ajax()
</body>
</html>
頁面顯示效果如下：
第二步：新建一個 formInfo.json 文件，里面存放將要更新的內容
{
"name":"ys",
"age":24
}
第三步：新建一個 AjaxTest.js 文件，編寫 Ajax 代碼
function Ajax(){
var xhr = null;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xhr=new XMLHttpRequest();
}else{
// IE6, IE5 瀏覽器執行代碼
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if (xhr.readyState==0 && xhr.status==200)
{
alert("請求未初始化");
}
if (xhr.readyState==1 && xhr.status==200)
{
alert("服務器連接已建立");
}
if (xhr.readyState==2 && xhr.status==200)
{
alert("請求已接收");
}
if (xhr.readyState==3 && xhr.status==200)
{
alert("請求處理中");
}
if (xhr.readyState==4 && xhr.status==200)
{
alert("請求已完成，且響應已就緒");
document.getElementById("mydiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","../json/fromInfo.json",true);
xhr.send();
}
當我們點擊按鈕，界面會更新為：
4、對 Ajax 各個步驟的解析
①、創建 XMLHttpRequest 對象
通常來說，所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。所以創建 XMLHttpRequest 對象可以直接這樣
var xhr=new XMLHttpRequest();
但是老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象，並不支持 XMLHttpRequest 對象。所以我們這樣創建：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
那么綜合起來，創建 XMLHttpRequest 對象的方法為：
var xhr = null;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xhr=new XMLHttpRequest();
}else{
// IE6, IE5 瀏覽器執行代碼
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
該對象的屬性為：
上面的例子我們可以看到 XMLHttpRequest 對象為：
②、編寫狀態響應函數
狀態響應函數也就是 onreadystatechange 事件
常見的 status 響應狀態碼：
③、調用 open() 方法
open(string method,string url,boolean asynch,String username,string password)
指定和服務器端交互的HTTP方法，URL地址，即其他請求信息；
method:表示http請求方法，一般使用"GET","POST".
url：表示請求的服務器的地址；
asynch：表示是否采用異步方法，true為異步，false為同步；
后邊兩個可以不指定，username和password分別表示用戶名和密碼，提供http認證機制需要的用戶名和密碼。
④、發送請求 send()
send(content)
向服務器發出請求，如果采用異步方式，該方法會立即返回。content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串。
實際開發中，有很多開源的庫已經給我們封裝好了，我們直接用就行了。
1、jQuery 的 Ajax 請求：
$.ajax({
type : "post", //請求方式
url : "../json/fromInfo.json", //請求路徑
data : "", //傳輸到服務器的數據
cache : false, //是否有緩存
async : false, //同步和異步，false 表示同步，默認為true
dataType : "json", //預期的服務器響應數據類型
beforeSend:function(xhr){
alert(xhr);
alert('發送前');
},
success:function(data,textStatus,jqXHR){
alert(data); //json 文件中的數據，是一個 object 對象
alert(textStatus); //值為 success，表示成功狀態碼
alert(jqXHR); //這第三個參數封裝響應的一些信息
document.getElementById("mydiv").innerHTML=jqXHR.responseText;
},
error:function(xhr,textStatus){
alert('錯誤');
alert(xhr);
alert(textStatus);
},
complete:function(){
alert('結束');
}
});
對上面相應參數的解析：
2、jQuery 的 get 請求
$.get(url,data,success(response,status,xhr),dataType)
說明：url為請求地址，data為請求數據的列表，callback為請求成功后的回調函數，dataType 為服務器返回數據類型。第四個參數 dataType，如果不寫，默認返回字符串
$.get(
"../json/fromInfo.json",
"",
function(response,status,xhr){
alert(xhr.responseText);
},
"json"
);
3、jQuery 的 post 請求
$.post(url,data,success(response,status,xhr),dataType)
參數和 get 請求一樣