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 サイトに移動させてコンテンツを取得し、ページを返すことができます

2. ページの Ajax に URL を与えます。そして、ajax はこの URL をサーバーに渡し、サーバーはそのアドレスにアクセスします。

9. jsonp クロスドメイン

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

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