ajax使用总结
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可參考以下代碼：
?
<script language="javascript" type="text/javascript">
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"
????????????? }
?????? ],
?????? "type":"dirk nowitzki"
};
alert(d.type);
alert(d.msg[0].msg);
alert(d.msg.length);
for (var o in d) {
?????? alert(d[o]);
}
</script>
轉(zhuǎn)載于:https://blog.51cto.com/13423770746/347212
總結(jié)
- 上一篇： 删除HTML代码
- 下一篇： 《深入浅出设计模式-中文版》读书笔记-工