1 //處理瀏覽器，用來(lái)選擇不同的XML讀取函數2 var agt = navigator.userAgent.toLowerCase();3 var is_opera = (agt.indexOf("opera") != -1);4 var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_opera;5 var is_ie5 = (agt.indexOf("msie 5") != -1) && document.all;
2、創(chuàng )建請求（GET和POST）1 //創(chuàng )建Get請求 2 function StartGETRequest(url, handler) 3 { 4 xmlhttp = null; 5 if (is_ie) { 6 var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"; 7 try { 8 xmlhttp = new ActiveXObject(control); 9 } catch(e) {10 alert("You need to enable active scripting and activeX controls");11 DumpException(e);12 }13 } else {14 xmlhttp = new XMLHttpRequest();15 }16 xmlhttp.onreadystatechange = function() {handler();}17 if (url.indexOf("?") != -1){18 var urltemp = url + "&rand=" + UniqueNum();19 } else {20 var urltemp = url + "?rand=" + UniqueNum();21 }22 xmlhttp.open(‘GET‘, urltemp, true);23 xmlhttp.send(null);24 }25 26 //創(chuàng )建POST請求27 function StartPOSTRequest(url, data, handler)28 {29 xmlhttp = null;30 if (is_ie) {31 var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";32 try {33 xmlhttp = new ActiveXObject(control);34 } catch(e) {35 alert("You need to enable active scripting and activeX controls");36 DumpException(e);37 }38 } else {39 xmlhttp = new XMLHttpRequest();40 }41 xmlhttp.onreadystatechange = function() {handler();}42 xmlhttp.open(‘POST‘, url, true);43 if (typeof(xmlhttp.setRequestHeader) != "undefined") {44 xmlhttp.setRequestHeader(‘Content-Type‘, ‘a(chǎn)pplication/x-www-form-urlencoded; Charset=GB2312‘);45 }46 xmlhttp.send(data);47 }
1 2 function getCommentHtmlList(qid, aid) 3 { 4 var strText; 5 if (xmlhttp.readyState == 4){ 6 if (xmlhttp.status == 200){ 7 strText = xmlhttp.responseText;//接受文本數據 8 strText = xmlhttp.responseXml;//接受Xml數據 9 document.getElementById("commentsec").innerHTML = strText; //顯示數據10 }else{11 //Alert(“網(wǎng)絡(luò )錯誤！”);12 alert("Problem: " + xmlhttp.statusText);13 }14 }15 }16
至此一個(gè)流程完畢
4、重要函數應用解釋
XMLHttpRequest
最早應用XMLHTTP的是微軟,IE（IE5以上）通過(guò)允許開(kāi)發(fā)人員在Web頁(yè)面內部使用XMLHTTP ActiveX組件擴展自身的功能,開(kāi)發(fā)人員可以不用從當前的Web頁(yè)面導航而直接傳輸數據到服務(wù)器上或者從服務(wù)器取數據。這個(gè)功能是很重要的,因為它幫助減少了無(wú)狀態(tài)連接的痛苦,它還可以排除下載冗余HTML的需要,從而提高進(jìn)程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回應是創(chuàng )建它自己的繼承XML代理類(lèi)：XMLHttpRequest類(lèi)。Konqueror (和Safari v1.2,同樣也是基于KHTML的瀏覽器)也支持XMLHttpRequest對象,而Opera也將在其v7.6x+以后的版本中支持XMLHttpRequest對象。對于大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似,方法和屬性也類(lèi)似,只是有一小部分屬性不支持。
XMLHttpRequest 對象方法 方法 描述
abort() 停止當前請求
getAllResponseHeaders() 作為字符串返問(wèn)完整的headers
getResponseHeader("headerLabel") 作為字符串返問(wèn)單個(gè)的header標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設置未決的請求的目標 URL, 方法, 和其他參數
send(content) 發(fā)送請求
setRequestHeader("label", "value") 設置header并和請求一起發(fā)送
onreadystatechange 狀態(tài)改變的事件觸發(fā)器
readyState 對象狀態(tài)(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
responseText 服務(wù)器進(jìn)程返回數據的文本版本
responseXML 服務(wù)器進(jìn)程返回數據的兼容DOM的XML文檔對象
status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"
statusText 服務(wù)器返回的狀態(tài)文本信息
3．AJAX的好處：
1、減輕服務(wù)器的負擔，減少帶寬消耗
因為Ajax的根本理念是“按需取數據”，所以最大可能在減少了冗余請求和響影對服務(wù)器造成的負擔；也可以把以前的一些服務(wù)器負擔的工作轉嫁到客戶(hù)端，利于客戶(hù)端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負擔，節約空間和帶寬租用成本；
2、無(wú)刷新更新頁(yè)面，減少用戶(hù)實(shí)際和心理等待時(shí)間；
首先，“按需取數據”的模式減少了數據的實(shí)際讀取量。
其次，即使要讀取比較大的數據，也不用像RELOAD一樣出現白屏的情況，由于A(yíng)jax是用XMLHTTP發(fā)送請求得到服務(wù)端應答數據，在不重新載入整個(gè)頁(yè)面的情況下用javascript操作DOM最終更新頁(yè)面的，所以在讀取數據的過(guò)程中，用戶(hù)所面對的也不是白屏，而是原來(lái)的頁(yè)面狀態(tài)（或者可以加一個(gè)LOADING的提示框讓用戶(hù)了解數據讀取的狀態(tài)），只有當接收到全部數據后才更新相應部分的內容，而這種更新也是瞬間的，用戶(hù)幾乎感覺(jué)不到。
3、基于標準化并被廣泛支持，不需要插件或下載小程序；
實(shí)際驗證，目前支持的瀏覽器是IE5以上，Opera（對post處理有點(diǎn)問(wèn)題），Mozilla Firefox等。并且在加載的時(shí)候不會(huì )提示用戶(hù)需要下載程序，減少用戶(hù)的反感。
4、Ajax使WEB中的界面與應用分離（也可以說(shuō)是數據與呈現分離）；
4．AJAX的問(wèn)題：
1、一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax；
2、用javascript作的Ajax引擎，javascript的兼容性和DeBug都是讓人頭痛的事；
3、Ajax的無(wú)刷新重載，由于頁(yè)面的變化沒(méi)有刷新重載那么明顯，所以容易給用戶(hù)帶來(lái)困擾――用戶(hù)不太清楚現在的數據是新的還是已經(jīng)更新過(guò)的；現有的解決有：在相關(guān)位置提示、數據更新的區域設計得比較明顯、數據更新后給用戶(hù)提示等；
4、對流媒體的支持沒(méi)有FLASH、Java Applet好；
5．使用中遇到的問(wèn)題：
1、編碼問(wèn)題：
我們的網(wǎng)頁(yè)編碼都是使用的GB2312格式，但是在默認的情況下AJAX使用的UTF-8格式的數據，這樣就給我們在數據的保存方面造成問(wèn)題，需要轉碼。
例子：知識人最終頁(yè)面的評論交互。
比如php下可以用 mb_convert_encoding("中國","UTF-8","GB2312") 將漢字轉成 UTF-8編碼，或者(iconv也可)
6．網(wǎng)絡(luò )里面關(guān)于ajax的說(shuō)法
1、對搜索引擎的支持不好
2、編寫(xiě)復雜、容易出錯，調試器難找，幾乎沒(méi)有，只有這個(gè)SplineTech JavaScript HTML Debugger， 地址：http://www.remotedebugger.com/javascript_debugger/javascript_debugger.asp
3、冗余代碼更多了，層層包含js文件是AJAX的通病，再加上以往的很多服務(wù)端代碼現在放到了客戶(hù)端，所以每次打開(kāi)一個(gè)頁(yè)面會(huì )包含很多的無(wú)用的js文件也一同下載下來(lái)。
4、破壞了Web的原有標準，<span onclick="location.href=‘detail/‘;">點(diǎn)擊查看全部</a>，這個(gè)可以替代A標簽。
5、XML只是用來(lái)打幌子，xml有一個(gè)致命的缺點(diǎn)，那就是加載的資源耗費，這好像是所有平臺下xml的通病。google map沒(méi)有用xml，而是用了原生的javascript數組。
6.同時(shí)要注意緩存的問(wèn)題
>>CODE
1 <script language=javascript> 2 var agt = navigator.userAgent.toLowerCase(); 3 var is_opera = (agt.indexOf("opera") != -1); 4 var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_opera; 5 var is_ie5 = (agt.indexOf("msie 5") != -1) && document.all; 6 7 var thisObj=document.getElementById("TAG_USER_STOCK"); 8 9 10 function StartGETRequest(url,page,tag)11 {12 thisObj=document.getElementById(tag);13 xmlhttp = null;14 if (is_ie) {15 var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";16 try {17 xmlhttp = new ActiveXObject(control);18 } catch(e) {19 alert("You need to enable active scripting and activeX controls");20 DumpException(e);21 }22 } else {23 xmlhttp = new XMLHttpRequest();24 }25 xmlhttp.onreadystatechange = getCommentHtmlList;26 27 url=url+"?page="+page;28 29 xmlhttp.open(‘GET‘, url, true);30 xmlhttp.send(null);31 }32 function getCommentHtmlList()33 {34 var strText;35 if (xmlhttp.readyState == 4){36 if (xmlhttp.status == 200){37 strText = xmlhttp.responseText;//接受文本數據38 thisObj.innerHTML = strText; //顯示數據39 }else{40 alert("Problem: " + xmlhttp.statusText);41 }42 }43 }44 </script>45
聯(lián)系客服
