Write Ajax request function in native JS-JS Tutorial-php.cn

Write Ajax request function in native JS

不言

Release： 2018-07-02 16:58:43

Original

1262 people have browsed it

This article will share with you a self-written Ajax request function based on native JS. Friends who need it can refer to it

Generally when we write web pages, if we use Ajax to request the server, we use It is relatively simple to call JQuery and other encapsulated libraries.

But generally these libraries have many functions and introduce too many things that we cannot use. If we need to write a simple page with a single function, there is no need to reference such a huge library file.

We can simply implement our own Ajax request function. The specific code is as follows:

var ajax = {};
ajax.x = function () {
 if (typeof XMLHttpRequest !== &#39;undefined&#39;) {
 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)
};

Copy after login

Usage method: 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
});

Copy after login

There is an issue to note here, if we want to send something like

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);
});

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The correct way to pass ajax callback function parameters

Introduction to Ajax get and post requests

The above is the detailed content of Write Ajax request function in native JS. For more information, please follow other related articles on the PHP Chinese website!