jquery＆＃x27;の略記ajaxメソッドの紹介

コアポイント

• jQueryの略語ajaxメソッドは、プリセット構成を使用して特定の目的で$.ajax()メソッドをラップするAjaxコールを簡素化するメソッドを提供します。この記事で説明した方法には、load()、$.post()、$.get()が含まれます。
• load()メソッドにより、データをサーバーからロードし、選択した要素に配置できます。 URL、オプションのデータ、およびオプションのコールバック関数を使用します。この方法は、Webページの主なコンテンツを非同期にロードするために使用できます。
• $.post()メソッドは、リクエスト本文の一部としてサーバーにPOSTリクエストを送信し、データを送信するために使用されます。この方法は、サーバー側の状態の変更を引き起こす可能性のある要求に最適です。
• $.get()メソッドは、サーバーへのGETリクエストを開始します。これは、サーバーが常に特定のパラメーターセットに対して同じ結果を返す状況、またはユーザーがリソースを共有する必要がある状況に最適です。

ajaxという用語を聞いたことがありませんか？私は、ほとんどすべての人の手が彼らの体の近くに置かれているに違いない。 Ajax（もともと非同期JavaScriptとXMLの略）は、非同期WebサイトとWebアプリケーションの作成に役立つ最も一般的に使用されるクライアントメソッドの1つです。

もちろん、Raw JavaScriptを使用してAjaxコールを実行できますが、コードのすべての異なる部分を処理するのは面倒です。これは、インターネットエクスプローラー6などの古いブラウザをサポートする必要がある場合に特に当てはまります。

幸いなことに、jQueryはこれらの問題に対処するための一連の方法を提供し、コードで達成したいタスクに集中できるようにします。 jQueryは、ニーズに合わせて高度に構成できるメインメソッドを提供します。また、略語メソッドと呼ばれる一連の略語方法も提供します。これは、プリセット構成を備えたメソッドのラッパーであり、それぞれが単一の目的を果たすためです。

$.ajax() $.ajax()メソッドとは別に、すべてのメソッドには共通点が1つあります。それらはDOM要素のセットで動作するのではなく、jQueryオブジェクトから直接呼ばれます。したがって、次のようなステートメントを書きません：

$.ajax()これにより、ページ内のすべての段落が選択され、

メソッドを呼び出して、代わりに書き込みます。

<code class="language-javascript">$('p').ajax(...);</code>

この記事では、最も一般的に使用される3つのjQueryの略語方法、

、ajax()、および

について説明します。

<code class="language-javascript">$.ajax(...);</code>

load()load（）$.post()$.get()

最初に説明する方法は

です。サーバーからデータを読み込み、返されたデータ（通常はHTMLコード）を一致を選択する要素に配置できます。実際にそれを使用する前に、その署名を見てみましょう：

各パラメーターの意味は次のとおりです

• url：リクエストを送信するリソースのURLを指定する文字列
• ：適切に形成されたクエリ文字列である必要があるオプションの文字列、またはリクエストパラメーターとして渡す必要があるオブジェクト。文字列が渡された場合、リクエストメソッドが取得され、オブジェクトが渡された場合、リクエストメソッドが投稿されます。このパラメーターが省略されている場合、GETメソッドが使用されます data
：AJAX要求が完了した後に呼び出されるオプションのコールバック関数。この関数は、応答テキスト、要求されたステータス文字列、JQXHRインスタンスの3つのパラメーターを受け入れます。コールバック関数の内部では、コンテキスト（これ）がコレクションの各要素に1つずつ設定されます。
• callback
これは使用が難しいようですか？特定の例を見てみましょう。

メインコンテンツを表すID Mainを備えたWebサイトに要素があるとします。私たちがやりたいのは、メインメニューのリンクで参照されているページのメインコンテンツを非同期的にロードすることです。理想的にはそのIDはメインメニューです。残りのレイアウトが変更されないため、この要素内のコンテンツを取得するだけなので、ロードする必要はありません。

このアプローチは、WebサイトにアクセスするユーザーがJavaScriptを無効にしている場合でも、通常の同期メカニズムを使用してWebサイトを閲覧できるため、強化として意図されています。ウェブサイトのパフォーマンスを改善できるため、この機能を実装したいと考えています。この例では、メニュー内のすべてのリンクが内部リンクであると想定しています。

jqueryと

メソッドを使用して、次のコードでこのタスクを完了できます。

load()待って！このコードの何が問題なのかわかりますか？このコードは、メインコンテンツだけでなく、参照されたページのすべての

htmlコードを取得していることに気付くかもしれません。このコードを実行すると、2つの鏡があるようなものになります。1つはもう1つの前にあります。鏡の中、鏡の中に鏡が見えます。私たちが本当に望んでいるのは、ターゲットページのメインコンテンツのみをロードすることです。

<code class="language-javascript">$('p').ajax(...);</code>

この問題を解決するために、jQueryを使用すると、指定されたURLの直後にセレクターを追加できます。

メソッドのこの関数を使用して、前のコードを次のように書き換えることができます。 今回はページを検索し、HTMLコードをフィルタリングし、ID Mainを使用して要素の子孫のみを注入します。ユニバーサルセレクター（）が含まれています。なぜなら、#main要素の内側にのみ#mainのみが必要であるため、#mainのみが必要なためです。

この例は良いですが、利用可能なパラメーターの1つの使用のみを示しています。もっとコードを見てみましょう！

load() load（）

でコールバック関数を使用します

<code class="language-javascript">$.ajax(...);</code>

コールバックパラメーターを使用して、ユーザーに操作の完了を通知できます。前回の例を最後に使用して使用してみましょう。

*今回は、ID通知バーを備えた要素があると仮定し、それは...まあ、通知バーとして使用されます。

をマスターするときは、次の方法に注意を向けましょう。

$。post（）

サーバーによって返されたコンテンツを1つ以上の要素に挿入することがあります。データを取得してから、データを検索した後にデータを決定することをお勧めします。これを行うには、$.post()または$.get()メソッドを使用できます。

これらは機能的に類似しており（サーバーにリクエストを行います）、署名と受け入れられたパラメーターの点で同じです。唯一の違いは、1つがPOSTリクエストを送信し、もう1つがGETリクエストを送信することです。明らかにそうではありませんか？

POSTリクエストとGETリクエストの違いを覚えていない場合、リクエストがサーバー側の状態を変更し、異なる応答を引き起こす可能性がある場合は、投稿を使用する必要があります。それ以外の場合は、Get Requestである必要があります。

$.post()メソッドの署名は次のとおりです

<code class="language-javascript">$('p').ajax(...);</code>

パラメーターは次のとおりです

：リクエストを送信するリソースのURLを指定する文字列
• url：jQueryが[
• ：リクエストが成功した後に実行されたコールバック関数。コールバック関数の内部では、コンテキスト（this）は、呼び出しで使用されるAjax設定を表すオブジェクトを表すように設定されています。 data
• ：応答本体の解釈方法を指定するオプションの文字列。受け入れられた値は、HTML、テキスト、XML、JSON、スクリプト、およびJSONPです。これは、複数の空間分離値の文字列にもなります。この場合、jQueryは1つのタイプを別のタイプに変換します。たとえば、応答がテキストであり、XMLとして扱いたい場合は、「テキストXML」と書くことができます。このパラメーターが省略されている場合、応答テキストは処理や評価なしにコールバック関数に渡され、jQueryは正しい形式を推測するために最善を尽くします。 callback
• typeができることとそのパラメーターが何であるかを知っているので、いくつかのコードを記述しましょう。

記入するフォームがあるとします。フィールドがフォーカスを失うたびに、フィールドデータをサーバーに送信してその有効性を確認したいと考えています。サーバーがJSON形式で情報を返すと仮定します。典型的なユースケースは、ユーザーが選択したユーザー名がまだ占有されていないことを確認することです。

この関数を実装するには、次のようにjqueryの$.post()メソッドを使用できます。

このコードでは、相対URL「/user」によって識別されたページにpostリクエストを送信します。また、2番目のパラメーターデータを使用して、フォーカスを失うフィールドの名前と値をサーバーに送信します。最後に、コールバック関数を使用して、返されたJSONオブジェクトのステータス属性の値がエラーであることを確認します。この場合、ユーザーにエラーメッセージ（メッセージ属性に保存）を表示します。

このタイプのJSONオブジェクトがどのように見えるかをよりよく理解するために、次の例が次のとおりです。

私が言ったように、

は、Get Requestsを作成できることを除いて$.post()と同じです。そのため、次のセクションは非常に短くなり、同じ情報を繰り返す代わりにいくつかのユースケースに焦点を当てます。

<code class="language-javascript">$.ajax(...);</code>

$。get（）

$.get()は、jQueryが取得リクエストを発行するために提供される方法の1つです。このメソッドは、指定されたURLと提供されたオプションのデータを使用して、サーバーへのGETリクエストを開始します。リクエストが完了した後、コールバック関数を実行することもできます。その署名は次のとおりです

<code class="language-javascript">$('p').ajax(...);</code>

パラメーターは

メソッドのパラメーターと同じなので、ここでは繰り返しません。 $.post()

関数は、サーバーが特定のパラメーターセットに対して常に同じ結果を返す場合に理想的です。また、ユーザーが共有できるようにしたいリソースにも適しています。たとえば、輸送サービス（列車の時刻表情報など）の場合、同じ日時を検索する人は同じ結果を得る必要があり、GETリクエストが理想的です。さらに、ページがリクエストに応答できる場合、ユーザーは友人と得られる結果を共有できます - URLの魔法。 $.get()

結論 この記事では、JQueryの最も一般的に使用されるAjax略語方法のいくつかについて説明します。それらはAjaxリクエストを実行する非常に便利な方法であり、私たちが見ることができるように、彼らの基本バージョンでは、私たちが望むものを達成するために1行のコードのみが必要です。

これらおよびその他の方法の詳細については、jQueryのajax略語ドキュメントを確認してください。ここでは他に何も議論していませんが、この記事で得た知識を使用して、他の方法を始められるようにすることができるはずです。

（FAQセクションをここに追加する必要があります。コンテンツは入力テキストのFAQセクションと同じです）

以上がjquery＆＃x27;の略記ajaxメソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。