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

看了網上前輩們寫的資料，我自己總結歸納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比較安全

轉載于:https://www.cnblogs.com/timePasser-leoli/p/8556949.html

總結

以上是生活随笔為你收集整理的AJAX异步原理与实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。