您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么用js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么用js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
一、純js實(shí)現(xiàn)的Ajax實(shí)例:
var ajax = function() {}; ajax.prototype = { request: function(method, url, callback, postVars) { var xhr = this.createXhrObject(); xhr.onreadystatechange = function() { if (xhr.readyState !== 4) return; (xhr.status === 200) ? callback.success(xhr.responseText, xhr.responseXML) : callback.failure(xhr,status); }; if (method !== "POST") { url += "?" + JSONStringify(postVars); postVars = null; } xhr.open(method, url, true); xhr.send(postVars); }, createXhrObject: function() { var methods = [ function() { return new XMLHttpRequest(); }, function() { return new ActiveXObject("Msxml2.XMLHTTP"); }, function() { return new ActiveXObject("Microsoft.XMLHTTP"); } ], i = 0, len = methods.length; for (; i < len; i++) { try { methods[i]; } catch(e) { continue; } this.createXhrObject = methods[i]; return methods[i]; } throw new Error("ajax created failure"); }, JSONStringify: function(obj) { return JSON.stringify(obj).replace(/"|{|}/g, "") .replace(/b:b/g, "=") .replace(/b,b/g, "&"); } };
二、jQuery $.ajax概述
出現(xiàn)JQuery后,使AJAX變得更加容易實(shí)現(xiàn)。
JQuery中,AJAX的高層實(shí)現(xiàn)主要有$.get(),$.post()等,下面詳細(xì)介紹一下$.ajax()的使用方法
1、請(qǐng)求頁面AJAX.aspx
js代碼如下:
<script type="text/javascript"> function Text_ajax() { $.ajax( { type:"GET",//通常會(huì)用到兩種:GET,POST。默認(rèn)是:GET url:"ResponseText.aspx",//(默認(rèn): 當(dāng)前頁地址) 發(fā)送請(qǐng)求的地址 dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。 beforeSend:beforeSend, //發(fā)送請(qǐng)求 success:callback, //請(qǐng)求成功 error:error,//請(qǐng)求出錯(cuò) complete:complete//請(qǐng)求完成 }); } function error(XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個(gè)有值 $("#showResult").append("<div>請(qǐng)求出錯(cuò)啦!</div>"); } function complete(XMLHttpRequest, textStatus) { $("#showResult").append("<div>請(qǐng)求完成</div>"); } function beforeSend(XMLHttpRequest) { $("#showResult").append("<div>發(fā)送請(qǐng)求…..<div>"); } function callback(msg) { $("#showResult").append("<div>請(qǐng)求成功,回傳數(shù):"+msg+"<div>"); } </script>
html代碼如下:
<input value="Text_ajax函數(shù)" type="button" onclick="Text_ajax()"/> <div id="showResult"> </div>
響應(yīng)頁面JQueryAJAX.aspx
后臺(tái)代碼:
protected void Page_Load(object sender, EventArgs e) { Response.Write("呵呵!測(cè)試成功啦!"); }
三、關(guān)于jQuery Ajax中文亂碼問題
方法一:提交前采用encodeURI兩次編碼,記住一定是兩次
1.修改以下代碼
data:{id:1, type:encodeURI(encodeURI('商品'))}
2.在后臺(tái)action里要對(duì)取得的字符串進(jìn)行decode
String type = request.getParameter("type"); type = URLDecoder.decode(type, "UTF-8");
方法二:ajax配置contentType屬性,加上charset=UTF-8
在ajax方法中加入以下參數(shù)
contentType: "application/x-www-form-urlencoded; charset=UTF-8″
使用其它js框架或者xhr都是差不多,設(shè)置header中contentType即可,
這里關(guān)鍵是charset=UTF-8,如果沒有這個(gè),是不行的,默認(rèn)jQuery里的contentType是沒有的.
此外還需要補(bǔ)充一下jQuery里對(duì)參數(shù)已經(jīng)進(jìn)行了一次encodeURIComponent的處理。
相比較而言,方法二在action里不需要進(jìn)行decode,所以推薦使用此方法.
讀到這里,這篇“怎么用js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。