ajax的工作原理是什麼（附圖解）

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

    Ajax指Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML），最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。而實現的原理基礎就是：網頁DOM物件可以精確地對網頁中的部分內容進行操作、XML作為單純的資料儲存載體使得客戶端與伺服器交換的只是網頁內容的資料而沒有網頁樣式等等的附屬訊息、XMLHttpRequest是與瀏覽器本身內建的request相互獨立的與伺服器互動的請求物件。

    網頁應用Ajax與伺服器互動的抽象流程如下圖：

    流程詳細資料：

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

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

    2：在網頁中為某些事件的響應綁定非同步操作：透過上面創建的xmlhttp對象傳輸請求、攜帶資料。在發出請求前要先定義請求對象的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物件發回去。客戶端根據xmlhttp物件來取得response內容，然後呼叫DOM物件根據response內容來局部修改網頁內容。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功
    {
    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的工作原理是什麼（附圖解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！