首頁  >  文章  >  web前端  >  原生JS寫Ajax的請求函數功能

原生JS寫Ajax的請求函數功能

不言
不言原創
2018-07-02 16:58:431260瀏覽

本文給大家分享一個自己寫的基於原生JS寫Ajax的請求函數功能,需要的朋友可以參考下

一般我們寫網頁的時候,如果用到Ajax 請求伺服器,都是使用JQuery 等已經封裝好的函式庫來調用,比較簡單。

但是一般這些函式庫的功能很多,引入了太多我們用不到的東西,如果我們需要寫一個功能單一,簡單的頁面,完全用不到引用如此龐大的庫文件。

我們可以簡單實作一個自己的Ajax 請求功能,具體的程式碼如下:

#
var ajax = {};
ajax.x = function () {
 if (typeof XMLHttpRequest !== 'undefined') {
 return new XMLHttpRequest();
 }
 var versions = [
 "MSXML2.XmlHttp.6.0",
 "MSXML2.XmlHttp.5.0",
 "MSXML2.XmlHttp.4.0",
 "MSXML2.XmlHttp.3.0",
 "MSXML2.XmlHttp.2.0",
 "Microsoft.XmlHttp"
 ];
 var xhr;
 for (var i = 0; i < versions.length; i++) {
 try {
 xhr = new ActiveXObject(versions[i]);
 break;
 } catch (e) {
 }
 }
 return xhr;
};
ajax.send = function (url, method, data, success,fail,async) {
 if (async === undefined) {
 async = true;
 }
 var x = ajax.x();
 x.open(method, url, async);
 x.onreadystatechange = function () {
 if (x.readyState == 4) {
 var status = x.status;
 if (status >= 200 && status < 300) {
 success && success(x.responseText,x.responseXML)
 } else {
 fail && fail(status);
 }
 }
 };
 if (method == &#39;POST&#39;) {
 x.setRequestHeader(&#39;Content-type&#39;, &#39;application/x-www-form-urlencoded&#39;);
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + &#39;=&#39; + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? &#39;?&#39; + query.join(&#39;&&#39;) : &#39;&#39;), &#39;GET&#39;, null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + &#39;=&#39; + encodeURIComponent(data[key]));
 }
 ajax.send(url,&#39;POST&#39;, query.join(&#39;&&#39;), callback, fail, async)
};

使用方法: GET

ajax.get(&#39;/test.php&#39;, {foo: &#39;bar&#39;}, function(response,xml) {
 //success
},
function(status){
 //fail
});
POST
ajax.post(&#39;/test.php&#39;, {foo: &#39;bar&#39;}, function(response,xml) {
 //succcess
},function(status){
 //fail
});

這裡需要注意一個問題,如果我們想要發送類似

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post(&#39;/control&#39; + sendCmd,&#39;&#39;,function(response,xml) {
 console.log(&#39;success&#39;);
},
function(status){
 console.log(&#39;failed:&#39; + status);
});

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

ajax回呼函數參數傳遞正確方法

#關於Ajax的get和post請求的介紹

#

以上是原生JS寫Ajax的請求函數功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn