1、Web Ajax程序設計,第8講,第6章 Hello World!分析 主要內容 XMLHttpRequest對象詳解; 搭建基本的Ajax開發(fā)框架;,6.1 XMLHttpRequest對象詳解 try var xmlhttp = new XMLHttpRequest(); catch(e) var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); xmlhttp.open(GET,hello_world.php,true); xmlhttp.onreadystatechange = function() if(xmlhttp.readyStat

2、e = 4 ,1. 初始化請求 使用XMLHttpRequest對象的open方法初始化請求; xmlhttp.open(GET, service/hello_world.php, true); open方法的3個參數(shù) GET: 定義請求的方法為get方法; service/hello_world.php: 定義了請求的目標地址; true: 定義了請求為異步請求（常省略）; 完整的open方法原型 oXMLHttpRequest.open( strMethod, strUrl, boolAsync, strUser, strPassword); 各參數(shù)如表6-1所示（下頁）,表6-1 ope

3、n方法參數(shù)列表,2. 設置請求HTTP頭信息 oXMLHttpRequest.setRequestHeader( strHeader, strValue); 參數(shù)說明 strHeader： 字符串型，頭名稱; strValue: 字符串型，值; 注意 若已存在已命名的HTTP頭，則被覆蓋; 此方法必須在open方法后調用; 常見用法 提交post方法時，設置編碼類型 oXMLHttpRequest.setRequestHeader( “Content-Type”, application/x-www-form-urlencoded);,提交XML oXMLHttpRequest.setRequ

4、estHeader( “Content-Type”, text/xml); 提交COOKIE: oXMLHttpRequest.setRequestHeader( “COOKIE”, cookiename=cookievalue) 一個例子 HelloWorld(HelloWorld.html) 3. 發(fā)送請求 XMLHttpRequest對象初始化之后,調用send()方法將請求發(fā)送到指定的HTTP服務器; oXMLHttpRequest.send(varBody); varBody: variant型, 可以是字符串,DOM樹,或其他任意數(shù)據(jù)流,同步請求,則要等請求完成之后或超時后才返回;

5、期間頁面程序中斷執(zhí)行,沒有任何響應; 異步請求,則立即返回,頁面程序不會中斷; 發(fā)送數(shù)據(jù)為字符串時,回應數(shù)據(jù)編碼為utf-8,可以在文檔類型頭設置charset的字符類型; 發(fā)送數(shù)據(jù)為XML DOM object時, 回應數(shù)據(jù)編碼,為XML中指定的編碼,若沒有指定,則默認為utf-8; 使用get請求時,或不要發(fā)送數(shù)據(jù)時,用send(null)或send()即可. EX: HelloWorld(AsyncTest.html) 4. 獲取請求的當前狀態(tài) XMLHttpRequest對象的生命周期中的5個狀態(tài): 0(未初始化): 對象已創(chuàng)建,但未調用open方法初始化; 1(初始化): 對象已經(jīng)初

6、始化,但未調用send()方法; 2(發(fā)送數(shù)據(jù)): send方法已調用,但HTTP狀態(tài)和HTTP頭未知;,3(數(shù)據(jù)傳送中): 已經(jīng)開始接收數(shù)據(jù).但響應數(shù)據(jù)和HTTP頭信息不全,此時嘗試獲取數(shù)據(jù)會出現(xiàn)錯誤; 4(完成):數(shù)據(jù)接收完畢; EX: HelloWorld(AsyncTest.html) 5. 指定請求狀態(tài)改變時的事件處理句柄 XMLHttpRequest對象的readyState發(fā)生變化時，會觸發(fā)readystatechange事件; 注冊事件處理函數(shù) 通過給XMLHttpRequest對象的readystatechange屬性賦值的方法，指定狀態(tài)處理函數(shù); 6. 獲取HTTP請求的狀

7、態(tài)碼 訪問XMLHttpRequest對象的status屬性獲取，只讀的整型的值; HTTP狀態(tài)碼：表6-4（p178）;,常用的HTTP狀態(tài)碼 200：OK，請求成功返回; 400：Bad Request，請求失敗; 401：Unauthorized, 請求未被授權; 403：Forbidden，請求被禁用; 404：Not Found，請求數(shù)據(jù)源不存在; 408：Request Timeout，請求超時; 503：Service Unavailable, 請求的服務不可用; 7. 獲取HTTP Header信息 oXMLHttpRequest.getResponseHeader(屬性名);

8、 獲取指定的Header信息; 8. 獲取所有Header信息 oXMLHttpRequest.getAllResponseHeaders(); 獲取所有的Header信息。 EX: HelloWorld(GetHeader.html);,9.取得返回的數(shù)據(jù) 通過XMLHttpRequest對象的responseText或responseXML屬性來獲取返回的數(shù)據(jù)。 responseText：將返回數(shù)據(jù)作為字符串格式; responseXML:將返回數(shù)據(jù)格式化為XML文檔返回，要求服務器輸出的是一個有效的XML文檔; 10. 取消當前請求 oXMLHttpRequest.abort();/使對

9、象重新回到未初始化狀態(tài); 6.2 搭建基本的Ajax開發(fā)框架 1. 創(chuàng)建XMLHttpRequest對象 由于瀏覽器對XMLHttpRequest對象的支持不同，所以有必要對不同的瀏覽器提供不同的創(chuàng)建方法。,function getTransport() var versions = function() return new XMLHttpRequest(); , function() new ActiveXObject(Microsoft.XMLHTTP); , function() new ActiveXObject(Microsoft.XMLHTTP); ;,var request;

10、for(var i = 0; i versions.length; i +) var lambda = versionsi; try request = lambda(); break; catch(e) return request; 2. 發(fā)送請求和回調函數(shù) 源代碼：ajaxRequest.js,3. 一個封裝好的基本Ajax應用程序開發(fā)框架 將前兩個封裝的函數(shù)進行應用測試; HelloWorld(AjaxRequest.html) 第8章 調試技巧 8.1 深入解析Firebug的調試功能 1. 檢查常規(guī)錯誤 可以點擊紅色的錯誤圖標或按F12打開Firebug的調試窗口。 Example

11、8-1.html 8.2 完善log的功能 1. console.log 在控制臺輸出信息; 格式：console.log(msg1,msg2,msgn); log()還支持占位符輸出;,log支持的4種占位符 %s: 字符串; %d,%i: 整數(shù); %f: 浮點數(shù); %o: 對象; 注：占位符只能在log()的第一個參數(shù)中使用; Example8-2.html 2. console.debug console.debug()與console.log()功能相同，也可以接收多個參數(shù); console.debug()輸出的信息后會自動添加一個鏈接，點擊鏈接會自動跳到相應視圖; 參數(shù)為DOM對象或

12、JavaScript對象時，自動轉到DOM查看器顯示對象的詳細信息;,參數(shù)為HTML結點時，自動轉到HTML查看器并定位到元素結點上; 參數(shù)為函數(shù)（方法），自動轉到方法定義所在的行; 參數(shù)為數(shù)組時，自動判斷元素的類型，并添加相應的鏈接; 參數(shù)為基本數(shù)據(jù)類型時，不添加任何鏈接; Example8-3.html 3. () 與console.debug功能相同，不同的是輸出的信息前面加上一個表示注意信息的小圖標。 Example8-4.html 4. console.warn() 與console.debug功能相同，不同的是在輸出信息前面加上一個表示警告的圖標，并將背景設

13、置為綠色。,Example8-5.html 5. console.error 與console.debug功能相同，所不同的在輸出的信息前加上表示錯誤的圖標，并在瀏覽器右下解提示錯誤。 Example8-6.html 6. console.assert 格式： console.assert(條件表達式,提示信息); 功能： 當表達式為false時，輸出提示信息; Example8-7.html 7. console.dir 可以直接將對象或HTML元素的詳細信息輸出到Firebug中; Example8-8.html,8. console.dirxml 將HTML或XML節(jié)點的源代碼輸出到控制

14、臺中; Example8-9.html 9. console.trace 通過在方法體內添加console.trace()語句，可以在Firebug的控制臺中輸出函數(shù)被調用的信息及調用者。 Example8-10.html 10. console.group和console.groupEnd 二者配合使用，對log()信息進行分組; Example8-11.html 11. console.time和console.timeEnd(計算時間) 格式： console.time(計時器名); console.timeEnd(計時器名);,Example8-12.html 12. console.

15、profile和fileEnd 與console.time和console.timeEnd類似，不同的是可以給出所包含代碼的性能測試數(shù)據(jù)。 Example8-13.html 13. console.count 功能 統(tǒng)計自身執(zhí)行的次數(shù); 格式 console.count(信息標題); Example8-14.html 8.1.3 控制臺的命令行功能 直接在控制臺下面的輸入框中輸入JavaScript代碼; 命令行快捷方法（下頁）;,表8-2 命令行快捷方法,表8-2 命令行快捷方法,8.1.4 斷點、單步執(zhí)行和變量信息 1. 在程序中使用debugger關鍵字 Examp

16、le8-15.html 2. 使用腳本查看器添加斷點 只需要在script中顯示的腳本行號前單擊鼠標即可; 8.1.5 在其他瀏覽器中使用Firebug的控制臺 step1: 在上下載以下文件： 見圖3. step2: 編輯firebug-lite-compressed.js文件，搜索 更改為 http:/localhost/項目目錄/firebug-lite.css，保存; 在需要使用控制臺的頁面中引用firebug-lite.js文件; 標簽中必須將debug屬性設置為true,否則每次都必須通過F12打開Firebug面板.,圖1 通過鏈接找到下載位置,圖2 單擊鏈接,圖3 Firebu

17、g 需下載的文件,Example8-15.html 8.1.6 屏蔽測試代碼 發(fā)布項目時,除刪除測試代碼外,還可以用以下代碼將測試代碼屏蔽. var names=log, debug, info, warn, error, assert, dir, dirxml, group, groupEnd, time, timeEnd, count, trace, profile, profileEnd; window.console=; for (var i=0; inames.length; i+) window.consolenamesi=function() 原理: 將console對象的各種方

18、法,設置為空函數(shù);,8.2 使用aptana的集成調試功能 8.2.1 配置集成調試開發(fā)環(huán)境 在編輯區(qū)內右單擊，選擇“Debug”，打開調試配置窗口； 一般情況下，使用默認配置即可； 或指定Base URL為localhost; 8.2.2 啟動調試 直接單擊工具欄上的調試按鈕即可。 8.2.3 斷點，單步執(zhí)行和變量信息 添加斷點 使用debugger關鍵字，添加斷點； 在編輯區(qū)左側行號前雙擊左鍵即可，或右鍵單擊該區(qū)域，選擇“切換斷點”； 認識幾具常用調試按鈕,Step into:單步進入； step over：單步跳過； step out: 單步返回； 8.2.4 使用console.log

19、和dump輸入文本信息 Example8-16.html 8.2.5 使用aptana.trace輸出調用堆棧信息 aptana.trace(信息標題); Example8-17.html 8.2.6 使用斷言 表8-3 Aptana assert API,Example8-18.html,8.2.7 屏蔽測試代碼 var names=log, trace, assert, assertEquals, assertNotEquals, assertGreater, assertNotGreater, assertLess, assertNotLess, assertContains, asse

20、rtNotContains, assertTrue, assertFalse, assertNull, assertNotNull, assertUndefined, assertNotUndefined, assertInstanceOf, assertNotInstanceOf, assertTypeOf, assertNotTypeOf; window.aptana=; for (var i=0; inames.length; i+) window.consolenamesi=function() window.dump=function() window.console=window.

21、aptana;,第9章 常見問題 主要內容 編碼的處理 控制緩存 選擇合適的請求方式 控制多個Ajax請求； Ajax請求的安全性,9.1 編碼處理 1. 文件編碼與聲明編碼 中文操作系統(tǒng)中，編碼存儲編碼是gb2312，而一般傳輸采用的編碼是Utf-8，若兩者采用的不一致，則會出現(xiàn)亂碼； 例如：頁面存儲使用的是gb2312,而在標簽中聲明的是utf-8，則在打開頁面時，會出現(xiàn)亂碼； 解決：使用保存與聲明編碼一致； 2. Ajax請求亂碼 原因：主要是因為XMLHttpRequest使用的解碼格式與服務器發(fā)送的數(shù)據(jù)編碼不一致； 解決方法： 將后臺編碼設置為utf-8; 后臺輸出數(shù)據(jù)之前，在hea

22、der中指定采用的編碼格式,header(“Content-type:text/html;charset=gb2312”); 例子 HelloWorld(RequestTime.java) 9.1.3 發(fā)送數(shù)據(jù)亂碼 原因 Ajax post請求發(fā)送數(shù)據(jù)的編碼格式是utf-8，若后臺頁面采用的不是utf-8編碼，則會產生亂碼； 解決 在接收數(shù)據(jù)處理之前，先對數(shù)據(jù)進行轉換，轉換成需要的編碼格式即可； 發(fā)送數(shù)據(jù)前，對所發(fā)送數(shù)據(jù)進行強制轉換成uft-8: utf8Str=encodeURIComponent(str); 所有亂碼總的解決辦法 讓程序的前后使用的編碼一致，均采用utf-8編碼；,9.2 控制緩存 現(xiàn)象 在IE中使用Ajax發(fā)送GET請求同一URL地址時，會發(fā)現(xiàn)第一次請求的后續(xù)請求中，返回的數(shù)據(jù)沒有更新。 HelloWorld(requestTime.html) 原因 由于IE的緩存引起的。由于GET請求時，如果URL地址沒有變化，則會直接讀取緩存中的數(shù)據(jù)，而不是重新請求頁面。 解決 給每次請求打上時間戳 request.open(“GET”,”cache.php?timeStamp=“ +new