Ajaxリクエスト関数をJSで実装する方法

今回は、JSでAjaxリクエスト関数を実装する方法を紹介します。JSでAjaxリクエスト関数を実装する際の注意点は何ですか?以下は実践的なケースですので、見てみましょう。 一般に、Web ページを作成するとき、Ajax を使用してサーバーをリクエストする場合、

JQuery

およびその他のカプセル化されたライブラリを使用してサーバーを呼び出します。これは比較的単純です。 しかし、これらのライブラリには一般に多くの関数が含まれており、単一の関数で単純なページを作成する必要がある場合には、そのような巨大なライブラリ ファイルを

参照

する必要はありません。 独自の Ajax リクエスト関数を簡単に実装できます。具体的なコードは次のとおりです。

使用方法: GET

rreee

ここで注意しなければならない問題があります。

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

のようなものを送信したい場合は、この記事の事例を読んで方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語のウェブサイトです！

推奨読書:

JS で計算機関数を実装する最も簡単な方法

Angular でテーブルのフィルタリングと削除関数を実装する

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