JavaScript_jqueryにおけるjQuery、Ajax、JSONPの併用の詳細説明

XMLHttpRequest を使用すると、ブラウザはページ全体を更新せずにサーバーと対話できます。これは、いわゆる Ajax (非同期 JavaScript および XML) です。 Ajax はユーザーに、より豊かなユーザー エクスペリエンスを提供できます。

Ajax リクエストは JavaScript によって駆動され、リクエストは JavaScript コードを通じて URL に送信され、サーバーから返された情報はコールバック関数で処理されます。リクエストとレスポンスを送信するプロセス全体が非同期であるため、ページ内の他の Javascript コードは、この期間中も中断されることなく実行され続けます。

jQuery は確かに Ajax に対する優れたサポートを提供しており、また、さまざまなブラウザー間の Ajax サポートにおける痛ましい違いを抽象化します。フル機能の $.ajax() メソッドだけでなく、$.get()、$.getScript()、$.getJSON()、$.post()、$().load などのその他の関数も提供します。 ()など簡単な方法です。

Ajax という名前ですが、多くの Ajax アプリケーション、特に jQuery Ajax アプリケーションは XML を使用せず、代わりにプレーン テキスト、HTML、および JSON (JavaScript) オブジェクト表記が使用されます。 。

一般に、同一オリジンポリシー (同じプロトコル、同じドメイン名、同じポート) の制限により、JSONP (パディング付き JSON) などのソリューションを使用しない限り、Ajax はクロスドメインリクエストを実行できません。影響を受ける一部のリクエスト。クロスドメイン機能が制限されます。
Ajax に関するいくつかの重要な概念

GET と POST、これらはサーバーにリクエストを送信する最も一般的に使用される 2 つの方法です。これら 2 つの方法の違いを正しく理解することは、Ajax 開発にとって非常に重要です。

GET メソッドは通常、一部の非破壊操作 (つまり、サーバー上の情報を変更せずにサーバーから情報を取得するだけ) を実行するために使用されます。たとえば、検索クエリ サービスは通常、GET リクエストを使用します。さらに、GET リクエストはブラウザによってキャッシュされることもあるため、予期せぬ問題が発生する可能性があります。一般に、GET リクエストはクエリ文字列を通じてのみサーバーにデータを送信できます。

POST メソッドは通常、サーバー上で何らかの破壊的な操作を実行する (つまり、サーバー上のデータを変更する) ために使用されます。たとえば、ブログ投稿を公開する場合は、POST リクエストを使用する必要があります。 GET リクエストとは異なり、POST リクエストにはキャッシュの問題がありません。 POST リクエストでは、URL の一部としてクエリ文字列をサーバーに送信することもできますが、この方法はすべてのデータを URL とは別に送信することはお勧めできません。

データ型。jQuery では通常、サーバーから返されるデータ型を指定する必要があります。場合によっては、そのデータ型が $.getJSON() などのメソッド名にすでに含まれている場合があります。それ以外の場合は、データ型がメソッド名として使用されます。 available 最終的に $.ajax() メソッドのパラメーターとして使用される、構成されたオブジェクトの一部。通常、データ型には次のものが含まれます:

• テキスト: 単純な文字列を送信するために使用されるプレーン テキスト。
• html: HTML の一部を送信するために使用されます。
• スクリプト: ページにスクリプトを追加します。
• json: 文字列、配列、またはオブジェクトを含めることができる、フォーマットされた JSON オブジェクトを送信します。
• jsonp: 他のドメインから返された JSON データを送信するために使用されます。
• xml: カスタマイズされた XML 形式のデータを送信するために使用されます。

非同期実行。Ajax の A は非同期を指します。この時点で、多くの jQuery 初心者にとって非同期とは何かを理解するのは難しいかもしれません。Ajax リクエストはデフォルトで非同期であり、サーバーから返された情報はすぐに利用できないためです。サーバーから返されたすべての情報は、コールバック関数でのみ処理できます。たとえば、次のコードは間違っています:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

正しいアプローチは、サーバーから返されたデータをコールバック関数で処理することです。コールバック関数は、Ajax リクエストが正常に完了したときにのみ実行されます。

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的