Ajax と jsonp に関する実践的なチュートリアルを共有する

1.ajax

非同期 JavaScript および XML (Ajax) は、新世代の Web サイト (一般に Web 2.0 サイトとして知られています) を推進する主要なテクノロジです。 Ajax を使用すると、Web アプリケーションの表示や動作を妨げることなく、バックグラウンドでデータを取得できます。 XMLHttpRequest 関数を使用してデータを取得します。これは、クライアント側 JavaScript が HTTP 経由でリモート サーバーに接続できるようにする API です。 Ajax は、複数の場所のコンテンツを 1 つの Web アプリケーションに統合する多くのマッシュアップの原動力でもあります。

ただし、ブラウザーの制限により、この方法ではクロスドメイン通信は許可されません。別のドメインからデータをリクエストしようとすると、セキュリティ エラーが発生します。データが存在するリモート サーバーを制御でき、すべてのリクエストが同じドメインに送信される場合、これらのセキュリティ エラーは回避できます。しかし、Web アプリケーションが独自のサーバー上に留まるだけでは、何の役に立つのでしょうか?複数のサードパーティサーバーからデータを収集する必要がある場合はどうすればよいでしょうか?

2. 動作原理

A. Ajax は、Web サイトを通じてデータをロードする JS です。このプロセスは通常、ユーザーには見えません。

B. 従来の Web ページ (ajax は適用されません) の場合、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

3. 同期と非同期について

同期は続行する前に結果が返されるまで待つ必要がありますが、非同期は通常、非同期の結果を監視する必要はありません。

同期は一直線のキュー、非同期はキューに並ばず、それぞれ独自の道を進みます

例:

ショッピングカートの問題を追加します。同期メソッドを使用すると、ショッピング カートに品目を追加するたびに、他の操作を実行する前にページがリロードされるのを待つ必要があります。

非同期メソッドでは、リッスンするだけで済み、他の操作は待たずに実行できます。相対的に言えば、非同期ロードの方がメリットが大きく、このことからも ajax のメリットが分かります。

4. ajaxオブジェクト(および互換性のあるもの)を作成します

(1) XMLHttpRequestオブジェクトを作成します

1 if(window.XMLHttpRequest){2     var xhr=new XMLHttpRequest();3 }else{4     var xhr=new ActiveXObject("Microsoft.XMLHTTP");5 };

(2) サーバーとのリンクを開く

open(method,url,asyn)

パラメータ:

メソッド: string、リクエストの型 get または post

url：文字列、サーバー上のファイルの場所

asyn：ブール値、true（非同期）またはfalse（同期）

同期は続行する前に返される結果を待つ必要があります、非同期は待つ必要はありません

(3)サーバーに送信

xhr.send()でサーバーにリクエストを送信(getリクエスト)

xhr. send(string)はpostリクエストにのみ使用されます

(4)サーバーのリクエストステータスを検出します

onreadystatechangeイベント(対応するreadyステータス)

readyState属性とstatus属性にはXMLHttpRequestのステータスが格納されます

readyStateが変化するとonreadystatechangeイベントがトリガーされます

readyStateが0から4に変化します

0:リクエストは初期化されていません

1:サーバー接続が確立されました

2 : リクエストは受信されました

3. リクエストは処理中です

4. リクエストは完了しました

ステータスは200に等しい: "OK"

=404: ページが見つかりません

sが4でstatusが200の場合、応答準備ができていることを示します。

5. XMLHttpRequest オブジェクトの重要性

サーバーからの応答を取得する必要がある場合は、XMLHttpRequest オブジェクトを使用してください:

responseText または responseXML 属性

responseテキストが応答を取得しますin string form Data

responseTextはXML形式でレスポンスデータを取得します

サーバーからのレスポンスがXMLでない場合は、responseText属性responseTextを使用して文字列形式でレスポンスを返すことができます。次のように使用します: Div.innerHTML = xhr.responseText;

6. ajax リクエストメソッド get と post の違いについて:

より一般的に使用され、より便利なデータ送信。プレーンテキストでは、投稿ほど安全ではありません。データ送信サイズには制限があり、データは URL 経由で渡されます。ただし、URL には一定の長さの制限があります。 、

: 比較的まれに使用されます。パフォーマンスは get よりわずかに 1/3 です。データ サイズの制限はありません。

注: img、script、iframe およびその他の要素の src 属性は、リソースを直接リクエストできます。ドメイン間で。

8. Ajax クロスドメイン

1. サーバーを他の Web サイトに移動させてコンテンツを取得し、ページを返すことができます

9. jsonp クロスドメイン

jsonp は、スクリプト タグのクロスドメイン機能を使用して、明らかに json を使用してリソースを取得します。 script タグを付け、json URL を script の src 属性に割り当てます。このスクリプトを dom に挿入し、ブラウザーに取得させます。callback({"name":"jack"})、callback はページ上に存在するコールバック メソッドです。 、パラメータは、サーバーの月次ポリシーに準拠するために、コールバックまたは cb が一般的に使用されます。

以上がAjax と jsonp に関する実践的なチュートリアルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。