這篇文章主要介紹了ajax中一些亂碼問題的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、成都做網(wǎng)站與策劃設(shè)計,仁壽網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:仁壽等地區(qū)。仁壽做網(wǎng)站價格咨詢:028-86922220創(chuàng)建xmlhttprequest 對象。
復(fù)制代碼 代碼如下:
return window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
次對象一個 onreadystatechange 事件。有兩個屬性readyState,status。簡單的AJAX我們將使用到這幾個東西。
以下使用到的createXMLHttp()方法就是上面這段代碼!
1:以GET方式發(fā)出一個請求的實現(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)過測試如果不使用 encodeURIComponent 編碼在IE8下無法正確傳遞中文
}
url += '?' + arr.join('&');
}
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
// 具體這個函數(shù)的參數(shù)設(shè)置也可以根據(jù)自己的習(xí)慣來設(shè)置
使用GET方式去發(fā)送一個請求,我們是把要傳遞的參數(shù)格式化(a=1,b=2) 以后附加到URL的后面。
服務(wù)器頁面使用獲取URL參數(shù)的方式即可獲得。(比如Php: $_GET["a"]);
值得注意的是我們在格式化參數(shù)的時候 使用到一個 encodeURIComponent()方法進行了編碼是為了不出現(xiàn)亂碼;
其實有3個方法可以完成這個工作。escape,encodeURI,encodeURIComponent,大家可以查下資料。前兩個方法對于一些特殊字符還是沒有進行編碼。
所以使用第3個是比較好的選擇了。
如果你不使用編碼直接發(fā)送數(shù)據(jù),各個瀏覽器的表現(xiàn)可能不一樣。比如IE你在發(fā)送中文數(shù)據(jù)的時候就會出現(xiàn)亂碼(當(dāng)然出現(xiàn)亂碼的情況還很多,請接著看..)。
2:以POST方法發(fā)送一個請求的實現(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);
// 請求為post的時候 必須設(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)過測試 經(jīng)過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是一個對象 他包含 {url:"http:...",data:{a:1,b2},success:function(){}}
地址 數(shù)據(jù) 成功回調(diào)函數(shù)
使用POST方法發(fā)出請求。數(shù)據(jù)也必須格式化(a=1,b=2) ;不過跟GET方法不一樣的地方是 我們是把數(shù)據(jù)寫在了send()方法里(xmlhttp.send(a.data);)。
服務(wù)器頁面使用獲取表單數(shù)據(jù)的方式即可獲得。(比如Php: $_POST["a"]);
值得注意的是在使用post發(fā)送請求的時候 我們必須設(shè)置請求的頭信息。
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
經(jīng)過測試如果不設(shè)置Content-type為application/x-www-form-urlencoded;服務(wù)器頁面是無法獲取到通過send()方法發(fā)送的數(shù)據(jù)。
最后 關(guān)于亂碼的問題。上面已經(jīng)有兩個地方會出現(xiàn)錯誤了。
1:比如參數(shù)沒有進行編碼直接傳遞,會出現(xiàn)傳遞不成功的問題。
2:在使用POST方法的時候沒有設(shè)置Content-type,服務(wù)器頁面無法獲取發(fā)送過來的參數(shù);
3:發(fā)送請求頁面與請求頁面的編碼問題。在標(biāo)準(zhǔn)瀏覽器下請一定保持請求頁面和被請求頁面的編碼方式是utf-8,不然中文會很悲劇。
復(fù)制代碼 代碼如下:
上面這里出現(xiàn)亂碼的情況非常亂,不好排除。所以保持兩個頁面編碼為UTF-8 參數(shù)編碼后在傳遞??梢杂行Х乐箒y碼
感謝你能夠認真閱讀完這篇文章,希望小編分享的“ajax中一些亂碼問題的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!