當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ajax使用总结

發(fā)布時間：2025/7/14 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax使用总结小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Ajax使用總結(jié)

關(guān)鍵字: ajax

一.概述

使用Ajax有兩個月的時間了，從簡單應(yīng)用到復(fù)雜應(yīng)用都做了一些，分別應(yīng)用到了系統(tǒng)的兩個模塊中，趁著空閑時間，對Ajax使用中的問題和解決進行一下總結(jié)。

本文不對任何Ajax框架進行討論，僅僅針對一些使用技巧和基本問題解決進行分析。同樣不對Ajax技術(shù)進行討論，因為對Ajax的技術(shù)介紹可以在網(wǎng)上搜索到一堆。

二.常見問題

1.緩存問題

出現(xiàn)這個問題主要是因為發(fā)起Http請求的時候，IE包辦了Cache策略，很多時候明明更新了數(shù)據(jù)，但卻無法獲得更新后的數(shù)據(jù)。

網(wǎng)上有一些解決此問題的方法，比如在URL后邊加隨機數(shù)，但這仍然不是一個好的解決辦法。

比較好的解決方法是：前臺在提交數(shù)據(jù)以后，需要強制更新數(shù)據(jù)的時候，給XMLHttp對象加入：

xmlhttp.setRequestHeader("If-Modified-Since", "0");

2.中文問題

老生常談的問題了，在Ajax中的中文問題，一般來說表現(xiàn)為兩個方面：1.發(fā)送異步請求時參數(shù)的中文問題；2.請求響應(yīng)數(shù)據(jù)的中文問題。

⑴參數(shù)中文問題

一般來說，參數(shù)的中文問題解決起來主要依賴于使用的環(huán)境，而且依賴于環(huán)境所使用的編碼方式，而并不像網(wǎng)上的一些文章寫的那樣。

用XMLHTTP對象Post表單的時候，是默認的用UTF-8字符來發(fā)送的。如果你的網(wǎng)頁本來就是用的UTF-8編碼的話，那么接收到的數(shù)據(jù)是正常的；如果你的網(wǎng)頁編碼是GB2312的話，問題就來了，POST過來的數(shù)據(jù)是UTF-8，而你整個站點是用GB2312來顯示，那么所有的中文字符將全部變成亂碼。

當使用Servlet接收請求參數(shù)時，最好先加入：

response.setContentType("text/xml");

response.setCharacterEncoding("GB2312");

當提交方式為POST時，一定要設(shè)置成UTF-8，否則會出現(xiàn)亂碼：

String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "utf-8");

當提交方式為GET時，則要設(shè)置成GB2312或者GBK，否則會出現(xiàn)亂碼：

String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "GB2312");

當使用JSP接收請求參數(shù)時，需要先將請求接收頁的編碼方式修改為UTF-8，然后將中文請求參數(shù)進行兩次encodeURI操作，如：encodeURI(encodeURI(form["name"].value))。最后使用下邊的語句接收中文參數(shù)：

String name = java.net.URLDecoder.decode(request.getParameter("name"), "UTF-8");

另外，當使用Struts框架接收中文參數(shù)的時候，最好也使用上述雙重encodeURI的方法。

(2)響應(yīng)中文問題

responseText中的中文出現(xiàn)亂碼，是因為xmlhttp在處理返回的responseText的時候，是把resposeBody按UTF-8編碼進解碼形成的，如果服務(wù)器送出的確實是UTF-8的數(shù)據(jù)流的時候漢字會正確顯示，而送出了GBK編碼流的時候就亂了。解決方法就是在送出的流里面加header，指明送出的是什么編碼流，這樣xmlhttp就正常了。

response.setHeader("Charset", "GB2312");

3.并發(fā)請求問題

使用Ajax的時候，通常有一些頁面可能會同時發(fā)送多個異步請求，在這里我把它叫做并發(fā)的異步請求，其實這并不能算做一個問題，但很多時候，編碼者為了節(jié)省代碼書寫量，而只構(gòu)造一次XMLHttpRequest對象，到處使用的話，這個問題就會出現(xiàn)，因為前面的請求還未完成，后面的請求就會把前面的請求覆蓋掉。

最簡單的解決方法是為每個異步請求分配XMLHttpRequest對象，并分別實例化（JavaScript也是可以面向?qū)ο蟮?#xff09;，這樣就可以保證每個請求都有自己獨立的XMLHttpRequest對象來進行異步訪問。

但是每次都創(chuàng)建一個新的XMLHttpRequest對象，也會造成浪費。最好的辦法就是創(chuàng)建一個XMLHttpRequset的對象池，如果池中有空閑的對象，則使用此對象，否則將創(chuàng)建一個新的對象。XMLHttpRequest對象池JavaScript代碼在附件中.

4.返回JavaScript問題

很多時候，響應(yīng)的數(shù)據(jù)希望用JavaScript處理，比如把響應(yīng)的數(shù)據(jù)用對話框的形式彈出，或者將返回數(shù)據(jù)構(gòu)造成下一步請求的參數(shù)，都需要把響應(yīng)的數(shù)據(jù)構(gòu)造成JavaScript代碼并在需要的時機調(diào)用執(zhí) 行。但是我們會發(fā)現(xiàn)，當使用響應(yīng)數(shù)據(jù)構(gòu)造新的JavaScript后，使用innerHTML方法放入DHTML層中的JavaScript是無法執(zhí)行的。這是因為，JavaScript是在頁面加載的同時進行解析的，也就是說innerHTML中的JavaScript代碼是無法被解析的。

解決這個問題需要把JavaScript代碼在層中重新解析，解析代碼在附件中.

二.注意

1.提示的必要性

??? 由于Ajax不同于原始的Web請求/響應(yīng)方式，所以提示是非常必要的，可以說可視化的提示越多越好。如果我點擊的這個東西觸發(fā)了Ajax一個動作，那么程序必須給我一個可視化的提示，告訴我有些動作正在執(zhí)行，比如loading…、數(shù)據(jù)加載等等。這樣明顯的向用戶提示出程序的動作，從而克服Ajax不再重載頁面而帶來的用戶不知操作是否進行的不便，不要讓用戶發(fā)出“這個該死的程序究竟在干什么”的牢騷。

2.請求超時的必要性

錯誤的操作或者執(zhí)行可能是在所難免的，有的時候針對DOM的一些錯誤操作，Ajax是無法給出響應(yīng)的。這樣的話，我們參考第5點完美的給出了用戶提示，如果接收不到響應(yīng)的話，那么提示將一直持續(xù)下去。這時，請求超時就非常有必要了，我們可以通過在函數(shù)調(diào)用后設(shè)置一個timer（用Javascript的ontimeout函數(shù)）來建立一個超時機制。如果沒有返回的話，這個timer就可以明確地執(zhí)行abort()（終止操作），并且通知用戶。

三.技巧

1.加速應(yīng)用

當Ajax操作時，為了方便程序的書寫，我們可能需要引入很多css樣式表或者類似JavaScript對象池和innerHTML解析等等JavaScript文件，或者prototype.js等工具性的JavaScript文件。這樣可能打開某頁面的時候，就需要下載很多的文件，這樣就會造成加載頁面的時候，需要有一個下載文件的過程。

優(yōu)化的方案：

n???????? 將多個JavaScript或者css文件整合成一個文件以減少HTTP連接數(shù)；

n???????? 使用類似jsmin的工具移除注釋、空白以及多余的空行等，以減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量；

n???????? 在web服務(wù)端應(yīng)用gzip compression 壓縮。

關(guān)于HTTP Compression，則是優(yōu)化Ajax最為關(guān)鍵的部分。我們可以應(yīng)用Web Server默認提供的機制，比如Tomcat5.x在 Connector 配置中提供的壓縮選項，一個典型的Connector配置如下：

port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25"

maxSpareThreads="75" enableLookups="false" redirectPort="8443"

acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true"

compression="on" compressableMimeType="text/html,text/xml,text/plain,text/javascript,text/css"

??? 以上配置使用compression屬性激活壓縮，然后用compressableMimeType屬性設(shè)置應(yīng)用壓縮的Mime Type類型。最著名的Apache服務(wù)器也提供了mod_deflate 等模塊提供類似的壓縮配置。

2.使用JSon

很多人都在網(wǎng)上說，Ajax不如修改為Ajaj，也就是把XML弄“下崗”，然后由JSon作為響應(yīng)數(shù)據(jù)回傳給用戶。由于JSon組織簡單、訪問方便，正被很多人接受，使用JSon可參考以下代碼：

var d = {

?????? "msg":[{

?????? ?????? "user":"dabao",

?????? ?????? "msg":"天才"

????????????? },

????????????? {

?????? ?????? "user":"dirk nowitzki",

?????? ?????? "msg":"dallas mavericks #41"

????????????? }

?????? ],

?????? "type":"dirk nowitzki"

};

alert(d.type);

alert(d.msg[0].msg);

alert(d.msg.length);

for (var o in d) {

?????? alert(d[o]);

}

</script><script language="javascript" type="text/javascript">

var d = {

?????? "msg":[{

????????????? "user":"dabao",

????????????? "msg":"天才"

????????????? },

????????????? {

????????????? "user":"dirk nowitzki",

????????????? "msg":"dallas mavericks #41"