ここでは、サーバーにHTTP要求を行うために必要なクラスのインスタンスを作成しています。次に、HTTPリクエストメソッドを最初のパラメーターとして指定し、2番目のパラメーターとしてリクエストしているページのURLを指定して、オープンメソッドを呼び出します。最後に、nullをパラメーターとして渡す送信方法を呼び出します。リクエスト後（ここではGETを使用しています）の場合、このパラメーターにはリクエストで送信するデータを含める必要があります。
そしてこれがサーバーからの応答に対処する方法です：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
readedStateChangeは非同期です。つまり、いつでも呼び出されます。これらのタイプの関数はコールバックです。これは、処理が終了すると呼ばれるものです。この場合、サーバーで処理が行われています。
ajaxの基本についてもっと知りたい人のために、MDNネットワークには良いガイドがあります。jqueryにjqueryへではありませんか？
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText); // 'This is the returned text.'
} else {
console.log('Error: ' + xhr.status); // An error occurred during the request.
}
}
};
jQueryを使用して、スニペット全体を
に凝縮できます
この記事の残りの部分では、Vanilla JavaScriptのAJAX APIに加えられた改善を調査したいと思います。仕様全体はW3Cにあります。この仕様について私にぶつかるのは名前です。 「xmlhttprequestレベル2」ではなく、「xmlhttprequestレベル1」です。これは、2つの仕様間の2011年の合併の結果です。今後、それは標準の観点から単一のエンティティとして扱われ、生きている標準はXMLHTTPREQUESTと呼ばれます。これは、コミュニティが1つの基準に固執するというコミットメントがあることを示しています。これは、jQueryから解放したい開発者にとって良いニュースを意味することを意味します。
では、始めましょう…
セットアップ
この記事では、バックエンドでnode.jsを使用しています。はい、ブラウザとサーバーにJavaScriptがあります。 node.jsのバックエンドは無駄がないので、Githubにデモ全体をダウンロードしてフォローすることをお勧めします。これがサーバー上にあるものの肉とジャガイモです：これにより、リクエストURLをチェックして、アプリの応答方法を決定します。リクエストがScriptsディレクトリから来た場合、適切なファイルは、コンテンツタイプのアプリケーション/JavaScriptで提供されます。それ以外の場合、リクエストのヘッダー付きのXリクエストされたヘッダーがXMLHTTPREQUESTに設定されている場合、AJAXリクエストを扱っていることがわかり、適切に対応できます。そして、これらのどちらもそうでない場合、ファイルビュー/index.htmlが提供されます。
サーバーからのAJAX応答に飛び込むと、コメントされたセクションを展開します。 node.jsでは、レンダリングとhttphandlerで重く塗りつぶしをしなければなりませんでした：var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
レンダリング関数は、要求されたファイルの内容を非同期に読み取ります。 httphandler関数への参照が渡され、コールバックとして実行されます。 httphandler関数は、エラーオブジェクトの存在をチェックします（たとえば、要求されたファイルが開けられなかった場合、これは存在します）。すべてを提供することは良いことで、適切なHTTPステータスコードとコンテンツタイプを使用して、ファイルのコンテンツを提供します。
APIのテスト
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText); // 'This is the returned text.'
} else {
console.log('Error: ' + xhr.status); // An error occurred during the request.
}
}
};
これらは、アプリが正しいコンテンツタイプとHTTPステータスコードで異なるリクエストに応答することを保証します。依存関係をインストールしたら、NPMテストを使用してコマンドからこれらのテストを実行できます。 インターフェイス
さあ、HTMLで構築しているユーザーインターフェイスを見てみましょう。
$.ajax({
url: 'send-ajax-data.php',
})
.done(function(res) {
console.log(res);
})
.fail(function(err) {
console.log('Error: ' + err.status);
});
標準的なajaxの本を調べた場合、どこにでもonedeadtateを見つけることができます。このコールバック関数には、ネストされたIFと多くの綿毛が完備されており、頭の上部から覚えておくのが難しくなります。 onreadystateとonloadイベントを頭から頭に向けましょう。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
これはコンソールの出力です：
onedeadedStateイベントは、あちこちで発砲します。それは、各リクエストの先頭に、最後に発砲します。しかし、仕様によれば、オンロードイベントは、リクエストがに成功した場合にのみ発射されます。したがって、オンロードイベントは、数秒で有効に使用できる最新のAPIです。 OnreadedStateイベントは、逆方向に互換性があります。ただし、オンロードイベントは選択のツールである必要があります。オンロードイベントはjQueryの成功コールバックのように見えます、そうではありませんか？
5 lbのダンベルを脇に置いて、腕のカールに移動する時が来ました。リクエストヘッダーの設定
これで、node.js：
をチェックインすることができますxhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText); // 'This is the returned text.'
} else {
console.log('Error: ' + xhr.status); // An error occurred during the request.
}
}
};
ご覧のとおり、Vanilla Ajaxは柔軟でモダンなフロントエンドAPIです。リクエストヘッダーを使用できるアイデアがたくさんあり、そのうちの1つはバージョン化です。たとえば、このWeb APIの複数のバージョンをサポートしたいとします。これは、URLを壊したくない場合に役立ち、代わりにクライアントが必要なバージョンを選択できるメカニズムを提供します。次のように、リクエストヘッダーを設定できます
$.ajax({
url: 'send-ajax-data.php',
})
.done(function(res) {
console.log(res);
})
.fail(function(err) {
console.log('Error: ' + err.status);
});
を試してください
// app.js
var app = http.createServer(function (req, res) {
if (req.url.indexOf('/scripts/') >= 0) {
render(req.url.slice(1), 'application/javascript', httpHandler);
} else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
// Send Ajax response
} else {
render('views/index.html', 'text/html', httpHandler);
}
});
私たちは家のストレッチにいて、汗をかいていません！あなたは疑問に思っているかもしれません、Ajaxについて他に何が知っているのでしょうか？さて、いくつかのきちんとしたトリックはどうですか。
// app.js
function render(path, contentType, fn) {
fs.readFile(__dirname + '/' + path, 'utf-8', function (err, str) {
fn(err, str, contentType);
});
}
var httpHandler = function (err, str, contentType) {
if (err) {
res.writeHead(500, {'Content-Type': 'text/plain'});
res.end('An error has occured: ' + err.message);
} else {
res.writeHead(200, {'Content-Type': contentType});
res.end(str);
}
};
応答タイプ
私が扱っているのに、私が扱っているのに、なぜ古いJSONであるのに、応答テキストにサーバーの応答が含まれる理由を疑問に思うかもしれません。結局のところ、それは私が適切なレポンサイタイプを設定しなかったからです。このajax属性は、サーバーにどのような種類の応答が期待されるかをフロントエンドAPIに伝えるのに最適です。それでは、これを有効にしてみましょう：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
すごい、私がJSONに解析する必要があるプレーンテキストを送り返す代わりに、APIに何を期待するかを伝えることができます。この機能は、ほとんどすべての最新の主要なブラウザで利用できます。もちろん、jQueryはこのタイプの変換を自動的に行います。しかし、私たちがプレーンJavaScriptで同じことをする便利な方法を持っているのは素晴らしいことではありませんか？ Vanilla Ajaxは、XMLを含む他の多くの応答タイプをサポートしています。
悲しいことに、インターネットエクスプローラーでは、ストーリーはそれほど素晴らしいものではありません。 IE 11の時点で、チームはまだXHR.ResponsEtype =「JSON」のサポートを追加していません。この機能は、Microsoft Edgeに到着することです。しかし、このバグは、執筆時点でほぼ2年間傑出しています。私の推測では、Microsoftの人々がブラウザを刷新するのに苦労しています。 Microsoft Edge、別名Project Spartanが約束を築くことを願っています。悲しいかな、この問題を回避する必要がある場合は、
キャッシュバスト
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText); // 'This is the returned text.'
} else {
console.log('Error: ' + xhr.status); // An error occurred during the request.
}
}
};
jQueryドキュメントごとに、リクエストの最後にタイムスタンプクエリ文字列を追加するだけです。これにより、リクエストはややユニークになり、ブラウザのキャッシュをバストします。 http ajaxリクエストを発射すると、これがどのように見えるかを見ることができます：
$.ajax({
url: 'send-ajax-data.php',
})
.done(function(res) {
console.log(res);
})
.fail(function(err) {
console.log('Error: ' + err.status);
});
tada！すべてドラマがない。
結論
そしてこれが応答がどのように見えるかです：
// app.js
var app = http.createServer(function (req, res) {
if (req.url.indexOf('/scripts/') >= 0) {
render(req.url.slice(1), 'application/javascript', httpHandler);
} else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
// Send Ajax response
} else {
render('views/index.html', 'text/html', httpHandler);
}
});
忘れないでください、GitHubでデモ全体を見つけることができます。コメントでjQueryの有無にかかわらず、あなたの考えを聞いて歓迎します。
バニラ・アジャックスとは何ですか？jquery ajaxとはどうなりますか？vanilla ajaxは、jQueryライブラリに頼らずに、非同期Webアプリケーションを作成するためのネイティブJavaScriptの使用を指します。 JQuery Ajaxは、Ajaxを処理するための単純化されたクロスブラウザー互換性のある方法を提供しますが、Vanilla Ajaxは、基礎となるプロセスのより多くの制御と理解を提供します。 jqueryのような外部ライブラリへの依存関係を減らしたい場合にも最適なオプションです。
Vanilla JavaScriptを使用して基本的なAJAX要求を作成するには、XMLHTTPREQUESTオブジェクトを使用します。このオブジェクトを使用すると、HTTPまたはHTTPSリクエストをWebサーバーに送信し、サーバーの応答データをスクリプトにロードすることができます。簡単な例を次に示します：
var xhr = new xmlhttprequest（）;
xhr.open（ "get"、 'https://api.example.com/data'、true）;
> xhr.oneadystatechange = function（）{
if（xhr.readystate == 4 && xhr.status == 200）
console.log（json.parse（xhr.responsetext））;
}
xhr.send（）;
var xhr = new xmlhttprequest（）;
xhr.open（ "get"、 'https://api.example.com/data'、true）;
xhr .Onerror = function（）{
};
xhr.send（）;
POSTリクエストにVanilla Ajaxを使用できますか？ XMLHTTPREQUESTオブジェクトのオープンメソッドは、最初の引数としてHTTPメソッドを受け入れます。したがって、「取得」を「投稿」に置き換えることができます。リクエストを送信する前に、SetRequestheaderメソッドを使用してコンテンツタイプのヘッダーを設定することを忘れないでください。リクエスト、JSONオブジェクトをストリング化し、リクエストの本文として送信する必要があります。また、コンテンツタイプのヘッダーをApplication/JSONに設定します。例は次のとおりです。
xhr .setRequestHeader（ "Content-Type"、 "Application/json"）;
xhr.send（json.stringify（{key： "value"}）） > XMLHTTPREQUESTオブジェクトのABORTメソッドを呼び出すと、AJAXリクエストをキャンセルできます。これにより、リクエストはすぐに終了します。vanilla javascriptを使用して同期Ajaxリクエストを作成できますか？ 。同期リクエストを作成するには、オープンメソッドの3番目の引数としてfalseを渡します。 xmlhttprequestオブジェクトのonprogressイベントハンドラー。このイベントは、現在の進捗情報を提供して複数回トリガーされています。
他のJavaScriptライブラリまたはフレームワークでVanilla Ajaxを使用できますか？ 。ネイティブのJavaScript機能であり、外部ライブラリに依存しません。
vanilla ajaxは、xmlhttprequestオブジェクトを使用して、すべての最新のブラウザによってサポートされています。ただし、インターネットエクスプローラーの古いバージョン（すなわち6以前）は、AjaxにActiveXオブジェクトを使用します。
以上がjQueryのないバニラ・アジャックスのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
