ajax我們經常會用到的，但網上找到的大部份ajax兼容性都不強，下面自己改了一個不錯的兼容性很強的ajax函數，同時后面介紹的jquery ajax 兼容性也很強。
一、純js實現的Ajax實例：
復制代碼 代碼如下:
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概述
出現JQuery后，使AJAX變得更加容易實現。
JQuery中，AJAX的高層實現主要有$.get(),$.post()等，下面詳細介紹一下$.ajax()的使用方法
1、請求頁面AJAX.aspx
js代碼如下：
復制代碼 代碼如下:
script type="text/javascript">
function Text_ajax()
{
$.ajax(
{
type:"GET",//通常會用到兩種：GET,POST。默認是：GET
url:"ResponseText.aspx",//(默認: 當前頁地址) 發(fā)送請求的地址
dataType:"html",//預期服務器返回的數據類型。
beforeSend:beforeSend, //發(fā)送請求
success:callback, //請求成功
error:error,//請求出錯
complete:complete//請求完成
});
}
function error(XMLHttpRequest, textStatus, errorThrown)
{
// 通常情況下textStatus和errorThown只有其中一個有值
$("#showResult").append("div>請求出錯啦！/div>");
}
function complete(XMLHttpRequest, textStatus)
{
$("#showResult").append("div>請求完成/div>");
}
function beforeSend(XMLHttpRequest)
{
$("#showResult").append("div>發(fā)送請求…..div>");
}
function callback(msg)
{
$("#showResult").append("div>請求成功，回傳數:"+msg+"div>");
}
/script>
html代碼如下：
復制代碼 代碼如下:
input value="Text_ajax函數" type="button" onclick="Text_ajax()"/>
div id="showResult">
/div>
響應頁面JQueryAJAX.aspx
后臺代碼：
復制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("呵呵！測試成功啦！");
}
三、關于jQuery Ajax中文亂碼問題
方法一:提交前采用encodeURI兩次編碼,記住一定是兩次
1.修改以下代碼
復制代碼 代碼如下:
data:{id:1, type:encodeURI(encodeURI('商品'))}
2.在后臺action里要對取得的字符串進行decode
復制代碼 代碼如下:
String type = request.getParameter("type");
type = URLDecoder.decode(type, "UTF-8");
方法二:ajax配置contentType屬性,加上charset=UTF-8
在ajax方法中加入以下參數
復制代碼 代碼如下:
contentType: "application/x-www-form-urlencoded; charset=UTF-8″
使用其它js框架或者xhr都是差不多,設置header中contentType即可,
這里關鍵是charset=UTF-8,如果沒有這個,是不行的,默認jQuery里的contentType是沒有的.
此外還需要補充一下jQuery里對參數已經進行了一次encodeURIComponent的處理。
相比較而言，方法二在action里不需要進行decode,所以推薦使用此方法.
希望本文所述對大家的Ajax程序設計有所幫助。
您可能感興趣的文章:- JS Ajax請求如何防止重復提交
- jQuery通過ajax請求php遍歷json數組到table中的代碼(推薦)
- 原生 JS Ajax,GET和POST 請求實例代碼
- 實例講解使用原生JavaScript處理AJAX請求的方法
- SpringMVC環(huán)境下實現的Ajax異步請求JSON格式數據
- 詳解JavaScript for循環(huán)中發(fā)送AJAX請求問題
- js實現對ajax請求面向對象的封裝
- js與jQuery終止正在發(fā)送的ajax請求的方法
- django通過ajax發(fā)起請求返回JSON格式數據的方法
- JSONP跨域GET請求解決Ajax跨域訪問問題
- Javascript發(fā)送AJAX請求實例代碼
