Native JavaScript Writing Ajax Request Function Feature

Generally, when we write web pages, if we use Ajax requests to the server, we use libraries that have been encapsulated, such as JQuery, which is relatively simple.

However, generally these libraries have many functions, introducing too many things we don't need. If we need to write a simple page with a single function, we don't need to reference such a large library file at all.

We can simply implement our own Ajax request function, the specific code is as follows:

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"
 ];
 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 == 'POST') {
 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key)) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? '? + query.join('&') : ''), 'GET', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key)) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url, 'POST', query.join('&'), callback, fail, async)
};

Usage: GET

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

Here is a problem that needs to be noted, if we want to send something similar to

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

Summary

The above-mentioned is the native JS Ajax request function introduced by the editor for everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I also want to express my sincere gratitude to everyone for their support of the Yell tutorial!

Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)