ajax編程技術第四章ajax技術

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

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

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

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

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

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

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

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

9、 顯示日歷時間 顯示廣告圖片 清除聯(lián)系我們 清除日歷時間 清除廣告圖片 ,4-12,4.2 創(chuàng)建XMLHttpRequest對象,// 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對象,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、對象,程序運行：運行初始狀態(tài)入圖1，點擊鏈接后見圖2：,圖1,圖2,4-15,4.3 常見錯誤,編程常見錯誤企圖通過雙擊網頁文件運行它；XMLHttpRequest大小寫不正確；多寫了對圓括號：正確：xHRObject.onreadystatechange =getData;錯誤：xHRObject.onreadystatechange =getData();必須弄清楚，在JavaScript中：函數(shù)名后如果有圓括號，

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

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

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

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

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

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

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

26、將它作為跨服務器參數(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ù)據編碼，但變量名不編碼 return argument;}

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

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

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

33、其他Ajax技術,創(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技術,分別創(chuàng)建3個腳本，名為Script1.js, Script2.js, Script3.js,//Script1.jsalert ("加載了腳本1");,//Script2.jsalert ("加載了腳本2");,//Script3.jsalert (“這是腳本3");,4-29,4.5

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

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

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

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

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

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

44、.php?bookid=" + bookid;img.width = 0;img.height = 0;,4-39,4.5 其他Ajax技術,服務器端代碼僅用來檢查cookie是否存在。如果不存在cookie，則添加一個唯一的ID（本例中是一個隨機數(shù)）和圖書的ISBN號；如果存在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技術,然后使

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