PHP教程課件講義：PHP與AJAX

PHP與AJAXAJAX概述AJAX(AsynchronousJavaScriptandXML)其實是多種技術(shù)的綜合，包括XHTML、Javascript、和CSS、DOM、XML和XSTL、XMLHttpRequest。AJAX使用XHTML和CSS標準化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，使用XML和XSTL進行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進行異步數(shù)據(jù)讀取，使用JavaScript綁定和處理所有數(shù)據(jù)。在AJAX提出之前，業(yè)界對于上述技術(shù)都只是單獨的作用，沒有綜合使用，也是由于之前的技術(shù)需求所決定的，隨著應(yīng)用的廣泛，AJAX成熟起來。例如：GoogleMaps、GMail思考在使用瀏覽器瀏覽網(wǎng)頁的時候，當頁面刷新很慢的時候，你的瀏覽器在干什么？你的屏幕內(nèi)容是什么？現(xiàn)狀與需要解決的問題客戶端瀏覽器用戶界面（UI）Web服務(wù)器數(shù)據(jù)存儲，處理過程，后臺系統(tǒng)HTTP傳輸

（HTML＋CSS）HTTP請求服務(wù)器端系統(tǒng)標準Web應(yīng)用程序模式同步交互現(xiàn)狀與需要解決的問題時間客戶端服務(wù)器端用戶狀態(tài)用戶狀態(tài)用戶狀態(tài)服務(wù)器處理服務(wù)器處理數(shù)據(jù)傳輸數(shù)據(jù)傳輸數(shù)據(jù)傳輸數(shù)據(jù)傳輸為什么使用AJAX與傳統(tǒng)的WEB應(yīng)用不同，AJAX采用異步交互過程。AJAX在用戶與服務(wù)器之間引入一個中間媒介，從而消除了網(wǎng)絡(luò)交互過程中的處理—等待—處理—等待缺點。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的框架中，它負責編譯用戶界面及與服務(wù)器之間的交互。AJAX引擎允許用戶與應(yīng)用軟件之間的交互過程異步進行，獨立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流。用Javascript調(diào)用AJAX引擎來代替產(chǎn)生一個HTTP的用戶動作，像內(nèi)存中的數(shù)據(jù)編輯、頁面導(dǎo)航、數(shù)據(jù)校驗這些不需要重新載入整個頁面的需求都可以交給AJAX來執(zhí)行。解決方案客戶端瀏覽器用戶界面（UI）Web服務(wù)器數(shù)據(jù)存儲，處理過程，后臺系統(tǒng)HTTP傳輸

（HTML＋CSS）HTTP請求服務(wù)器端系統(tǒng)AjaxWeb應(yīng)用模式Ajax引擎JavaScript調(diào)用AJAXWEB應(yīng)用模式（異步）時間服務(wù)器端客戶端服務(wù)器處理服務(wù)器處理服務(wù)器處理瀏覽器界面AJAX引擎用戶狀態(tài)客戶端處理輸入顯示數(shù)據(jù)傳輸數(shù)據(jù)傳輸AJAX的便捷減輕服務(wù)器的負擔，把一些服務(wù)器負擔的工作轉(zhuǎn)嫁到客戶端：AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負擔。利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負擔，節(jié)約空間和寬帶租用成本。無刷新更新頁面，減少用戶心理和實際的等待時間，帶來更好的用戶體驗：特別的，當要讀取大量的數(shù)據(jù)的時候，不用像表單Reload那樣出現(xiàn)白屏的情況，AJAX使用XMLHTTP對象發(fā)送請求并得到服務(wù)器響應(yīng)，在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面，讓用戶感覺如同本地應(yīng)用程序一樣的流暢操作。可以調(diào)用外部數(shù)據(jù)：例如XML文件。不需要下載插件或者小程序：基于標準化的并被廣泛支持的技術(shù)，進一步促進頁面呈現(xiàn)和數(shù)據(jù)的分離。AJAX的缺陷使用AJAX，它的一些缺陷不得不權(quán)衡一下：瀏覽器的支持：AJAX大量使用了Javascript和AJAX引擎，IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。后退功能失效：AJAX更新頁面內(nèi)容的時候并沒有刷新整個頁面。對流媒體的支持：沒有FLASH、JavaApplet好。一些手持設(shè)備（如手機、PDA等）：現(xiàn)在還不能很好的支持Ajax。AJAX開發(fā)框架下面我們通過一步步的解析，來形成一個發(fā)送和接收XMLHttpRequest請求的程序框架。AJAX實質(zhì)上也是遵循Request/Server模式，所以這個框架基本的流程也是： 對象初始化->發(fā)送請求->服務(wù)器接收->服務(wù)器返回->客戶端接收->修改客戶端頁面內(nèi)容。注意：這個過程是異步的。XMLHttpRequest對象XMLHttpRequest是XMLHTTP組件的對象，是Ajax應(yīng)用程序的核心。通過這個對象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來做；這樣既減輕了服務(wù)器負擔又加快了響應(yīng)速度、縮短了用戶等待的時間。1、XMLHttpRequest對象初始化沒有一樣?xùn)|西在不同的瀏覽器上得到同樣的結(jié)果IE5.0開始，開發(fā)人員可以在Web頁面內(nèi)部使用XMLHTTPActiveX組件擴展自身的功能，不用從當前的Web頁面導(dǎo)航就可以直接傳輸數(shù)據(jù)到服務(wù)器或者從服務(wù)器接收數(shù)據(jù)。Mozilla1.0以及NetScape7則是創(chuàng)建繼承XML的代理類XMLHttpRequest對于大多數(shù)情況，XMLHttpRequest對象和XMLHTTP組件很類似，方法和屬性類似，只是部分屬性不同。使用IE瀏覽器IE作用MSXML解析器處理XML編寫的Ajax應(yīng)用程序要和IE打交道必須有一種特殊的方式創(chuàng)建對象要根據(jù)IE中安裝的JavaScript技術(shù)版本不同，MSXML實際上有兩種不同的版本，因此必須對這兩種情況分別編寫代碼。

http_request=newActiveXObject("Msxml2.XMLHTTP"); http_request=newActiveXObject("Microsoft.XMLHTTP");IE創(chuàng)建XMLHttpRequest對象代碼http_request=false;if(window.ActiveXObject)//檢測為IE瀏覽器{ try{ http_request=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){ http_request=false;} }}處理Mozilla和非Microsoft瀏覽器如果瀏覽器不是IE，或者為非Microsoft瀏覽器編寫代碼，就要使用不同的代碼：http_request=newXMLHttpRequest();這行代碼在Mozilla、Firefox、Safari、Opera以及基本上所有以任何形式或方式支持Ajax的非Microsoft瀏覽器中，創(chuàng)建XMLHttpRequest對象。有些版本的Mozilla瀏覽器處理服務(wù)器返回的未包含XMLmime-type頭部信息的內(nèi)容時會出錯。因此，要確保返回的內(nèi)容包含text/xml信息。

http_request.overrideMimeType('text/xml');處理Mozilla和非Microsoft瀏覽器代碼 varhttp_request=false;

if(window.XMLHttpRequest)//Mozilla瀏覽器

{ http_request=newXMLHttpRequest(); //設(shè)置MiME類別

if(http_request.overrideMimeType) {

http_request.overrideMimeType("text/xml"); }

} XMLHttpRequest對象的方法方法描述abort()停止當前請求getAllResponseHeaders()作為字符串返回完整的headersgetResponseHeader("headerLabel")作為字符串返回單個的header標簽open("method","URL"[,asyncFlag[,"userName"[,"password"]]])設(shè)置未決的請求的目標URL，方法，和其他參數(shù)send(content)發(fā)送請求setRequestHeader("label","value")設(shè)置header并和請求一起發(fā)送報頭集的示例Date:Sun.13Nov200822:10:03GMTServer:Apache/2.0.53（Win32）PHP/5.0.3X-Powered-By:PHP/5.0.3Content-Length:527Last-Modified:0Keep-Alive:timeout=15.max=98Connection:Keep-AliveContent-Type:text/htmlXMLHttpRequest對象的屬性屬性描述onreadystatechange狀態(tài)改變的事件觸發(fā)器readyState對象狀態(tài)(integer):0=未初始化

1=讀取中

2=已讀取

3=交互中

4=完成responseText服務(wù)器進程返回數(shù)據(jù)的文本版本responseXML服務(wù)器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象status服務(wù)器返回的狀態(tài)碼,如：404="文件未找到"、200="成功"statusText服務(wù)器返回的狀態(tài)文本信息常用HTTP響應(yīng)代碼響應(yīng)代碼描述200OK請求文檔或文件已經(jīng)找到，并正確返回304NotModified瀏覽器指出它擁有一個本地的緩存副本，而服務(wù)器端的內(nèi)容與此相同401Unauthorized請求所需文檔需要驗證403Forbidden請求者對所請求的文檔不具有響應(yīng)權(quán)限404NotFound請求的文件找不到500InternalServerError服務(wù)器在處理請求時遇到了問題503ServiceUnavailable服務(wù)器因負載過大而無法處理該請求XMLHttpRequest對象初始化<scripttype="text/javascript">varhttp_request=false; functionsend_request(url){//初始化、指定處理函數(shù)、發(fā)送請求的函數(shù)

http_request=false; //開始初始化XMLHttpRequest對象

if(window.XMLHttpRequest){//Mozilla瀏覽器

http_request=newXMLHttpRequest(); if(http_request.overrideMimeType){//設(shè)置MiME類別

http_request.overrideMimeType("text/xml"); } } elseif(window.ActiveXObject){//IE瀏覽器

try{ http_request=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if(!http_request){//異常，創(chuàng)建對象實例失敗

window.alert("不能創(chuàng)建XMLHttpRequest對象實例."); returnfalse; }}</script>2、指定響應(yīng)處理函數(shù)接下來要指定當服務(wù)器返回信息時客戶端的處理方式。只要將相應(yīng)的處理函數(shù)名稱賦給XMLHttpRequest對象的onreadystatechange屬性就OK了:http_request.onreadystatechange=processRequest;需要指出的是，這個函數(shù)名稱不加括號，不指定參數(shù)也可以用Javascript即時定義函數(shù)的方式定義響應(yīng)函數(shù):http_request.onreadystatechange=function(){};3、發(fā)出HTTP請求(open)指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請求了。這一步調(diào)用XMLHttpRequest對象的open和send方法:http_request.open('GET','/some.file',true);http_request.send(null);open的第一個參數(shù)是HTTP請求的方法，為Get、Post或者Head。open的第二個參數(shù)是目標URL。這個URL可以是任何的URL，包括需要服務(wù)器解釋執(zhí)行的頁面，目標URL處理請求XMLHttpRequest請求則跟處理普通的HTTP請求一樣。open的第三個參數(shù)只是指定在等待服務(wù)器返回信息的時間內(nèi)是否繼續(xù)執(zhí)行下面的代碼。如果為True，則不會繼續(xù)執(zhí)行，直到服務(wù)器返回信息。默認為True。發(fā)出HTTP請求(send)按照順序，open調(diào)用完畢之后要調(diào)用send方法。如果希望每次都是獲取最新的網(wǎng)站內(nèi)容，需要設(shè)置請求頭http_request.setRequestHeader(“If-Modified-Since”,”0”);以Post方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。不過，跟form一樣，如果要傳文件或者Post內(nèi)容給服務(wù)器，必須先調(diào)用setRequestHeader方法，修改MIME類別。如下：http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);以Get方式發(fā)出的話，這時資料則以查詢字符串的形式列出，作為send的參數(shù)，例如：name=value&anothername=othervalue&so=on4、處理服務(wù)