jQueryのないバニラ・アジャックスのガイド

キーテイクアウト

非同期JavaScriptとXMLの略であるAjaxは、部分的なページの更新を可能にし、完全なページの更新の必要性を減らし、より多くの流動的なユーザーエクスペリエンスを可能にします。 AJAXリクエストの基本的な解剖学には、HTTP要求に必要なクラスのインスタンスを作成し、HTTPリクエストメソッドとページのURLを指定し、リクエストを送信します。
• jQueryはAjaxリクエストを簡素化できますが、必ずしも必要ではありません。 Vanilla JavaScriptのAjax APIは大幅な改善を遂げており、XMLHTTPREQUEST仕様は現在、標準の観点から単一のエンティティとして扱われ、コミュニティが1つの標準に固執することをコミットしていることを示しています。
Vanilla Ajaxは、柔軟でモダンなフロントエンドAPIを提供します。リクエストヘッダーを設定し、サーバーから予想される応答のタイプを指定し、ブラウザキャッシュをバストすることができます。 Ajaxはかつて複雑なプロセスでしたが、より簡単でユーザーフレンドリーになりました。
非同期JavaScriptとXMLの略であるAjaxは、部分ページの更新を行うメカニズムです。完全な更新の必要性を回避しながら、サーバーから来るデータを使用してページのセクションを更新できます。この方法で部分的な更新を行うことは、流動的なユーザーエクスペリエンスを作成するのに効果的であり、サーバー上の負荷を減らすことができます。
これは、基本的なAJAXリクエストの解剖学です：

ここでは、サーバーに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を使用して、スニペット全体を

に凝縮できます

それはいいです。そして実際、あなたの真にあなたを含む多くの人にとって、jQueryはAjaxに関しては事実上の基準になりました。しかし、あなたは何を知っていますか？これが事実である必要はありません。 jQueryは醜いDOM APIを回避するために存在します。しかし、それは本当に

ugいですか？または理解できない？

この記事の残りの部分では、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.
    }
  }
};

サウンドバックエンドAPIと同様に、いくつかのユニットテストを作成して、それが機能することを確認しましょう。これらのテストでは、私はスーパーテストとモカに助けを求めています：

これらは、アプリが正しいコンテンツタイプとHTTPステータスコードで異なるリクエストに応答することを保証します。依存関係をインストールしたら、NPMテストを使用してコマンドからこれらのテストを実行できます。 インターフェイス

さあ、HTMLで構築しているユーザーインターフェイスを見てみましょう。

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

HTMLはきれいに見えます。ご覧のとおり、すべての興奮はJavaScriptで起こっています。

onreadyState vs onload

標準的な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のダンベルを脇に置いて、腕のカールに移動する時が来ました。

リクエストヘッダーの設定

jQueryは、バックエンドテクノロジーがAJAXリクエストであることを知っているため、カバーの下にリクエストヘッダーを設定します。一般に、バックエンドは、適切な応答を送信する限り、Get Requestがどこから来るかを気にしません。これは、同じWeb APIでAJAXとHTMLをサポートしたい場合に役立ちます。それでは、バニラajaxでリクエストヘッダーを設定する方法を見てみましょう：

これで、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);
  }
});

node.jsは、リクエストヘッダーをチェックするために使用できるヘッダーオブジェクトを提供します。唯一のトリックは、それが小文字でそれらを読み取ることです。

私たちは家のストレッチにいて、汗をかいていません！あなたは疑問に思っているかもしれません、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.
    }
  }
};

ブラウザの1つの機能は、Ajaxリクエストのキャッシュ機能です。たとえば、インターネットエクスプローラーは、デフォルトでこれを行います。私はかつて何時間も苦労して、なぜ私のajaxが機能していなかったのかを理解しようとしました。幸いなことに、jQueryはデフォルトでブラウザキャッシュをバストします。まあ、あなたもプレーンなajaxでもできます、そしてそれはかなり簡単です：

jQueryドキュメントごとに、リクエストの最後にタイムスタンプクエリ文字列を追加するだけです。これにより、リクエストはややユニークになり、ブラウザのキャッシュをバストします。 http ajaxリクエストを発射すると、これがどのように見えるかを見ることができます：

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

tada！すべてドラマがない。

結論

300lbベンチプレスのバニラ・アジャックスを楽しんだことを願っています。しばらくすると、Ajaxは恐ろしい獣でしたが、それ以上はありませんでした。実際、私たちは松葉杖、ahem shackles、jqueryのすべての基本をすべて取り上げました。

Ajaxの呼び出しを行う簡潔な方法を残します：

そしてこれが応答がどのように見えるかです：

// 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に関するよくある質問（FAQ）

バニラ・アジャックスとは何ですか？jquery ajaxとはどうなりますか？

vanilla ajaxは、jQueryライブラリに頼らずに、非同期Webアプリケーションを作成するためのネイティブJavaScriptの使用を指します。 JQuery Ajaxは、Ajaxを処理するための単純化されたクロスブラウザー互換性のある方法を提供しますが、Vanilla Ajaxは、基礎となるプロセスのより多くの制御と理解を提供します。 jqueryのような外部ライブラリへの依存関係を減らしたい場合にも最適なオプションです。

vanilla javascriptを使用して基本的なAjax要求を作成するにはどうすればよいですか？

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（）;

vanilla ajax？

のエラーを処理するにはどうすればよいですか？ Vanilla Ajaxでのエラー処理は、XmlhttpRequestオブジェクトのOnerrorイベントハンドラーを使用して実行できます。このイベントは、AJAXリクエストを行ったときにエラーが発生したときにトリガーされます。例は次のとおりです。

var xhr = new xmlhttprequest（）;
xhr.open（ "get"、 'https://api.example.com/data'、true）;
xhr .Onerror = function（）{ console.log（ "request失敗した "）;
};
xhr.send（）;

POSTリクエストにVanilla Ajaxを使用できますか？ XMLHTTPREQUESTオブジェクトのオープンメソッドは、最初の引数としてHTTPメソッドを受け入れます。したがって、「取得」を「投稿」に置き換えることができます。リクエストを送信する前に、SetRequestheaderメソッドを使用してコンテンツタイプのヘッダーを設定することを忘れないでください。リクエスト、JSONオブジェクトをストリング化し、リクエストの本文として送信する必要があります。また、コンテンツタイプのヘッダーをApplication/JSONに設定します。例は次のとおりです。

var xhr = new xmlhttprequest（）;

xhr.open（ "post"、 'https://api.example.com/data'、true）;

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機能であり、外部ライブラリに依存しません。

バニラajaxはすべてのブラウザーでサポートされていますか？

vanilla ajaxは、xmlhttprequestオブジェクトを使用して、すべての最新のブラウザによってサポートされています。ただし、インターネットエクスプローラーの古いバージョン（すなわち6以前）は、AjaxにActiveXオブジェクトを使用します。

以上がjQueryのないバニラ・アジャックスのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。