學習Jquery裏ajax如何原生態面向對象法實現

初學js，好奇jquery裏ajax的實現就看了幾篇博文，本身動手設計一個面向對象的原生態版本的ajax，以供學習之用，不足之處忘你們批評指正！

1、首先是jquery裏ajax的用法

一、$.get

$.get()方法使用GET方式來進行異步請求，它的語法結構爲：

$.get( url [, data] [, callback] )

解釋一下這個函數的各個參數：

url：string類型，ajax請求的地址。

data：可選參數，object類型，發送至服務器的key/value數據會做爲QueryString附加到請求URL中。

callback：可選參數，function類型，當ajax返回成功時自動調用該函數。

二、$.post()

$.post()方法使用POST方式來進行異步請求，它的語法結構爲：

$.post(url,[data],[callback],[type])

這個方法和$.get()用法差很少，惟獨多了一個type參數，那麼這裏就只介紹type參數吧，其餘的參考上面$.get()的。

type：type爲請求的數據類型，能夠是html,xml,json等類型，若是咱們設置這個參數爲：json，那麼返回的格式則是json格式的，若是沒有設置，就和$.get()返回的格式同樣，都是字符串的。

具體可參見博文http://www.cnblogs.com/conmecon/p/3281577.html（ps：感謝做者菜鳥程序員求成長地 提供）

 

本身面向對象法封裝的Ajax.js,能夠引用到頁面中調用，代碼以下：

var Ajax = {
xmlHttp: "",
xdr:"",
url: "",
data: "",
IsAsy:true,

//根據不一樣瀏覽器建立不一樣的ajax實例！
xmlHttpCreate: function () {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();//火狐和Opera瀏覽器或者Chrome
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//ie瀏覽器
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert(e.message);
}
}
}
return xmlHttp;
},
//實現異步跨域請求，這裏有些問題，好像跨域老是出現（No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin //'http://localhost:58575' is therefore not allowed access. The response had HTTP status code 404.）但願大神看到，能幫忙解答
CORS: function (jsonObj) {

Ajax.xdr = Ajax.CreatCORSRequest(jsonObj.method, jsonObj.url);
if (jsonObj.origin) {
Ajax.xdr.setRequestHeader("Access-Control-Allow-Origin", jsonObj.origin);
}
Ajax.xdr.onload = function () {
jsonObj.success(Ajax.xdr.responseText);
};
Ajax.xdr.onerror = function () {
alert("An error");
};
if (jsonObj.data) {
Ajax.xdr.sent(jsonObj.data);
} else {
Ajax.xdr.send(null);
}
},

//自定義get請求，能夠直接外部調用，用法如:Ajax.get({url: Ajax.addURLParam("ajax.ashx", "tom jac", "t j"),IsAsy: true,success: //function(responseText) {console.log("success:" + responseText);},error: function (reponseText) {console.log("error:" + reponseText);}})

get: function (jsonObj) {

if (jsonObj.data) {
Ajax.data = jsonObj.data;
}
Ajax.url = jsonObj.url;
if (jsonObj.IsAsy) {
Ajax.IsAsy = jsonObj.IsAsy;
}
Ajax.xmlHttp = Ajax.xmlHttpCreate();
Ajax.xmlHttp.open("get", Ajax.url, Ajax.IsAsy);
Ajax.xmlHttp.send(null);
if (Ajax.IsAsy) {
Ajax.xmlHttp.onreadystatechange = function () {

//XHR對象的readyState屬性，該屬性表示請求/響應過程當中的當前活動階段0：未初始化，1：啓動，已經調用open()方法，但未調用send();2:發送，已經調

//用send()但未接收響應；3：接收，已經接收到部分響應數據；4：完成。能夠在客戶端使用了
if (Ajax.xmlHttp.readyState == 4) {

//status的屬性200表示成功，304表示請求的資源並無修改，能夠直接使用瀏覽器中緩存的版本，響應也是有效的
if ((Ajax.xmlHttp.status >= 200 && Ajax.xmlHttp.status < 300) || Ajax.xmlHttp.status == 304) {
jsonObj.success(Ajax.xmlHttp.responseText);
} else {
jsonObj.error(Ajax.xmlHttp.responseText);
}
}
}
} else {
if ((Ajax.xmlHttp.status >= 200 && Ajax.xmlHttp.status < 300) || Ajax.xmlHttp.status == 304) {
jsonObj.success(Ajax.xmlHttp.responseText);
} else {
jsonObj.error(Ajax.xmlHttp.responseText);
}
}
},

//面向對象的post實現，用法如：

/*Ajax.post({

data: '{"a":"n"}',
url: "ajax.ashx",
success: function (reponseText) {
// console.log("success:" + reponseText);
var obj = eval("(" + reponseText + ")");
if (obj.success == "ok") {
alert("提交成功");
}
},
error: function (reponseText) {
console.log("error:" + reponseText);
}
});*/

post: function (jsonObj) {
Ajax.data = jsonObj.data;
Ajax.url = jsonObj.url;
Ajax.xmlHttp = Ajax.xmlHttpCreate();
Ajax.xmlHttp.open("post", Ajax.url, true);
Ajax.xmlHttp.setRequestHeader("Content-Type","application/x-www-from-urlencoded");
Ajax.xmlHttp.send(Ajax.data);
Ajax.xmlHttp.onreadystatechange = function () {
if (Ajax.xmlHttp.readyState == 4) {
if ((Ajax.xmlHttp.status >= 200&&Ajax.xmlHttp.status<300)||Ajax.xmlHttp.status==304) {
jsonObj.success(Ajax.xmlHttp.responseText);
} else {
jsonObj.error(Ajax.xmlHttp.responseText);
}
}
}
},
//添加url參數這裏把傳入的參數固定爲「tom jac」這種中間帶空格的字符串形式，你們有好的方法歡迎交流
addURLParam: function (url, name, value) {
//var names = [];
//name = "sdfd";
var names = name.split(" ");
var values = value.split(" ");
for (var i = 0; i < names.length; i++) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(names[i]) + "=" + encodeURIComponent(values[i]);
}
return url;
},
//建立兼容瀏覽器的跨域請求
CreatCORSRequest: function (method, url) {
var xhr = new XMLHttpRequest();
if("withCredentials"in xhr)
{
xhr.open(method, url, true);
}else if(typeof XDomainRequest!="undefined"){
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
};

 

最後引入    <script src="js/Ajax.js"></script>，直接使用Ajax.get({})和Ajax.post({})。

此貼供初學js和熟悉js的面向對象用法的新手使用，不足之處請你們批評指正！