Ajax與使用Ajax時產(chǎn)生的亂碼問題—URL編碼

（一）Ajax

一、Ajax詳解

在學習HTTP協(xié)議的時候，我們知道，HTTP協(xié)議基于請求響應模型，一次請求對應一次響應，請求只能由客戶端發(fā)出，服務器只能被動的等待請求。

但我們經(jīng)常見到如下的功能：

網(wǎng)絡聊天室里，聊天信息，不需要刷新頁面就可以接受最新的聊天消息。

網(wǎng)站注冊時，輸入用戶名后無需提交立即提示用戶名已經(jīng)存在。

百度輸入搜索條件時，根據(jù)輸入的不同提示不同的備選查詢內(nèi)容。

在這些應用場景中，我們沒有刷新網(wǎng)頁，卻獲取到了服務器發(fā)回的最新數(shù)據(jù)。這不是很明顯的違反了HTTP協(xié)議了嗎？

其實這不是違反了HTTP協(xié)議，而是使用了一種“另類”的技術，叫做AJAX（Asynchronous JavaScript and XML）。改變了傳統(tǒng)方式的同步刷新方式，改為了異步刷新—即在保持當前頁面的情況下，異步發(fā)出請求等待響應，再根據(jù)得到的響應消息修改當前頁面。

Ajax并不是一項新技術,其實是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

XMLHttpRequest對象方法

XMLHttpRequest對象屬性

JS方法實現(xiàn)Ajax：

//1 創(chuàng)建XMLHttpRequest對象function ajaxFunction(){var xmlHttp;try{ // Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch (e){}}}return xmlHttp;}//2.服務器端向客戶端進行響應(注冊監(jiān)聽)var data = null;var xhr = ajaxFunction();xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200||xhr.status==304){data = xhr.responseText;}}}readyState 屬性表示Ajax請求的當前狀態(tài)。它的值用數(shù)字代表。0 代表未初始化。 還沒有調(diào)用 open 方法1 代表正在加載。 open 方法已被調(diào)用，但 send 方法還沒有被調(diào)用2 代表已加載完畢。send 已被調(diào)用。請求已經(jīng)開始3 代表交互中。服務器正在發(fā)送響應4 代表完成。響應發(fā)送完畢xhr.status常用狀態(tài)碼及其含義：404 沒找到頁面(not found)403 禁止訪問(forbidden)500 內(nèi)部服務器出錯(internal service error)200 一切正常(ok)304 沒有被修改(not modified)(服務器返回304狀態(tài)，表示源文件沒有被修改 )xhr.responseText 服務器發(fā)回的響應結(jié)果,字符串xhr.responseXML 服務器返回的響應結(jié)果,XML對象//3 客戶端與服務器端建立連接* 使用的是XMLHttpRequest對象的open(method, url, asynch)方法* * method：請求類型，類似 “GET”或”POST”的字符串。* * url：路徑字符串，指向你所請求的服務器上的那個文件。可以是絕對路徑或相對路徑。* * asynch：表示請求是否要異步傳輸，默認值為true(異步)。xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=19",true);//4 客戶端向服務器端發(fā)送請求* * 使用的是XMLHttpRequest對象的send()方法* * 如果請求類型是GET方式的話，使用send()方法發(fā)送請求數(shù)據(jù)，服務器端接收不到* * 該步驟不能被省略，只能寫成xhr.send(null);*/xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");~GET方式：xhr.send(null); //xhr.send(null);~POST方式：如果請求類型是POST的話，需要設置請求首部信息xhr.send("a=7&b=8");

JQuery方式實現(xiàn)Ajax

JQuery詳解：http://blog.csdn.net/chou_out_man/article/details/78585875

$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );} });$.get("test.php?name=John&location=Boston", function(data){alert("Data Loaded: " + data); });$.post("test.php",{"name":"John","location":"Boston"}, function(data){alert("Data Loaded: " + data); })

（二）使用Ajax時產(chǎn)生的亂碼問題—URL編碼

一、詳解

瀏覽器與服務器之間是通過Http協(xié)議通信的 ， 但是Http協(xié)議只支持ISO-8859-1編碼 ， 所以理論上來說 ， Http協(xié)議只能處理ISO-8859-1碼表中具有的字符 ， 不能處理中文

URL編碼—解決Http協(xié)議攜帶中文的問題

通過URL編碼 ， 客戶端將非ISO-8859-1編碼的字符轉(zhuǎn)換為URL編碼格式發(fā)送給服務器 ， 服務器收到之后在進行URL解碼 ， 就可以得到正確的字符了 。

URL編碼過程：

對于ISO-8859-1中有的字符不作處理 ， 原樣輸出

對于ISO-8859-1中沒 有的字符 ， 先按照制定碼表將字符轉(zhuǎn)換為字節(jié)

中 111100001110101010101100 國 110101011011010100110001

再將每個字節(jié)轉(zhuǎn)換為16進制表示的方式

中 11110000 -> f011101010 -> ea10101100 -> ac 國 11010101 -> d510110101 -> b500110001 -> 31

再在每一個之前加上% ，就得到了 URL編碼格式

中 11110000 -> %f011101010 -> %ea10101100 -> %ac 國 11010101 -> %d510110101 -> %b500110001 -> %31 中國 ->%F0%EA%AC%D5%B5%31

一般情況下 ， 瀏覽器和服務器會自動進行URL編碼和解碼 ， 并不需要程序員手動進行編解碼 。

但是在一些特別的場景下 ， 例如：AJAX發(fā)送數(shù)據(jù)時 ， 瀏覽器不再自動幫我們編碼 ， 需要我們手動進行URL編解碼 操作

java中進行URL編解碼：URLEncoder.encoder(str , encode);//編碼URLDecoder.decode(str , encode);//解碼 jq中進行URL編解碼：$.param(myObject);

總結(jié)

以上是生活随笔為你收集整理的大数据WEB阶段（十一）Ajax、URL编码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。