Ajaxを使用してWebページの非同期更新を実装する方法

今回は、Ajax が Web ページの非同期更新を実装する方法について説明します。Ajax が Web ページの非同期更新を実装するための 注意事項 について、実際のケースを見てみましょう。

1: ajax の概念

正式名称: Asynchronous Javascript And Xml

AJAX は新しいプログラミング言語ではなく、より高速で、より優れた、よりインタラクティブな WEB アプリケーションを作成するための技術であり、この技術は 1998 年頃に適用されました。 AJAX を介して、JS はページをリロードせずに、JS の XMLHttpRequest オブジェクトを通じてサーバーと直接通信できます。これにより、サーバーはページ全体ではなく、必要なデータをリクエストできるようになります。 AJAX の中核は、JS の XMLHttpRequest オブジェクトです。 xhr オブジェクトは IE5 で初めて導入され、非同期要求をサポートするオブジェクトです。

2: ajax の利点

更新せずにデータを更新します。

サーバーと非同期で通信します。

標準に基づいて広くサポートされています。

フロントエンドとバックエンドの分離。

帯域幅を節約します。

3: 作成手順

1. XMLHttpRequest オブジェクトを作成します。

すべての最新のブラウザ (IE7 以降、Chrome、Firefox、Opera、Safari) には XMLHttpRequest オブジェクトが組み込まれています。ただし、IE5 と 6 は ActiveXObject オブジェクト を使用します。

function getAjax() {
var  xmlhttp = null;
if(window.ActiveXObject){
         xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
}
return  xmlhttp;
}

2. サーバーとの接続を開き、送信方法、URL、権限などを指定します。

open メソッド: 新しい HTTP リクエストを作成し、このリクエストのメソッド、URL、検証情報を指定します。

xhr.open(type, url, async, user,password);

type: HTTP リクエストメソッド、GET、POST など。大文字と小文字を区別しない。

url: リクエストアドレス。

async: ブール値、リクエストが非同期かどうか。デフォルトは true です。 true の場合、状態が変化すると、onreadystatechange 属性で指定されたコールバック関数が呼び出されます。 (オプション)

user: サーバーで検証が必要な場合は、ここでユーザー名を指定します。指定しない場合、サーバーで検証が必要なときに検証ウィンドウが表示されます。 (めったに使用されず、理解されるだけです)

password: 検証情報のパスワード部分。ユーザー名が空の場合、この値は無視されます。 (使用量を減らしてください。理解してください)

注:

AJAX では、実際には通常のフォーム送信データをシミュレートしています。通常のフォームはデータを POST するときに Content-Type フィールドを送信するため、AJAX ではこのフィールドの値を application/x-www-form-urlencoded として指定する必要があります。そしてフィールド名と値はエン​​コードされて送信されます。 setRequestHeader を使用します。リクエストの特定の HTTP ヘッダーを個別に指定します。

注: データは encodeURIComponent() 関数を使用してエンコードする必要があります。

3. 指示を送信します。

send(): HTTP サーバーにリクエストを送信し、レスポンスを受け取ります。

このメソッドの同期モードまたは非同期モードは、open メソッドの async パラメーターによって異なります。async が true の場合、このメソッドはすぐに戻ります。 false の場合、このメソッドは要求が完了するまで待機するか、タイムアウトしてから戻ります。

xhr.send(body);

body: このリクエストを通じて送信されたデータ。 GET リクエストを null に設定するだけです。

4. サーバーから返される処理結果を待ちます。

5.クライアントの受信。

6. XMLHttpRequest オブジェクトを解放します。

4: コールバック関数

onreadystatechange属性を通じてreadystate属性が変化した際のイベント処理コールバック関数を指定します。

xhr.onreadystatechange = function(){}

readyState プロパティ: リクエストの現在のステータスを返します。

ステータス:

0: オブジェクトは作成されましたが、初期化されていません (open メソッドが呼び出されていません)。

1: オブジェクトは作成されましたが、send メソッドはまだ呼び出されていません。

2: send メソッドが呼び出されています。ただし、現在のステータスと HTTP のステータスは不明です。

3: データの受信を開始します。レスポンスとHTTPヘッダーが不完全であるため、responseBodyとresponseTextを通じて一部のデータを取得する際にエラーが発生します。

4: データの受信が完了すると、responseBody と responseText を通じて完全な応答データを取得できます。

status 属性: 現在のリクエストのステータス コードを返します。

200 OK: 要求されたドキュメントが見つかり、正しく返されました。

304 未変更: 同じサーバー側コンテンツを含むローカルにキャッシュされたコピーがあります。

403 禁止: 要求者には、要求されたドキュメントに対応する権限がありません。

404 Not Found: 要求されたドキュメントが見つかりませんでした。

statusText 属性: 現在のリクエストの応答行情報を返します。

responseXML 属性: 応答情報を XML Document オブジェクトとしてフォーマットして返します。

responseText 属性: 応答情報を文字列として返します。

5 ネットワーク転送速度。

ES5 に 2 つの新しいメソッドが追加されました:

JSON.parse: JSON 文字列データを JSON オブジェクトに変換します。

JSON.stringify: JSON オブジェクトを JSON 文字列に変換します。

注: 1. ブラウザのサポート: IE8+。

2. JSON 形式文字列のキーまたは文字列値は二重引用符で囲む必要があります。

6 実行 (たとえば、一部のニュース Web サイトでは、一部のユーザーが気に入らないニュースを削除します)

8: フロントエンドとバックエンドの分離

バックエンドはデータ出力とビジネス ロジックの処理のみを担当し、フロントエンドは対話ロジックとインターフェイス表示を担当します。簡単に言うと、フロントエンドの静的ページにはバックグラウンド プログラム コードはなく、バックグラウンドは HTML タグなしでデータを出力します。

フロントエンドとバックエンドの分離は、データ対話を実現するために ajax に依存しています。 (関数のパッケージ化の具体的な分離はデモで説明されています)

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

layer.photos() が画像アドレスを非同期に変更した後の表示異常の問題を解決する方法

以上がAjaxを使用してWebページの非同期更新を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。