JSを使ったAjaxリクエスト関数の書き方

この記事では、ネイティブ JS に基づいて独自に作成した Ajax リクエスト関数を共有します。必要な友人はそれを参照してください。

通常、Web ページを作成する場合、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('/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
});

ここで、

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

のようなものを送信したい場合に注意する必要がある問題があります。

上記はテキストをまとめたものです、皆様のお役に立てれば幸いです

関連記事:

vue + elementでテーブルページングを実装する方法

WeChatアプレットに記録と再生記録機能を実装する方法

Nuxt.js フレームワーク (詳細チュートリアル)

以上がJSを使ったAjaxリクエスト関数の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。