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

编程问答

ajax使用总结

發布時間：2025/7/14 编程问答 29 豆豆

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

Ajax使用總結

關鍵字: ajax

一.概述

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

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

二.常見問題

1.緩存問題

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

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

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

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

2.中文問題

老生常談的問題了，在Ajax中的中文問題，一般來說表現為兩個方面：1.發送異步請求時參數的中文問題；2.請求響應數據的中文問題。

⑴參數中文問題

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

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

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

response.setContentType("text/xml");

response.setCharacterEncoding("GB2312");

當提交方式為POST時，一定要設置成UTF-8，否則會出現亂碼：

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

當提交方式為GET時，則要設置成GB2312或者GBK，否則會出現亂碼：

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

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

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

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

(2)響應中文問題

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

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

3.并發請求問題

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

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

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

4.返回JavaScript問題

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

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

二.注意

1.提示的必要性

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

2.請求超時的必要性

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

三.技巧

1.加速應用

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

優化的方案：

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

n???????? 使用類似jsmin的工具移除注釋、空白以及多余的空行等，以減少網絡傳輸的數據量；

n???????? 在web服務端應用gzip compression 壓縮。

關于HTTP Compression，則是優化Ajax最為關鍵的部分。我們可以應用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屬性設置應用壓縮的Mime Type類型。最著名的Apache服務器也提供了mod_deflate 等模塊提供類似的壓縮配置。

2.使用JSon

很多人都在網上說，Ajax不如修改為Ajaj，也就是把XML弄“下崗”，然后由JSon作為響應數據回傳給用戶。由于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":"天才"