第9章 AJAX框架構(gòu)建動態(tài)網(wǎng)站

第9章AJAX框架構(gòu)建動態(tài)網(wǎng)站01Ajax概述

02Ajax技術(shù)的組成

03Ajax與PHP的交互04Ajax開發(fā)注意事項

1Ajax概述主要內(nèi)容

什么是Ajax

Ajax的開發(fā)模式

Ajax的優(yōu)點(diǎn)

010203什么是Ajax

Ajax是AsynchronousJavaScriptAndXML的縮寫，即異步JavaScript和XML技術(shù)。Ajax的開發(fā)模式

Ajax中，頁面中用戶的操作將通過Ajax引擎與服務(wù)器端進(jìn)行通信，然后將返回結(jié)果提交給客戶端頁面的Ajax引擎，再由Ajax引擎來決定將這些數(shù)據(jù)插入到頁面的指定位置。Ajax的優(yōu)點(diǎn)無刷新更新頁面。減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。減輕服務(wù)器的負(fù)擔(dān)?？梢哉{(diào)用XML等外部數(shù)據(jù)，進(jìn)一步促進(jìn)Web頁面顯示和數(shù)據(jù)的分離。Ajax是基于標(biāo)準(zhǔn)化并被廣泛支持的技術(shù)，不需要下載插件或者小程序。2Ajax技術(shù)的組成主要內(nèi)容

JavaScript腳本語言

XMLHttpRequest對象

XML語言010203

DOM04

CSS05

JavaScript是一種具有豐富的面向?qū)ο筇匦缘某绦蛟O(shè)計語言，利用它能執(zhí)行許多復(fù)雜的任務(wù)，例如，Ajax就是利用JavaScript將DOM、XHTML（或HTML）、XML以及CSS等技術(shù)綜合起來，并控制它們的行為。JavaScript腳本語言XMLHttpRequest對象為了提高程序的兼容性，可以創(chuàng)建一個跨瀏覽器的XMLHttpRequest對象。if(window.XMLHttpRequest){ //Mozilla、Safari等瀏覽器 http_request=newXMLHttpRequest();}elseif(window.ActiveXObject){ //IE瀏覽器 try{ http_request=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=newActiveXObject("Microsoft.XMLHTTP");

}catch(e){} }}XMLHttpRequest對象

open()方法用于設(shè)置進(jìn)行異步請求目標(biāo)的URL、請求方法以及其他參數(shù)信息。

XMLHttpRequest對象的常用方法open()方法open("method","URL"[,asyncFlag[,"userName"[,"password"]]])語法XMLHttpRequest對象

send()方法用于向服務(wù)器發(fā)送請求。如果請求聲明為異步，該方法將立即返回，否則將等到接收到響應(yīng)為止。send()方法send(content)語法

setRequestHeader()方法為請求的HTTP頭設(shè)置值。setRequestHeader()方法setRequestHeader("label","value")語法XMLHttpRequest對象

abort()方法用于停止當(dāng)前異步請求。abort()方法

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP頭信息，當(dāng)存在參數(shù)時，表示以字符串形式返回由該參數(shù)指定的HTTP頭信息。getAllResponseHeaders()方法XMLHttpRequest對象

XMLHttpRequest對象的常用屬性屬性說明onreadystatechange每次狀態(tài)改變都會觸發(fā)這個事件處理器，通常會調(diào)用一個JavaScript函數(shù)readyState請求的狀態(tài)。responseText服務(wù)器的響應(yīng)，表示為字符串responseXML服務(wù)器的響應(yīng)，表示為XML。這個對象可以解析為一個DOM對象status返回服務(wù)器的HTTP狀態(tài)碼statusText返回HTTP狀態(tài)碼對應(yīng)的文本XMLHttpRequest對象

XMLHttpRequest對象與服務(wù)器交互

Ajax與服務(wù)器的交互分為以下3個步驟：（1）初始化XMLHttpRequest對象（2）設(shè)置請求狀態(tài)和返回處理函數(shù)（3）發(fā)送HTTP請求xmlobj.onreadystatechange=function_name;語法xmlobj.open(send_method,url,flag);語法XML語言

XML是eXtensibleMarkupLanguage（可擴(kuò)展的標(biāo)記語言）的縮寫，它提供了用于描述結(jié)構(gòu)化數(shù)據(jù)的格式。DOM

DOM是DocumentObjectModel（文檔對象模型）的縮寫，它為XML文檔的解析定義了一組接口。在Ajax應(yīng)用中，通過JavaScript操作DOM，可以達(dá)到在不刷新頁面的情況下實(shí)時修改用戶界面的目的。CSS

CSS是CascadingStyleSheet（層疊樣式表）的縮寫，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。3

Ajax與PHP的交互主要內(nèi)容

通過GET方式與PHP進(jìn)行交互

通過POST方式與PHP進(jìn)行交互在電子商務(wù)平臺網(wǎng)中應(yīng)用Ajax技術(shù)檢測用戶名010203通過GET方式與PHP進(jìn)行交互【實(shí)例】應(yīng)用GET方式，通過XMLHttpRequest對象與PHP進(jìn)行交互。通過POST方式與PHP進(jìn)行交互【實(shí)例】應(yīng)用POST方式，通過XMLHttpRequest對象與PHP進(jìn)行交互。將表單中的數(shù)據(jù)無刷新添加到指定的數(shù)據(jù)表中，添加成功后輸出數(shù)據(jù)表中的數(shù)據(jù)。在電子商務(wù)平臺網(wǎng)中應(yīng)用Ajax技術(shù)檢測用戶名【實(shí)例】在電子商務(wù)平臺網(wǎng)的用戶注冊中就是應(yīng)用Ajax技術(shù)來檢測用戶輸入的昵稱是否被占用。4Ajax開發(fā)注意事項瀏覽器兼容性

使用Ajax的程序必須測試其針對各個瀏覽器的兼容性。

XMLHttpRequest對象封裝

現(xiàn)在很多開源的Ajax框架都提供了對XMLHttpRequest對象的封裝方案，其詳細(xì)內(nèi)容這里不作介紹，讀者可參考相關(guān)資料。

性能問題下面介紹3種優(yōu)化Ajax應(yīng)用執(zhí)行速度的方法：優(yōu)化for循環(huán)。