Ajax的筆記

標籤：ber   click   margin   大量   需要   web應用   編寫   win   動態   

Ajax指非同步JavaScript及XML(Asynchronous JavaScipt And XML),是一種非同步互動式網頁開發技術，用於建立快速動態網頁。與伺服器進行少量資料交換中，Ajax可以使網頁實現非同步更新，這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

97年微軟便發明了ajax的關鍵技術，並且在99年用於IE5中，但可惜因為其它原因沒有被推廣擱置了起來，ajax技術的流行得益於google的大力推廣。Ajax的核心是JavaScript對象XmlHttpRequest,是一種支援非同步請求的技術，它的意義有：1.在不重新載入頁面的情況下更新網頁。2.在頁面已載入後從伺服器請求資料。3.在頁面已載入後從伺服器接收資料。4.在後台向伺服器發送資料。需要注意的是AJAX不是一種新的程式設計語言，而是一種用於建立更好更快以及互動性更強的Web應用程式的技術。

 

1.AJAX的工作原理：

Ajax的工作原理相當於在使用者和伺服器之間加了—個中介層(AJAX引擎),使使用者操作與伺服器響應非同步化。並不是所有的使用者請求都提交給伺服器,像—些資料驗證和資料處理等都交給Ajax引擎自己來做, 只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求。

 

2.Ajax的優點：

1.最大的一點是頁面無重新整理，使用者的體驗非常好。

2.使用非同步方式與伺服器通訊，具有更加迅速的響應能力。

3.可以把以前一些伺服器負擔的工作轉嫁到用戶端，利用用戶端閑置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。

4.基於標準化的並被廣泛支援的技術，不需要下載外掛程式或者小程式。

5.Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的發布系統。

 

3.Ajax的缺點：

1、ajax不支援瀏覽器back按鈕。

2、安全問題 AJAX暴露了與伺服器互動的細節。

3、對搜尋引擎的支援比較弱。

4、破壞了程式的異常機制。

5、不容易調試。

 

4.XmlHttpRequest對象的屬性和方法：

屬性	說明
readyState	存有 XMLHttpRequest 的狀態。從0到4發生變化。 0: 請求未初始化 1: 伺服器串連已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
Onreadystatechange	儲存函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
responseText	伺服器響應的常值內容
responseXML	伺服器響應的XML內容對應的DOM對象
Status	伺服器返回的http狀態代碼。200表示“成功”，404表示“未找到”，500表示“伺服器內部錯誤”等。
statusText	伺服器返回狀態的文本資訊。

 

 

方法	說明
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(content)	向伺服器發出請求，如果採用非同步方式，該方法會立即返回。 content可以指定為null表示不發送資料，其內容可以是DOM對象，輸入資料流或字串。
SetRequestHeader(String header,String Value)	設定HTTP請求中的指定頭部header的值為value. 此方法需在open方法以後調用，一般在post方式中使用。
getAllResponseHeaders()	返回包含Http的所有回應標頭資訊，其中相應頭包括Content-length,date,uri等內容。 傳回值是一個字串，包含所有頭資訊，其中每個鍵名和索引值用冒號分開，每一組鍵之間用CR和LF（斷行符號加分行符號）來分隔！
getResponseHeader(String header)	返回HTTP回應標頭中指定的鍵名header對應的值
Abort()	停止當前http請求。對應的XMLHttpRequest對象會複位到未初始化的狀態。

 

 

上面瞭解了Ajax以及工作原理和XmlHttpRequest對象的屬性和方法，那我們該怎麼樣來使用它呢？這裡我分來五步來實現。

 

第一步：建立XmlHttpRequest對象:

1234567

var xmlhttp = null;//XMLHttpRequest IE6是有相容問題的,可以判斷ie6的 ActiveXObject(‘Microsoft.XMLHTTP‘)if(window.XMLHttpRequest){    xmlhttp =new XMLHttpRequest();//除了IE6以外的瀏覽器}else{    xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器}

 

第二步：指定連結地址：

1	var url=‘demo.php‘。

 

第三步：發送資源請求給伺服器。

使用xmlhttprequest對象的open（）和send（）方法發送資源請求給伺服器。

xmlhttp.open(method,url,async) method包括get和post，url主要是檔案或資源的路徑，async參數為true(代表非同步)或者false（代表同步）

xmlhttp.send();使用get方法發送請求到伺服器。

xmlhttp.send(string);使用post方法發送請求到伺服器。

 

post 發送請求什麼時候能夠使用呢？

(1)更新一個檔案或者資料庫的時候。

(2)發送大量資料到伺服器，因為post請求沒有字元限制。

(3)發送使用者輸入的加密資料。

 

get例子：

1234	xmlhttp.open("GET", "ajax_info.txt", true);xmlhttp.open("GET", "index.html", true);xmlhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();xmlhttp.send(null);//傳遞參數用的,但是只有在使用post方式提交請求的時候才有用

post例子:

12	xmlhttp.open("POST", "demo_post.asp", true);xmlhttp.send();

post表單例子:

123	xmlhttp.open("POST", "ajax_test.aspx", true);xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford");

 

第四步：伺服器響應

使用xmlhttprequest對象的responseText或responseXML屬性獲得伺服器的響應。

responseText：獲得字串形式的響應資料。

responseXML：獲得 XML 形式的響應資料。

 

如果來自伺服器的響應並非 XML，請使用responseText屬性。

responseText 屬性返回字串形式的響應，因此可以這樣使用：

responseText例子：

1	document.getElementById("demo").innerHTML=xmlhttp.responseText;

 

如果來自伺服器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：

responseXML例子：

1234567

xmlDoc = xhttp.responseXML;txt = "";x = xmlDoc.getElementsByTagName("ARTIST");for (i = 0; i < x.length; i++) {txt += x[i].childNodes[0].nodeValue + "<br>";}document.getElementById("demo").innerHTML = txt;

 

第五步：onreadystatechange函數的使用

onreadystatechange函數，當發送請求到伺服器，我們想要伺服器響應執行一些功能就需要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數。

onreadystatechange屬性儲存區一個當readyState發生改變時自動被調用的函數。

readyState屬性，XMLHttpRequest對象的狀態，改變從0到4，0代表請求未被初始化，1代表格服務器串連成功，2請求被伺服器接收，3處理請求，4請求完成並且響應準備。

status屬性，200表示成功響應，404表示頁面不存在。

在onreadystatechange事件中，伺服器響應準備的時候發生，當readyState==4和status==200的時候伺服器響應準備。

 

1234567

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("demo").innerHTML=xmlhttp.responseText;    }  }

 

使用回呼函數 

 

回呼函數是一種以參數形式傳遞給另一個函數的函數。

如果您的網站上存在多個 AJAX 任務，那麼您應該為建立 XMLHttpRequest 對象編寫一個標準的函數，並為每個 AJAX 任務調用該函數。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

1234567

function myFunction(){    loadXMLDoc("/try/ajax/ajax_info.txt",function()    {        if (xmlhttp.readyState==4 && xmlhttp.status==200)        {            document.getElementById("demo").innerHTML=xmlhttp.responseText;        }    });}

 

在實際的運用中，嘗試利用事件+ajax 給button綁定點擊事件，然後執行ajax。

 

server.php

 

<?php if (isset($_POST[‘action‘])){switch($_POST[‘action‘]){case "btn1":btn1();break;case "btn2":btn2();break;default:break;}}function btn1(){echo "hello 按鈕1";}function btn2(){echo "hello 按鈕2";}?>

 

方式：index.php

 

<html><head><style>div {width:600px;margin:200px auto;}.btn {background-color:#44c767;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;border:1px solid #18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:16px 31px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;}.btn:hover {background-color:#5cbf2a;}.btn:active {position:relative;top:1px;}#btn2 {float:right;}</style><script type="text/javascript" language="javascript">var xmlHttp;  function createXMLHttpRequest(){ //檢查瀏覽器是否支援 XMLHttpRequest 對象if(window.ActiveXObject){  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  }  else if(window.XMLHttpRequest){  xmlHttp = new XMLHttpRequest();  }  }  function fun(n){  createXMLHttpRequest();  var url="server.php";  xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);xmlHttp.onreadystatechange = callback;  xmlHttp.send("action=" + n.value);  }  function callback(){  if(xmlHttp.readyState == 4){  if(xmlHttp.status == 200){  alert(xmlHttp.responseText);   }  }  } </script></head><body><div><button type="button" class="btn" id="btn1" onclick="fun(this)" value="btn1">按鈕1</button><button type="button" class="btn" id="btn2" onclick="fun(this)" value="btn2">按鈕2</button></div></body></html>

 

Ajax的筆記