Scrittura di funzione di richiesta Ajax con JavaScript nativo

Di solito, quando scriviamo pagine web e utilizziamo richieste Ajax per il server, usiamo librerie già encapsulate come JQuery, il che è abbastanza semplice.

Ma di solito queste librerie offrono molte funzionalità, includendo molte cose che non ci servono. Se dobbiamo scrivere una pagina web con funzionalità singole e semplici, non è necessario utilizzare un file di libreria così grande.

Possiamo implementare semplicemente una nostra funzionalità di richiesta Ajax, il codice specifico è il seguente:

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;
 per (var i = 0; i < versions.length; i++) {
 try {
 xhr = new ActiveXObject(versions[i]);
 break;
 }
 }
 }
 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);
 }
 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)
};

Modalità di utilizzo: GET

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

Attenzione a un problema: se vogliamo inviare qualcosa del genere

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

Conclusione

Come sopra menzionato, l'editor ha introdotto la funzione della funzione di richiesta Ajax scritta nativamente in JavaScript. Spero che questo possa essere utile a tutti voi. Se avete qualsiasi domanda, lasciate un commento e l'editor risponderà tempestivamente. In questo senso, ringrazio anche tutti i sostenitori del tutorial Yell.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright spetta agli autori originali, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.