快捷導(dǎo)航

ajax以及一些亂碼問(wèn)題

更新時(shí)間：2010年08月21日 15:48:20 作者：

很就以前在使用AJAX的時(shí)候，那時(shí)候還不知道AJAX。于是在任務(wù)中被AJAX的亂碼問(wèn)題搞的頭破血流。

創(chuàng)建xmlhttprequest 對(duì)象。

return window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

次對(duì)象一個(gè) onreadystatechange 事件。有兩個(gè)屬性readyState，status。簡(jiǎn)單的AJAX我們將使用到這幾個(gè)東西。
以下使用到的createXMLHttp()方法就是上面這段代碼！
1：以GET方式發(fā)出一個(gè)請(qǐng)求的實(shí)現(xiàn);

復(fù)制代碼代碼如下:

 
var get = function(url, b, callback){ 
var xmlhttp = createXMLHttp(); 
xmlhttp.onreadystatechange = function(){ 
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
callback(xmlhttp.responseText); 
} 
} 
if(b != undefined){ 
var arr=[],e; 
for( e in b ){ 
arr.push(e + '=' + encodeURIComponent(b[e])); 
//arr.push(e + '=' + b[e]); 
// 經(jīng)過(guò)測(cè)試如果不使用 encodeURIComponent 編碼在IE8下無(wú)法正確傳遞中文 
} 
url += '?' + arr.join('&'); 
} 
xmlhttp.open('GET', url, true); 
xmlhttp.send(); 
} 

// 具體這個(gè)函數(shù)的參數(shù)設(shè)置也可以根據(jù)自己的習(xí)慣來(lái)設(shè)置 

使用GET方式去發(fā)送一個(gè)請(qǐng)求，我們是把要傳遞的參數(shù)格式化(a=1,b=2) 以后附加到URL的后面。
服務(wù)器頁(yè)面使用獲取URL參數(shù)的方式即可獲得。(比如Php: $_GET["a"]);
值得注意的是我們?cè)诟袷交瘏?shù)的時(shí)候使用到一個(gè) encodeURIComponent（）方法進(jìn)行了編碼是為了不出現(xiàn)亂碼；
其實(shí)有3個(gè)方法可以完成這個(gè)工作。escape,encodeURI,encodeURIComponent,大家可以查下資料。前兩個(gè)方法對(duì)于一些特殊字符還是沒(méi)有進(jìn)行編碼。
所以使用第3個(gè)是比較好的選擇了。
如果你不使用編碼直接發(fā)送數(shù)據(jù)，各個(gè)瀏覽器的表現(xiàn)可能不一樣。比如IE你在發(fā)送中文數(shù)據(jù)的時(shí)候就會(huì)出現(xiàn)亂碼（當(dāng)然出現(xiàn)亂碼的情況還很多，請(qǐng)接著看..）。

2：以POST方法發(fā)送一個(gè)請(qǐng)求的實(shí)現(xiàn)

復(fù)制代碼代碼如下:

 
var ajax = function(a){ 
var xmlhttp = createXMLHttp(); 
xmlhttp.onreadystatechange = function(){ 
if(xmlhttp.readyState == 4 && xmlhttp.status == 200 ){ 
a.success(xmlhttp.responseText); 
} else return xmlhttp; 
} 
xmlhttp.open('POST', a.url, true); 
// 請(qǐng)求為post的時(shí)候 必須設(shè)置頭信息 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
// 序列化要發(fā)送的數(shù)據(jù) 
var c = []; 
for(var e in a.data){ 
c.push(e + '=' + encodeURIComponent(a.data[e])); 
// 經(jīng)過(guò)測(cè)試 經(jīng)過(guò)URL編碼以后更能夠保證發(fā)送數(shù)據(jù)的正確性。 
　　　　　　//不編碼可能造成部分特殊字符不能正確發(fā)送 
} 
a.data = c.join('&'); 
xmlhttp.setRequestHeader("Content-length", c.length); // 好像是可選 
xmlhttp.setRequestHeader("Connection", "close"); // 好像是可選 
xmlhttp.send(a.data); 
// 次數(shù)據(jù)發(fā)送以后服務(wù)端 使用 post 獲取數(shù)據(jù) 比如php $_POST['a']; 
} 

參數(shù)a是一個(gè)對(duì)象他包含 {url:"http:...",data:{a:1,b2},success:function(){}}
　　　　　　　　　　　　　地址數(shù)據(jù) 成功回調(diào)函數(shù)　　
使用POST方法發(fā)出請(qǐng)求。數(shù)據(jù)也必須格式化(a=1,b=2) ；不過(guò)跟GET方法不一樣的地方是我們是把數(shù)據(jù)寫(xiě)在了send（）方法里（xmlhttp.send(a.data);）。
服務(wù)器頁(yè)面使用獲取表單數(shù)據(jù)的方式即可獲得。(比如Php: $_POST["a"]);
值得注意的是在使用post發(fā)送請(qǐng)求的時(shí)候我們必須設(shè)置請(qǐng)求的頭信息。
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
經(jīng)過(guò)測(cè)試如果不設(shè)置Content-type為application/x-www-form-urlencoded；服務(wù)器頁(yè)面是無(wú)法獲取到通過(guò)send()方法發(fā)送的數(shù)據(jù)。

最后關(guān)于亂碼的問(wèn)題。上面已經(jīng)有兩個(gè)地方會(huì)出現(xiàn)錯(cuò)誤了。
1：比如參數(shù)沒(méi)有進(jìn)行編碼直接傳遞，會(huì)出現(xiàn)傳遞不成功的問(wèn)題。
2：在使用POST方法的時(shí)候沒(méi)有設(shè)置Content-type，服務(wù)器頁(yè)面無(wú)法獲取發(fā)送過(guò)來(lái)的參數(shù)；
3：發(fā)送請(qǐng)求頁(yè)面與請(qǐng)求頁(yè)面的編碼問(wèn)題。在標(biāo)準(zhǔn)瀏覽器下請(qǐng)一定保持請(qǐng)求頁(yè)面和被請(qǐng)求頁(yè)面的編碼方式是utf-8，不然中文會(huì)很悲劇。

復(fù)制代碼代碼如下:

 
<!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />--> 
<!--// 經(jīng)過(guò)測(cè)試 不使用上面的meta 申明charset在IE下會(huì)出現(xiàn)亂碼--> 
<!-- 
* header("Content-Type: text/html; charset=gb2312"); 
被調(diào)用的AJAX頁(yè)面使用了gb2312的編碼 在chorme下出現(xiàn)了亂碼。 
在IE下正常訪問(wèn) 
--> 

上面這里出現(xiàn)亂碼的情況非常亂，不好排除。所以保持兩個(gè)頁(yè)面編碼為UTF-8 參數(shù)編碼后在傳遞?？梢杂行Х乐箒y碼
我測(cè)試的幾個(gè)文件打包 http://xiazai.jb51.net/201008/yuanma/ajax_php.rar

您可能感興趣的文章: