Ajaxを使用してWebページの非同期更新を実装する方法-htmlチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-02-28 09:41:11

オリジナル

2209 人が閲覧しました

今回は、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(){}