js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請求實(shí)例
更新時(shí)間：2014年11月20日 14:19:29 投稿：shichen2014
這篇文章主要介紹了js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請求,以實(shí)例形式分別講述了采用純js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請求的方法,并對(duì)Ajax中出現(xiàn)的亂碼問題進(jìn)行了一定的分析,需要的朋友可以參考下
ajax我們經(jīng)常會(huì)用到的，但網(wǎng)上找到的大部份ajax兼容性都不強(qiáng)，下面自己改了一個(gè)不錯(cuò)的兼容性很強(qiáng)的ajax函數(shù)，同時(shí)后面介紹的jquery ajax 兼容性也很強(qiáng)。
一、純js實(shí)現(xiàn)的Ajax實(shí)例：
復(fù)制代碼 代碼如下:
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, "&");
}
};
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、請求頁面AJAX.aspx
js代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function Text_ajax()
{
$.ajax(
{
type:"GET",//通常會(huì)用到兩種：GET,POST。默認(rèn)是：GET
url:"ResponseText.aspx",//(默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址
dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
beforeSend:beforeSend, //發(fā)送請求
success:callback, //請求成功
error:error,//請求出錯(cuò)
complete:complete//請求完成
});
}
function error(XMLHttpRequest, textStatus, errorThrown)
{
// 通常情況下textStatus和errorThown只有其中一個(gè)有值
$("#showResult").append("<div>請求出錯(cuò)啦！</div>");
}
function complete(XMLHttpRequest, textStatus)
{
$("#showResult").append("<div>請求完成</div>");
}
function beforeSend(XMLHttpRequest)
{
$("#showResult").append("<div>發(fā)送請求…..<div>");
}
function callback(msg)
{
$("#showResult").append("<div>請求成功，回傳數(shù):"+msg+"<div>");
}
</script>
function Text_ajax()
{
$.ajax(
{
type:"GET",//通常會(huì)用到兩種：GET,POST。默認(rèn)是：GET
url:"ResponseText.aspx",//(默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址
dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
beforeSend:beforeSend, //發(fā)送請求
success:callback, //請求成功
error:error,//請求出錯(cuò)
complete:complete//請求完成
});
}
function error(XMLHttpRequest, textStatus, errorThrown)
{
// 通常情況下textStatus和errorThown只有其中一個(gè)有值
$("#showResult").append("<div>請求出錯(cuò)啦！</div>");
}
function complete(XMLHttpRequest, textStatus)
{
$("#showResult").append("<div>請求完成</div>");
}
function beforeSend(XMLHttpRequest)
{
$("#showResult").append("<div>發(fā)送請求…..<div>");
}
function callback(msg)
{
$("#showResult").append("<div>請求成功，回傳數(shù):"+msg+"<div>");
}
</script>
html代碼如下：
復(fù)制代碼 代碼如下:
<input value="Text_ajax函數(shù)" type="button" onclick="Text_ajax()"/>
<div id="showResult">
</div>
<div id="showResult">
</div>
響應(yīng)頁面JQueryAJAX.aspx
后臺(tái)代碼：
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("呵呵！測試成功啦！");
}
{
Response.Write("呵呵！測試成功啦！");
}
三、關(guān)于jQuery Ajax中文亂碼問題
方法一:提交前采用encodeURI兩次編碼,記住一定是兩次
1.修改以下代碼
復(fù)制代碼 代碼如下:
data:{id:1, type:encodeURI(encodeURI('商品'))}
2.在后臺(tái)action里要對(duì)取得的字符串進(jìn)行decode
復(fù)制代碼 代碼如下:
String type = request.getParameter("type");
type = URLDecoder.decode(type, "UTF-8");
type = URLDecoder.decode(type, "UTF-8");
方法二:ajax配置contentType屬性,加上charset=UTF-8
在ajax方法中加入以下參數(shù)
復(fù)制代碼 代碼如下:
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,所以推薦使用此方法.
希望本文所述對(duì)大家的Ajax程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS Ajax請求如何防止重復(fù)提交
- jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦)
- 原生 JS Ajax,GET和POST 請求實(shí)例代碼
- 實(shí)例講解使用原生JavaScript處理AJAX請求的方法
- SpringMVC環(huán)境下實(shí)現(xiàn)的Ajax異步請求JSON格式數(shù)據(jù)
- 詳解JavaScript for循環(huán)中發(fā)送AJAX請求問題
- js實(shí)現(xiàn)對(duì)ajax請求面向?qū)ο蟮姆庋b
- js與jQuery終止正在發(fā)送的ajax請求的方法
- django通過ajax發(fā)起請求返回JSON格式數(shù)據(jù)的方法
- JSONP跨域GET請求解決Ajax跨域訪問問題
- Javascript發(fā)送AJAX請求實(shí)例代碼
相關(guān)文章
kkpager 實(shí)現(xiàn)ajax分頁查詢功能
kkpager 實(shí)現(xiàn)ajax分頁查詢功能，前臺(tái)分頁數(shù)據(jù)，適合數(shù)據(jù)少量的時(shí)候，因?yàn)榉猪摰臄?shù)據(jù)是從后臺(tái)獲取的，大數(shù)據(jù)的話不建議使用 ，具體前后臺(tái)代碼大家參考下本文吧2017-08-08
Ajax讀取數(shù)據(jù)到表格的實(shí)現(xiàn)代碼
前兩篇我們講了 ajax開始的準(zhǔn)備 與及如何使用ajax技術(shù)進(jìn)行簡單的數(shù)據(jù)讀?。?/div> 2010-10-10
這篇文章主要為大家詳細(xì)介紹了輕量ajax組件編寫第三篇實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
ajax不是一種語言,而是多種技術(shù)組合在一起使用,ajax只是這幾種技術(shù)組合的代名詞2010-10-10
在本篇教程中，數(shù)據(jù)庫的表名和日志查看頁面以L-Blog為例，因?yàn)槲业牟┛统绦蚴菑腖-Blog修改而來。2006-07-07
ajax異步實(shí)現(xiàn)文件分片上傳實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于ajax異步實(shí)現(xiàn)文件分片上傳的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
AJAX = 異步 JavaScript 和 XML，AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。本文給大家?guī)砹巳娼馕鯝jax綜合應(yīng)用大全，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-06-06
用Ajax讀取XML格式的數(shù)據(jù)...2006-11-11
服務(wù)端配置實(shí)現(xiàn)AJAX跨域請求
這篇文章主要介紹了服務(wù)端配置實(shí)現(xiàn)AJAX跨域請求的相關(guān)資料,需要的朋友可以參考下2015-02-02
本文主要總結(jié)整理Ajax的一些常用的基礎(chǔ)知識(shí)，非常適合初學(xué)者。需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01最新評(píng)論