Jquery揭秘系列:ajax原生js實現(xiàn)詳解(推薦)
講到ajax這個東西，我們要知道兩個對象XMLHTTPRequest和ActiveXObject ，提供了對 HTTP 協(xié)議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力?？梢酝交虍惒椒祷?Web 服務(wù)器的響應(yīng)，并且能以文本或者一個 DOM 文檔形式返回內(nèi)容。XMLHTTPRequest基本上算是標(biāo)準(zhǔn)化了，兼容大部分瀏覽器ActiveXObject這玩兒意兒是微軟的東西，所以是為了兼容IE版本，我們用的只是它的xmlHTTP功能。
為了功能的明確和清晰，我們把這個ajax代碼分為5個部分：
•對象的創(chuàng)建
•onreadystatechange句柄處理
•參數(shù)拼接
•Get功能實現(xiàn)
•Post功能實現(xiàn)
1.對象的創(chuàng)建 ：
首先創(chuàng)建用作 XMLHttpRequest 對象的 XMLHttp 變量。把它的值設(shè)置為 null。
按照 web 標(biāo)準(zhǔn)創(chuàng)建對象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()
按照微軟的方式創(chuàng)建對象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
如果捕獲錯誤，則嘗試更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
var xhrFactory = function () {
this.init.apply(this, arguments);
}
xhrFactory.prototype = {
init: function () {
this.xhr = this.create();
},
create: function () {
var xhr = null;
try {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.Xmlhttp");
}
}
catch (err) {
xhr = new ActiveXObject("Microsoft.Xmlhttp");
}
return xhr;
}
}
2.onreadystatechange句柄:
readystate: function (timeout,callback) {
this.xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(eval("(" + this.responseText + ")"));
}
else {
setTimeout(function () {
this.xhr.abort();
}, !timeout ? 15000 : timeout);
}
}
}
這里面要說一下readyState和status屬性。
readyState:
1.創(chuàng)建MLHTTP對象
2.打開與服務(wù)器的連接
3.發(fā)送指令
4.等待處理請求結(jié)果 。
status:
200.請求成功
400.請求錯誤。。。
還有很多值 ，這里就不一個個說了。
timeout參數(shù)是請求過期時間
callback參數(shù)，回調(diào)對返回數(shù)據(jù)做了處理，轉(zhuǎn)換成對象。
3.參數(shù)拼接
para: function (data) {
var datastr = "";
if (data && Object.prototype.toString.call(data) == "[object Object]") {
for (var i in data) {
for (var i = 0; i < length; i++) {
datastr += i + "=" + data[i] + "&";
}
}
}
return datastr;
}
這里是將傳入的對象參數(shù)拼接成字符竄，用于ajax請求時發(fā)送參數(shù)。
4.Get功能實現(xiàn)：
get: function (url, data, callback, async, timeout) {
this.readystate(timeout, callback);
var newurl = url;
var datastr = this.para(data);
newurl = url + "?" + datastr;
this.xhr.open("get", newurl, !async ? true : async);
this.xhr.send(null);
}
get 請求，發(fā)送的參數(shù)是直接在url上拼接的,而不是在send里面發(fā)送，而post方式參數(shù)則是在send里面發(fā)送。
5.Post功能實現(xiàn)
post: function (url, data, callback, async, timeout) {
this.readystate(timeout, callback);
var newurl = url;
var datastr = this.para(data);
this.xhr.open("post", newurl, !async ? true : async);
this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");
this.xhr.send(!datastr ? null : datastr);
}
post這里面多了一段代碼：this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");
這段代碼其實是說明將整個發(fā)送內(nèi)容作為一個整體進行編碼，get則是單個參數(shù)進行編碼拼接 ，這也是post和get的區(qū)別。
調(diào)用方式如下 ：
var xhr = new xhrFactory();
xhr.post("test.ashx", null, function (data) {
alert(data);
});
以上這篇Jquery揭秘系列:ajax原生js實現(xiàn)詳解(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用異步controller與jQuery實現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當(dāng)用戶開始通過網(wǎng)站的內(nèi)容滾動時進一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06
jQuery EasyUI 中文API Button使用實例
jQuery EasyUI 中文API Button使用小結(jié)，需要的朋友可以參考下。2010-04-04
jQuery+ajax讀取json數(shù)據(jù)并按照價格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價格排序,涉及jQuery基于ajax動態(tài)獲取json文件數(shù)據(jù)并進行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了jQuery實現(xiàn)給頁面換膚的方法,涉及jQuery頁面元素的選擇與樣式的操作,需要的朋友可以參考下2015-05-05
比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集
比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集...2007-11-11
基于jQuery實現(xiàn)帶動畫效果超炫酷的彈出對話框(附源碼下載)
這是一款基于jQuery的彈出對話框插件，這個jQuery對話框插件的最大特點是彈出和關(guān)閉都帶有非常炫酷的動畫特效,需要的朋友參考下吧2016-02-02
這篇文章主要介紹了jquery實現(xiàn)可點擊伸縮與展開的菜單效果代碼,涉及jquery鼠標(biāo)click事件控制頁面元素樣式變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery下實現(xiàn)等待指定元素加載完畢(可改成純js版)
下面就是我想到的等待元素出現(xiàn)方法，雖然是基于jQuery的，但是代碼很簡潔，可以修改成純js版的,感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
jquery?操作DOM的基本用法分享，使用jquery的朋友可以參考下，方便以后對dom操作2012-04-04
下面小編就為大家?guī)硪黄钊肜斫鈐Query之防止冒泡事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05