ajax編程技術(shù)第四章ajax技術(shù)

1、Ajax編程技術(shù)第四章Ajax技術(shù),4-2,4.1 XMLHttpRequest對(duì)象,本章主要介紹技術(shù)是XMLHttpRequest對(duì)象，因?yàn)锳jax應(yīng)用程序的中心就是它。同時(shí)，對(duì)于許多數(shù)網(wǎng)頁開發(fā)的實(shí)際問題中，它也是最廣泛適用的解決方案。我們還將介紹該對(duì)象的GET和POST方法的使用。同時(shí)探討用戶使用此對(duì)象常見的錯(cuò)誤，例如當(dāng)試圖讓頁面在所有服務(wù)器上都能運(yùn)行時(shí)遇到的一些問題。最后還介紹一種Ajax技術(shù)的替代方案及其示例。

2、,4-3,4.1 XMLHttpRequest對(duì)象,XMLHttpRequest對(duì)象最初是作為IE5中的一個(gè)ActiveX控件出現(xiàn)的，隨后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都將它納入自身。XMLHttpRequest對(duì)象在IE瀏覽器和非IE瀏覽器中實(shí)現(xiàn)方法不同。XMLHttpRequest對(duì)象的作用在于，允許用腳本程序通過HTTP連接到服務(wù)器，而不比通過HTTP請(qǐng)求響應(yīng)模型與服

3、務(wù)器通信。,4-4,4.2 創(chuàng)建XMLHttpRequest對(duì)象,創(chuàng)建XMLHttpRequest對(duì)象在IE7、Firefox、safari和Opera中創(chuàng)建該對(duì)象的JavaScript代碼為：var xmlRequet = new XMLHttpRequest();在IE5/6中代碼為：var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);注意，JavaScr

4、ipt區(qū)分大小寫，如果大小寫不正確，什么東西都創(chuàng)建不出來。使用XMLHttpRequest對(duì)象的方式有兩種，同步和異步。,4-5,4.2 創(chuàng)建XMLHttpRequest對(duì)象,同步使用XMLHttpRequest對(duì)象按照下面模式，可以同步地XMLHttpRequest對(duì)象：創(chuàng)建對(duì)象；創(chuàng)建請(qǐng)求；發(fā)送請(qǐng)求。這種模式與傳統(tǒng)模式?jīng)]有區(qū)別，用處不大，真正強(qiáng)大的地方在于異步地使用它。,4-6,4.2 創(chuàng)建XMLHttpRequ

5、est對(duì)象,異步使用XMLHttpRequest對(duì)象異步使用XMLHttpRequest對(duì)象時(shí)，必須使用onreadystatechange事件調(diào)用該對(duì)象。在觸發(fā)該事件后，必須在應(yīng)用程序采取行動(dòng)之前檢查readyState屬性的內(nèi)容，因此使用模式應(yīng)該是：創(chuàng)建該對(duì)象；設(shè)置readystatechange事件觸發(fā)一個(gè)指定的函數(shù)；檢查readyState屬性，看數(shù)據(jù)是否準(zhǔn)備就緒。如果沒有準(zhǔn)備好，隔一段時(shí)間再次檢查。因?yàn)閿?shù)據(jù)沒有下

6、載完時(shí)，我們無法使用它的屬性和方法。如果已經(jīng)準(zhǔn)備好，就繼續(xù)往下執(zhí)行；打開請(qǐng)求；發(fā)送請(qǐng)求。readystatechange事件的整個(gè)操作都是在后臺(tái)執(zhí)行，這樣就能夠異步使用XMLHttpRequest對(duì)象。,4-7,4.2 創(chuàng)建XMLHttpRequest對(duì)象,readyState屬性readyState屬性指出了XMLHttpRequest對(duì)象在發(fā)送/接收數(shù)據(jù)過程中所處的幾個(gè)狀態(tài)。XMLHttpRequest對(duì)象會(huì)經(jīng)歷5

7、種不同的狀態(tài)。0：未初始化。對(duì)象已經(jīng)創(chuàng)建，但還未初始化，即還沒調(diào)用open方法；1：已打開。對(duì)象已經(jīng)創(chuàng)建并初始化，但還未調(diào)用send方法；2：已發(fā)送。已經(jīng)調(diào)用send 方法，但該對(duì)象正在等待狀態(tài)碼和頭的返回；3：正在接收。已經(jīng)接收了部分?jǐn)?shù)據(jù)，但還不能使用該對(duì)象的屬性和方法，因?yàn)闋顟B(tài)和響應(yīng)頭不完整；4：已加載。所有數(shù)據(jù)接收完畢,4-8,4.2 創(chuàng)建XMLHttpRequest對(duì)象,XMLHttpRequest對(duì)象的屬性和方法,4

8、-9,4.2 創(chuàng)建XMLHttpRequest對(duì)象,4-10,4.2 創(chuàng)建XMLHttpRequest對(duì)象,使用XMLHttpRequest對(duì)象示例此示例使用此對(duì)象網(wǎng)頁的實(shí)現(xiàn)動(dòng)態(tài)顯示。頁面上有幾個(gè)鏈接，分別點(diǎn)擊，可以顯示不同的文字或圖片，或者清除顯示的文字或圖片。下面是程序：,4-11,4.2 創(chuàng)建XMLHttpRequest對(duì)象,// index.htm Ajax實(shí)例展示 顯示聯(lián)系我們

9、 顯示日歷時(shí)間 顯示廣告圖片 清除聯(lián)系我們 清除日歷時(shí)間 清除廣告圖片 ,4-12,4.2 創(chuàng)建XMLHttpRequest對(duì)象,// XHRequest.jsvar xHRObject = false;if (window.XMLHttpRequest) { xHRObject = new XMLHttpRequest();}else if (wi

10、ndow.ActiveXObject) { xHRObject = new ActiveXObject("Microsoft.XMLHTTP"); } function sendRequest(data){ if (data=='delContacts') { box1.innerHTML=''; } else if (data=='delCal

11、endar') { box2.innerHTML=''; } else if (data=='delAdverts') { box3.innerHTML=''; } else { var bodyofrequest = getBody(data); xHRObject.open("POST", &qu

12、ot;display.php", true); xHRObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xHRObject.onreadystatechange = getData; xH

13、RObject.send(bodyofrequest); }}function getBody(data){ var argument = "value="; argument += encodeURIComponent(data) return argument;}function getData(){ if (xHRObject.readyState == 4

14、&& xHRObject.status == 200) { var serverText = xHRObject.responseText; if(serverText.indexOf('|' != -1)) { element = serverText.split('|'); document.getElementById

15、(element[0]).innerHTML = element[1]; } }},4-13,4.2 創(chuàng)建XMLHttpRequest對(duì)象,ContactsAnhui, Hefei,USTC"; break; case 'Calendar': $dt = gmdate("M d Y H:i:s"); echo &qu

16、ot;box2|Calendar: $dt"; break; case 'Adverts': $source = "logo.gif"; echo "box3|Advert:"; break; case 'delContacts': echo "box1| "

17、; break; case 'delCalendar': echo "box2| "; break; case 'delAdverts': echo "box3| "; break; }?>,4-14,4.2 創(chuàng)建XMLHttpRequest

18、對(duì)象,程序運(yùn)行：運(yùn)行初始狀態(tài)入圖1，點(diǎn)擊鏈接后見圖2：,圖1,圖2,4-15,4.3 常見錯(cuò)誤,編程常見錯(cuò)誤企圖通過雙擊網(wǎng)頁文件運(yùn)行它；XMLHttpRequest大小寫不正確；多寫了對(duì)圓括號(hào)：正確：xHRObject.onreadystatechange =getData;錯(cuò)誤：xHRObject.onreadystatechange =getData();必須弄清楚，在JavaScript中：函數(shù)名后如果有圓括號(hào)，

19、意思就是將函數(shù)的返回值賦給等號(hào)左邊的變量；沒有圓括號(hào)，是將函數(shù)本身賦給等號(hào)前的變量。,4-16,4.3 常見錯(cuò)誤,同源問題XMLHttpRequest對(duì)象有些問題來自于同源問題。在較早版本的瀏覽器中，可以運(yùn)行來自任何源的任何腳本，由此帶來很嚴(yán)重的安全隱患。因此，處于安全的考量，“同源策略”被要求強(qiáng)制執(zhí)行。即只有來自同一域、同一協(xié)議和同一端口的腳本才可以運(yùn)行。IE不檢驗(yàn)它從XMLHttpRequest對(duì)象中取回的字段。其中的

20、一個(gè)字段就是HTTPREFERER，它包含用戶所瀏覽頁面的URL/域名(注意：該字段的值并不總是一個(gè))。這意味著Referer完全可以在客戶端進(jìn)行偽造。IE這個(gè)的這個(gè)安全漏洞Referer值不可信。解決的辦法之一是，我們可以在編寫Cookie時(shí)，將域名/服務(wù)器添加到cookie中，以便驗(yàn)證發(fā)出的和接收的同源。,4-17,4.3 常見錯(cuò)誤,緩存控制：IE主動(dòng)緩存為了節(jié)約帶寬資源，瀏覽器會(huì)在本地緩存頁面，然后從緩存中找出該頁面而

21、不是從源服務(wù)器下載頁面。這樣一來，當(dāng)頁面更新后，可能頁面并沒有顯示這種更新。解決的辦法是，強(qiáng)制停止緩存?？梢栽诰W(wǎng)頁中插入如下代碼：這樣足以使瀏覽器重載該頁面。但如果使用XMLHttpRequest對(duì)象，且請(qǐng)求中包含GET指令，那么IE將始終緩存該頁面，而決不會(huì)重載該頁面。,4-18,4.3 常見錯(cuò)誤,緩存問題的解決方法我們有三種辦法來解決緩存造成的問題。在GET請(qǐng)求后添加querystring，并確保每次運(yùn)行時(shí)，

22、 querystring值都不一樣。將日期作為querystring值是一個(gè)好主意：xHRObject.open(“GET”,”display.php?id=“ + Number(new Date)+”&value=“ + data, true);這種“每次輸入不同的querystring值”的解決方法，從原理上將是一種回避策略。,4-19,4.3 常見錯(cuò)誤,設(shè)置HTTP頭部的If-Modified-Since為一個(gè)過期

23、的時(shí)間：xHRObject.open=(“GET”, “display.php?value=“+data, true);xHRObject.setRequestHeader(“If-Modified-Since”, “Sat,1, Jan 2000 00:00:00 GMT”);使用這種方法，可以阻止緩存。使用POST 請(qǐng)求。我們將在下一節(jié)討論這種方法。一般來說，前兩種方法用起來比較順手，第3種方法可以完全避免緩存的

24、困擾。,4-20,4.3 常見錯(cuò)誤,跨瀏覽器兼容在使用Ajax技術(shù)時(shí)，最困難的問題是讓應(yīng)用程序在不同的瀏覽器中都能夠正常運(yùn)行。實(shí)際上，這種想法非常不實(shí)際。愛XMLHttpRequest應(yīng)用中，用戶使用的是IE還是Mozilla瀏覽器已成為次要問題，主要問題是創(chuàng)建哪個(gè)版本瀏覽器的XMLHttpRequest對(duì)象。我們需要注意以下問題：ActiveX控件不能使用在IE之外的瀏覽器中；動(dòng)態(tài)HTTPjihe document.

25、all只能在IE上工作；在某些版本的Firefox上運(yùn)行XMLHttpRequest會(huì)崩潰；IE不區(qū)別大小寫，而Mozilla卻區(qū)別大小寫；不同的IE版本，必須調(diào)用不同版本的MSXML?！?4-21,4.4 POST方法,使用POST方法替代GET方法，是另一種解決IE主動(dòng)緩存頁面的辦法，它使Ajax技術(shù)提供一個(gè)更加無縫的前端。將GET方法變成POST方法，除了需要做：將querystring刪除；對(duì)發(fā)送的數(shù)據(jù)編碼；

26、將它作為跨服務(wù)器參數(shù)發(fā)送給send方法。該參數(shù)仍然是名/值，與querystring類似，格式為：value=Contents。但不附加在URL中，而是使用URL編碼。,4-22,4.4 POST方法,如4.2節(jié)的示例中的POST方法：function sendRequest(data){ if (data=='delContacts') { box1.innerHTML=''

27、; } else if (data=='delCalendar') { box2.innerHTML=''; } else if (data=='delAdverts') { box3.innerHTML=''; } else { var bodyofrequest = getBody(data); xHRObj

28、ect.open(“POST”, “display.php”, true); //GET變?yōu)镻OST，刪除querystring參數(shù) xHRObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xHRObject.onreadystate

29、change = getData; xHRObject.send(bodyofrequest); }}function getBody(data){ var argument = "value="; argument += encodeURIComponent(data) //上傳的數(shù)據(jù)編碼，但變量名不編碼 return argument;}

30、,4-23,4.4 POST方法,POST方法和GET方法的比較POST方法比GET方法傳遞的信息量大，最多可達(dá)2GB，而GET方法則大為減小，IE限制為2083個(gè)字符，Opera為4050個(gè)字符，Netscape4為8192個(gè)字符GET方法只能使用ASCII碼傳送且有緩存的困擾；而POST使用編碼傳送，且沒有緩存的困擾。如何選則當(dāng)查詢的結(jié)果不會(huì)導(dǎo)致客戶端頁面變化，或下載量較小，使用GET方法；當(dāng)查詢的結(jié)果會(huì)導(dǎo)致客戶端頁面變

31、化，或下載量很大時(shí)，用POST方法。,4-24,4.5 其他Ajax技術(shù),動(dòng)態(tài)腳本加載可以用另一種不錯(cuò)的方法來替代XMLHttpRequest對(duì)象的使用。這就是動(dòng)態(tài)腳本加載技術(shù)。利用此技術(shù)，可以使用DOM動(dòng)態(tài)創(chuàng)建JavaScript腳本，SRC屬性也可以動(dòng)態(tài)賦值。JavaScript源文件只在將其添加到頁面時(shí)才下載并執(zhí)行。概念：添加腳本到頁面；該腳本動(dòng)態(tài)添加到另一個(gè)腳本到頁面，并在后面附加SRC屬性；腳本使用服務(wù)器

32、啟動(dòng)對(duì)話框,4-25,4.5 其他Ajax技術(shù),示例示例中使用了一個(gè)腳本，根據(jù)用戶選擇，動(dòng)態(tài)地創(chuàng)建其它3個(gè)腳本中的一個(gè)。為了簡(jiǎn)捷，我們不使用服務(wù)器啟動(dòng)任何對(duì)話框，因?yàn)楹竺鏁?huì)介紹這種方法還有一些不足。,4-26,4.5 其他Ajax技術(shù),創(chuàng)建一個(gè)名為ScriptLoader.htm的HTML頁面：,// ScriptLoader.htm 你想加載哪個(gè)腳本?腳本1腳本2腳本3,4-27,4.5

33、其他Ajax技術(shù),創(chuàng)建名為ScriptLoader.js的腳本：,// ScriptLoader.jsfunction retrieveInfo(data){ var newScript = document.createElement("script"); newScript.src = "script" + data + ".js"; document.b

34、ody.appendChild(newScript);},4-28,4.5 其他Ajax技術(shù),分別創(chuàng)建3個(gè)腳本，名為Script1.js, Script2.js, Script3.js,//Script1.jsalert ("加載了腳本1");,//Script2.jsalert ("加載了腳本2");,//Script3.jsalert (“這是腳本3");,4-29,4.5

35、 其他Ajax技術(shù),現(xiàn)在運(yùn)行ScriptLoader.htm文件，單擊第二個(gè)按鈕，程序運(yùn)行結(jié)果如下圖所示：,4-30,4.5 其他Ajax技術(shù),說明程序關(guān)鍵語句如下：var newScript = document.createElement(“script”); // 創(chuàng)建Script元素newScript.src = “script” + data + “.js”; // 設(shè)置S

36、RC 屬性document.body.appendChild(newScript); // 將新元素附加在body元素上,4-31,4.5 其他Ajax技術(shù),評(píng)價(jià)優(yōu)點(diǎn)：可以使用多個(gè)不同的腳本，并按需加載不同的腳本；為我們提供了另一個(gè)創(chuàng)建服務(wù)器調(diào)用的機(jī)會(huì)。缺點(diǎn)：IE中動(dòng)態(tài)加載腳本會(huì)停止其他所有的處理；只能使用GET方法，不能使用POST方法；往往不知道腳本是否得到真正的加載。,4-32

37、,4.5 其他Ajax技術(shù),圖象和cookie工作方式這種模式的工作方式如下：元素使用src屬性封裝請(qǐng)求，傳遞附加在querystring后的任何其他信息；服務(wù)器存儲(chǔ)該信息，并編寫存儲(chǔ)在客戶端cookie中的唯一可識(shí)別信息。這種模式與動(dòng)態(tài)腳本加載示例非常相似。但是沒有動(dòng)態(tài)腳本加載的缺點(diǎn)，它被廣泛用于擁有大量電子郵件的用戶，或者希望跟蹤用戶瀏覽習(xí)慣的網(wǎng)站。,4-33,4.5 其他Ajax技術(shù),示例網(wǎng)上售書頁面。當(dāng)

38、用戶查看該頁面時(shí)，其正在瀏覽的頁面的相關(guān)信息會(huì)作為圖象的一部分發(fā)送到服務(wù)器，然后服務(wù)器會(huì)編寫唯一的表示符到cookie，并使用消息框向用戶顯示該cookie中包含的信息。,4-34,4.5 其他Ajax技術(shù),創(chuàng)建Cataloque.htm, Book:作者: 許富ISBN: 97-7-123456定價(jià): 50.20元,4-35,4.5 其他Ajax技術(shù),創(chuàng)建ImageLoader.js腳本：,fu

39、nction createImage(){ var bookid = document.getElementById("ISBN").innerHTML; var img = document.getElementById("secret"); img.src = "relayInfo.php?bookid=" + bookid; img.width =

40、0; img.height = 0;}function showCookie(){ var cookie = getCookieInfo("AnonymousID"); alert(cookie);}function getCookieInfo(cookie){ RegularXp = "(?:; )?" + cookie + "=([^;]*);?&qu

41、ot;; var RegularXpExtract = new RegExp(RegularXp); if (RegularXpExtract.test(document.cookie)) { return decodeURIComponent(RegExp["$1"]); } else { return null; }},4-36,4.5 其他Ajax技術(shù),創(chuàng)建relayI

42、nfo.php:,,4-37,4.5 其他Ajax技術(shù),運(yùn)行結(jié)果打開瀏覽器，運(yùn)行首文件Cataloque.htm, 見右圖。點(diǎn)擊“查看cookie”，屏幕出現(xiàn)對(duì)話框，顯示Cookie信息關(guān)閉瀏覽器，再次打開，cookie信息被追加。,4-38,4.5 其他Ajax技術(shù),示例說明本例展示出，如何通過動(dòng)態(tài)改變圖象的scr屬性來調(diào)用服務(wù)器。在頁面的開始部分加載了createImage，然后找到包含該圖書ISBN的元素

43、中的內(nèi)容（該書內(nèi)容被存儲(chǔ)在cookie中），以及Ajax.jpg圖片var bookid = document.getElementById(“ISBN”).innerHTML;var img = document.getElementById(“secret”);接著，使用指向服務(wù)器端頁面和作為querystring傳遞的圖書ISBN替換掉src屬性。img.src = "relayInformation

44、.php?bookid=" + bookid;img.width = 0;img.height = 0;,4-39,4.5 其他Ajax技術(shù),服務(wù)器端代碼僅用來檢查cookie是否存在。如果不存在cookie，則添加一個(gè)唯一的ID（本例中是一個(gè)隨機(jī)數(shù)）和圖書的ISBN號(hào)；如果存在cookie，則在cookie尾部添加上述信息。 if ($_COOKIE[AnonymousID]) { $tempCooki

45、e = $_COOKIE["AnonymousID"]; setcookie("AnonymousID", $tempCookie."|BOOKID:".$_GET["bookid"], time()+3600); } else { $random_id = (rand()%9999999); $tempCookie = &q

46、uot;USERID:" .$random_id."|BOOKID:" . $_GET["bookid"]; setcookie("AnonymousID", $tempCookie."|BOOKID:".$_GET["bookid"], time()+3600); },4-40,4.5 其他Ajax技術(shù),然后使

47、用showCookie()函數(shù)顯示內(nèi)容。在這里，Ajax技術(shù)快速得到匿名用戶的查看模式。所以，利用該ID存儲(chǔ)數(shù)據(jù)沒有問題，然后就可以慢慢收集用戶瀏覽習(xí)慣。,4-41,4.5 其他Ajax技術(shù),評(píng)價(jià)缺點(diǎn)：如果用戶選擇關(guān)閉圖片下載，就沒法運(yùn)行；Cookie存儲(chǔ)信息有限制，大約是4KB；只能使用GET方法，不能使用POST方法。,4-42,4.5 其他Ajax技術(shù),隱藏框架原理：常使用此技術(shù)用于返回服務(wù)器信息。它采用帶有兩個(gè)框架