面試時問到了這個問題，說實話我還是不理解的，只是單單會使用。所以今天我看一下，自己瞭解下。

看了網上前輩們寫的資料，我自己總結歸納ajax的原理和流程如下：

1、AJAX建立非同步物件XMLHttpRequest

這個是ajax核心的物件，當然不是所有瀏覽器建立這個物件的方法是一致的。我們開發過程中一般建議使用chrome瀏覽器，在chrome中，XMLHttpRequest物件的建立方法直接

var xmlHttp=new XMLHttpRequest();即可。但是IE是特例，我們需要這樣var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");（這裡忽略低版本IE了，我相信再低不可能使用IE6以下吧），要在一個方法內完成物件建立需要try、catch（JS也是可以的）

2、操作XMLHttpRequest 物件

物件建立完成後當然是使用了。

（1）設定請求引數（請求方式，請求頁面的相對路徑，是否非同步）

（2）設定回撥函式，一個處理伺服器響應的函式，使用 onreadystatechange ，類似函式指標

（3）獲取非同步物件的readyState 屬性：該屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函式就會被執行。

（4）判斷響應報文的狀態，若為200說明伺服器正常執行並返回響應資料，

（5）讀取響應資料，可以通過 responseText 屬性來取回由伺服器返回的資料。

感覺好難記，一時間還是很難消化的。我們還是直接來看ajax怎麼寫吧

現在ajax我會的就兩種，一種就是原生的ajax，另一種就是jquery中提供的ajax，後者比前者更簡單。

第一種：

原生ajax，請求方式因為分為post和get等，為了統一，可以當引數傳入，不必分開處理，然後我們可以封裝這樣的一個方法，使用時直接呼叫

 1 function ajax_method(url,data,method,success) {
 2     // 建立非同步物件
 3     var ajax = new XMLHttpRequest();
 4 
 5     // get 跟post  需要分別寫不同的程式碼
 6     if (method=='get') {
 
 7         // get請求
 8         if (data) {
 9             // 如果有值
10             url+='?';
11             url+=data;
12         }else{
13 
14         }
15         // 設定 方法 以及 url
16         ajax.open(method,url);
17 
18         // send即可
19         ajax.send();
20     }else{
21         // post請求
22         // post請求 url 是不需要改變
23         ajax.open(method,url);
24 
25         // 需要設定請求報文
26         ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
27 
28         // 判斷data send傳送資料
29         if (data) {
30             // 如果有值 從send傳送
31             ajax.send(data);
32         }else{
33             // 木有值 直接傳送即可
34             ajax.send();
35         }
36     }
37 
38     // 註冊事件
39     ajax.onreadystatechange = function () {
40         // 在事件中 獲取資料 並修改介面顯示
41         if (ajax.readyState==4&&ajax.status==200) {
42             // console.log(ajax.responseText);
43 
44             // 將 資料 讓 外面可以使用
45             // return ajax.responseText;
46 
47             // 當 onreadystatechange 呼叫時 說明 資料回來了
48             // ajax.responseText;
49 
50             // 如果說 外面可以傳入一個 function 作為引數 success
51             success(ajax.responseText);
52         }
53     }
54 
55 }

第二種：

其實jquery中使用ajax也是有多種方式的，先看看不帶引數的：

 1 $(document).ready(function(){  
 2     $("button").click(function(){  
 3         $.ajax({url:"http://localhost:8080/lsd/getChildrenList.action",  
 4             success:function(result){  
 5         　　//處理返回資料12         }});  
13     });  
14 });  

其中第一個引數是請求的url，第二個引數是回撥用函式，json資料封裝在result，需要對result的json資料進行解析

如果想加入引數，則在url和回撥函式之間加入引數即可。

另外，jquery中提供post型別的ajax方法從伺服器載入資料

1 $('#send').click(function(){
2     $.post('jqRequest.jsp',{
3         num: $('#num').val()
4     },function(data){
5         $('#result').html('您選擇的數字' + $('#num').val() + '是' + data)
6     })
7 })

寫法上我覺得就是三種$.ajax()和$.post()和$.get()，至於引數不引數，按實際需要來就行

三者做個比較：

$.get $.post是簡單易用的高層實現，我們使用$.get $.post方法，jQuery會自動封裝呼叫底層的$.ajax。
$.get 只處理簡單的 GET 請求功能以取代複雜 $.ajax，請求成功時可呼叫回撥函式。不支援出錯時執行函式，否則必須使用$.ajax。
$.post 只處理 post請求功能以取代複雜 $.ajax 。請求成功時可呼叫回撥函式。不支援出錯時執行函式，否則必須使用$.ajax。
$.get("test.php", { name: "John", time: "2pm" } ) $.get方法在請求時會自動生成queryString提交給伺服器(name=John&time=2pm)，
$.post方法提交的資料直接類似表單提交，提交的資料量比$.get更大。

這裡插一句：post和get提交的區別，面試也問了，回答的不是很全面。

1.post提交的資料量幾乎沒有限制，get提交有內容大小限制

2.get提交把引數加在url中，post提交不會

3.由於get提交把引數放入了url，所以大家都可以看到是比較不安全的，post比較安全