本篇文章主要和大家講述ajax的工作原理，具有一定參考價值，感興趣的朋友可以了解一下，希望對你有所幫助。

Ajax指Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務器交換數據并更新部分網頁內容。而實現的原理基礎就是：網頁DOM對象可以精確地對網頁中的部分內容進行操作、XML作為單純的數據存儲載體使得客戶端與服務器交換的只是網頁內容的數據而沒有網頁樣式等等的附屬信息、XMLHttpRequest是與瀏覽器本身內置的request相互獨立的與服務器交互的請求對象。

網頁應用Ajax與服務器交互的抽象過程如下圖：

過程詳解：

1： 要使用Ajax技術，基礎中的基礎，就是要創(chuàng)建一個XMLHttpRequest對象，無它就沒有異步傳輸的可能：

var xmlhttp;
if (window.XMLHttpRequest) { //檢查瀏覽器的XMLHttpRequest屬性，如果為真則支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

登錄后復制

2：在網頁中為某些事件的響應綁定異步操作：通過上面創(chuàng)建的xmlhttp對象傳輸請求、攜帶數據。在發(fā)出請求前要先定義請求對象的method、要提交給服務器中哪個文件進行請求的處理、要攜帶哪些數據、是否異步。

其中，與普通的request提交數據一樣，這里也分兩種方法：GET/POST

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
 xmlhttp.send();

登錄后復制

xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

登錄后復制

3：服務器收到請求后，把附帶的數據作為輸入傳給處理請求的文件，例如這里：把fname=Henry&lname=Ford作為輸入，傳給 /try/ajax/demo_get2.php 這個文件。然后文件根據傳入的數據做出處理，最終返回結果，通過response對象發(fā)回去。客戶端根據xmlhttp對象來獲取response內容，然后調用DOM對象根據response內容來局部修改網頁內容。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//請求處理完畢且狀態(tài)為成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response內容來修改DOM中的元素的內容
    }

登錄后復制

其中，response的類型有兩種：字符串類型和XML文本。兩種回應的不同提取如下：

responseText 屬性返回字符串形式的響應：

document.getElementById("myp").innerHTML=xmlhttp.responseText;

登錄后復制

如果來自服務器的響應是 XML，需要作為 XML 對象進行解析，使用 responseXML ：

xmlDoc=xmlhttp.responseXML; //獲取服務器響應的XML文本并轉換得到XMLDOM對象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通過XMLDOM對象調用方法來獲取XML對象中的內容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把獲取到的內容通過document對象更新到網頁內容去容去

登錄后復制

相關教程：ajax視頻教程　　　

以上就是ajax的工作原理是什么（附圖解）的詳細內容，更多請關注風君子博客其它相關文章！

總結

以上是生活随笔為你收集整理的ajax的工作原理是什么（附图解）(图解详细流程)的全部內容，希望文章能夠幫你解決所遇到的問題。

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