基于AJAX 和WebService的Web開發(fā)第03章AJAX基本原理

1、基于基于Ajax和和Web Service的的Web2.0開發(fā)開發(fā)第第三三章章本章目標(biāo)本章目標(biāo)了解HTTP協(xié)議了解Ajax了解異步和同步了解XmlHttpRequest對(duì)象掌握簡(jiǎn)單的Ajax編程AJAX 在在 Google Suggest 中的應(yīng)用（智能提示）中的應(yīng)用（智能提示）初上手時(shí)并沒有感覺GMail和其他的WebMail有什么不同，但只要點(diǎn)擊一個(gè)鏈接，差異就出來了：郵件內(nèi)容或者選項(xiàng)菜單仿佛是一瞬間彈出來的。IGoogle中可以拖放的區(qū)域AJAX 在在 GoogleMaps 中的應(yīng)用中的應(yīng)用（圖像顯示幾乎沒有延遲）（圖像顯示幾乎沒有延遲）AJAX,Web2.0AJAX,Web2.0的的“

2、特洛伊戰(zhàn)士特洛伊戰(zhàn)士”AJAX，中文譯作艾亞斯，荷馬史詩里著名的特洛伊戰(zhàn)爭(zhēng)中的古希臘戰(zhàn)斗英雄，以驍勇善戰(zhàn)之名傳世。如今，一種稱為AJAX的新的網(wǎng)頁交互技術(shù)仿佛一夜之間在Web 2.0的戰(zhàn)場(chǎng)上攻城奪地，占盡風(fēng)頭。AJAX戰(zhàn)斗力何在？讓我們來近距離地看看這位今天的Web2.0名將。AjaxAjax所牽涉到的技術(shù)所牽涉到的技術(shù)HTML 負(fù)責(zé)頁面的結(jié)構(gòu)以及一些簡(jiǎn)單的布局CSS 負(fù)責(zé)頁面的樣式和大部分的布局XML 統(tǒng)一數(shù)據(jù)的格式 所需的數(shù)據(jù)所需的數(shù)據(jù)DOM 提供對(duì)文檔結(jié)構(gòu)的統(tǒng)一訪問XmlHttpRequest Ajax的核心對(duì)象，提供對(duì)服務(wù)器的異步調(diào)用Javascript 以上技術(shù)依靠JavaScrip

3、t腳本進(jìn)行整合,協(xié)調(diào)AjaxAjax以前的以前的WebWeb遠(yuǎn)古近代ASP.NET引擎 同步和異步同步和異步使用使用XmlHttpRequestXmlHttpRequestAJAX是：JavaScript、CSS、DOM、XmlHttpRequest四種技術(shù)的集合體，主要應(yīng)用于異步獲取后臺(tái)數(shù)據(jù)和局部刷新。XmlHttpRequestJavaScriptCSSDOM客戶端部分通過該對(duì)象，對(duì)數(shù)據(jù)進(jìn)行異步的傳送處理使用使用XmlHttpRequestXmlHttpRequest創(chuàng)建XmlHttpRequest IE實(shí)現(xiàn)為ActiveX組件 ActiveXObject(“Microsoft.XMLHT

4、TP”); IE的XMLHTTP的版本Microsoft.XMLHTTPMSXML2.XMLHTTPMSXML2.XMLHTTP2.0MSXML2.XMLHTTP3.0MSXML2.XMLHTTP4.0MSXML2.XMLHTTP5.0 其他瀏覽器實(shí)現(xiàn)為本地的JavaScript對(duì)象 XMLHttpRequest 演示:創(chuàng)建XmlHttpRequest使用使用XmlHttpRequestXmlHttpRequest/創(chuàng)建XMLHTTP對(duì)象function GetXmlHTTP()XmlHttp = new ActiveXObject(Microsoft.XMLHTTP)return XmlHt

5、tp;XmlHttp.open(POST,SearchPageName,true)XmlHttp.setRequestHeader(Content-Type,text/xml)XmlHttp.send(XmlSend)var objDoc=XmlHttp.responseXML.documentElement;使用使用XmlHttpRequestXmlHttpRequest發(fā)送請(qǐng)求 Open方法:建立對(duì)服務(wù)器的某個(gè)資源的調(diào)用 參數(shù)一:調(diào)用方法(GET,POST) 參數(shù)二:調(diào)用資源的URL 參數(shù)三:true代表異步；false代表同步 Send方法:向服務(wù)器發(fā)出請(qǐng)求 參數(shù)一:DOM對(duì)象,輸入流，

6、串等.作為請(qǐng)求體的一部分發(fā)送 Onreadystatechange屬性: 這相當(dāng)于一個(gè)事件,它指向一個(gè)方法。每當(dāng)XmlHttpRequest對(duì)象的狀態(tài)改變時(shí)，觸發(fā)該事件，調(diào)用事件處理方法/使用使用XmlHttpRequestXmlHttpRequest發(fā)送請(qǐng)求(續(xù)) readyState:XmlHttpRequest的請(qǐng)求狀態(tài) 0:請(qǐng)求沒有初始化 1:正在加載 2:已經(jīng)加載 3:交互中 4:完成 Status:Http的狀態(tài)碼(HTTP狀態(tài)碼.txt) 200 - 服務(wù)器成功返回網(wǎng)頁 404 - 請(qǐng)求的網(wǎng)頁不存在 503 - 服務(wù)器超時(shí) 演示:簡(jiǎn)單的示例使用使用XmlHttpRequestXm

7、lHttpRequest交互圖片創(chuàng)建XmlHttpRequest,發(fā)出請(qǐng)求服務(wù)器資源執(zhí)行回調(diào)方法發(fā)送請(qǐng)求和處理響應(yīng)發(fā)送請(qǐng)求和處理響應(yīng)看看兩個(gè)屬性 responseText:將響應(yīng)作為一個(gè)文本 responseXML:將響應(yīng)作為一個(gè)Xml對(duì)象將響應(yīng)的內(nèi)容處理成Html innerHTML屬性:將文本中的html字符串作為HTML解析顯示 演示:將響應(yīng)處理成HTML將響應(yīng)解析為XML 當(dāng)傳送一些復(fù)雜的數(shù)據(jù)類型時(shí)(例如對(duì)象),使用Xml是一種比較好的方式 能以DOM對(duì)響應(yīng)的Xml進(jìn)行解析 演示:解析XML發(fā)送請(qǐng)求和處理響應(yīng)發(fā)送請(qǐng)求和處理響應(yīng)在ASP.NET中使用Ajax .ashx介紹 相當(dāng)于Jav

8、a中的Servlet 驗(yàn)證用戶名是否存在 演示:用戶名是否存在發(fā)送請(qǐng)求和處理響應(yīng)發(fā)送請(qǐng)求和處理響應(yīng) /用戶注冊(cè)的用戶名檢測(cè)用戶注冊(cè)的用戶名檢測(cè)function Register(id) function Register(id) if(id=)if(id=) document.getElementByIddocument.getElementById( (lblMessagelblMessage).).innerHTMLinnerHTML = = 用戶名不能為空！用戶名不能為空！; ; document.getElementByIddocument.getElementById( (lblMe

9、ssagelblMessage).).style.colorstyle.color = = red;red; else else VerifyUsernameVerifyUsername(id);(id); 發(fā)送請(qǐng)求和處理響應(yīng)發(fā)送請(qǐng)求和處理響應(yīng)/ 1. / 1. 創(chuàng)建創(chuàng)建XMLHttpRequestXMLHttpRequest組件組件if(if(window.ActiveXObjectwindow.ActiveXObject) ) xmlHttpRequestxmlHttpRequest= new = new ActiveXObjectActiveXObject( (Microsoft.XML

10、HTTPMicrosoft.XMLHTTP););else if(else if(window.XMLHttpRequestwindow.XMLHttpRequest) ) xmlHttpRequestxmlHttpRequest= new = new XMLHttpRequestXMLHttpRequest();();/ 2. / 2. 設(shè)置回調(diào)函數(shù)設(shè)置回調(diào)函數(shù)xmlHttpRequest.onreadystatechangexmlHttpRequest.onreadystatechange = = IsUsernameExist_callbackIsUsernameExist_callba

11、ck; ; / 3. / 3. 初始化初始化XMLHttpRequestXMLHttpRequest組件組件xmlHttpRequest.openxmlHttpRequest.open(GET, (GET, Handler.ashx?customeridHandler.ashx?customerid=+=+id,trueid,true); );/ 4. / 4. 發(fā)送請(qǐng)求發(fā)送請(qǐng)求xmlHttpRequest.sendxmlHttpRequest.send();();/獲取返回值獲取返回值varvar message = message = xmlHttpRequest.responseText

12、xmlHttpRequest.responseText; ;發(fā)送請(qǐng)求和處理響應(yīng)發(fā)送請(qǐng)求和處理響應(yīng)以POST發(fā)送請(qǐng)求 根據(jù)HTTP協(xié)議,POST的請(qǐng)求參數(shù)是在協(xié)議體中發(fā)送的，意味著下面的代碼不成立: http:/ 那如何使用POST發(fā)送請(qǐng)求參數(shù)呢? 創(chuàng)建請(qǐng)求參數(shù)字符串 格式:name1=value1&name2=value2 使用send發(fā)送請(qǐng)求參數(shù) 演示:POST請(qǐng)求總結(jié)總結(jié)Ajax的原理 什么是異步Ajax的核心對(duì)象 XmlHttpRequest 在不同瀏覽器上創(chuàng)建XmHttpRequest的方式使用XmlHttpRequest發(fā)送請(qǐng)求 Open Send onreadystatec

13、hange使用XmlHttpRequest處理響應(yīng) responseText responseXMLGET和POST請(qǐng)求的異同習(xí)題習(xí)題一、關(guān)于AJAX，下列說法錯(cuò)誤的是：A.AJAX使用javascript調(diào)用B.用到了XML、HTML技術(shù)C.AJAX是一門編程語言D. AJAX是新的網(wǎng)頁交互技術(shù)習(xí)題習(xí)題二、創(chuàng)建XMLHttpRequest對(duì)象的代碼：A. xRequest=new ActiveXObject(Microsoft.XML);B. xRequest=new ActiveXObject(Microsoft.XMLHTTP);C. xRequest=new ActiveXObject(Microsoft.XMLRequest);D. xRequest=new ActiveXObject(Microsoft.HTTPRequest);習(xí)題習(xí)題三、創(chuàng)建XMLHttpRequest對(duì)象發(fā)送請(qǐng)求的方法名是：A. Send();B. SendXml();C. SendHttp();D. SendRequ