原生JSでAjaxのリクエスト関数機能を書く

私たちがウェブページを書くとき、Ajaxリクエストを使ってサーバーを呼び出す場合、JQueryなどの既に封装されたライブラリを使用するのが一般的です。それは非常に簡単です。

ただし、一般的にこれらのライブラリは機能が豊富で、私たちが必要としない多くのものを導入しています。もし機能が単一でシンプルなページを書く必要がある場合、このような大規模なライブラリをインクルードする必要はありません。

自分自身のAjaxリクエスト機能を簡単に実現できます、具体的なコードは以下の通りです：

var ajax = {};
ajax.x = function () {
 typeof XMLHttpRequest !== 'undefined'なら{
 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)
};

使用方法： 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);
});

まとめ

以上が、編集者が皆さんに紹介した原生 JavaScript で Ajax リクエスト関数の機能です。皆さんの助けになりますように。何かご不明な点があれば、コメントを残してください。編集者はすぐに回答します。また、皆さんの呐喊教程へのサポートに感謝します。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑う内容があれば、メールで：notice#w までお知らせください。3codebox.com（メール送信時は、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害疑いのコンテンツを削除します。）