AJAX で非同期同期リクエストを実装する方法-jsチュートリアル-php.cn

AJAX で非同期同期リクエストを実装する方法

php中世界最好的语言

リリース： 2017-12-04 13:43:45

オリジナル

2856 人が閲覧しました

このチュートリアルでは、AJAX で非同期リクエストと同期リクエストを実装する方法について説明します。FormData タイプとイベントリスニングインターフェイスの実装には AJAX が必要であることがわかっています。では、ページデータが変更されたときにのみサーバーから新しいデータをリクエストする方法はありますか? 、ページの更新を妨げながら、ページに表示されているデータを動的に置き換えますか?今日は AJAX の概念について話しましょう。

XMLHttpRequestオブジェクト

XMLHttpRequestは単なるJavaScriptオブジェクトであり、正確にはコンストラクターです。言い換えれば、これはまったく神秘的ではありません。唯一の特別な点は、それが (JavaScript ネイティブではなく) クライアント (つまりブラウザー) によって提供されることです。それに加えて、プロパティ、メソッド、新しいキーワードを使用してインスタンス化する必要があるため、それらをマスターするだけで済みます。

XMLHttpRequest を使用してデータを取得します

ページの更新を防止することでプロジェクト内のデータを取得するために AJAX が使用されることはわかっていますが、データはどこから取得されるのでしょうか?このデータを取得する方法はどうすればわかるのでしょうか?その答えは、通常、さまざまなデータベースとやり取りするために API を使用するからです。

「API」とは「Application Programming Interface」（つまり、Application Programming Interface）の略で、いくつかのデータが公開されて使用されるのを待っており、このデータを取得する方法は API を使用することであると想像できます。 API の通常の形式は URL であり、取得するデータを見つけるのに役立つ指定されたパラメーター名とパラメーター値を提供します。

XMLHttpRequest - リクエストを準備します

サーバーと対話するには、まず次の質問について考える必要があります:

データを取得したいのか、それともデータを保存したいのか? ——リクエストの方法は「GET」か「POST」ですか？ ——つまり、対応するAPIのアドレスをどうやって待つのか？ - 「同期」と「非同期」の 2 つのオプションがあります。

XMLHttpRequest インスタンスの .open() メソッドは、上記の 3 つの質問に答えるために使用されます。 .open() メソッドは、リクエストメソッド、リクエスト URL アドレス、および非同期リクエストかどうかを示すブール値の 3 つのパラメータを受け取ります。

以下は .open() メソッドの呼び出し例です:

// このコードは、「example.php」の GET 同期リクエストを開始します。

xhr.open("get", "example.php", false)

// "DELETE"、"HEAD"、"OPTONS"、"PUT" は、open() の最初のパラメータとしても使用できます方法。

上記のコードでは、3番目のパラメータをfalseとして渡すことで同期を実現しています。同期に設定すると、send() メソッドはリクエストが完了するまでブロックされることに注意してください。

(3) 同期リクエストと非同期リクエスト

AJAX は非同期だと思われがちですが、実はそうではありません。AJAX は、データを取得した後にページを更新しないようにする技術です。同期か非同期かに関係なく、開発者はビジネスニーズに合わせて構成する必要があります (通常は非同期ですが)。

気になるかもしれませんが、いつ同期 AJAX を使用する必要があるのでしょうか?私の個人的な経験から言えば、該当するシーンを見つけるのは難しいようです。

最後に、応答を待つ「同期」と応答を待つ「非同期」の違いを簡単に説明します。「同期」は、リクエストが送信されると、後続の JavaScript コードは実行されないことを意味し、「非同期」は、リクエストが送信されると、それ以降の JavaScript コードは実行されないことを意味します。これは、リクエストが送信された後、後続の JavaScript コードが実行され続け、リクエストが成功すると、対応するコールバック関数が呼び出されることを意味します。

XMLHttpRequest level 2 of FormData type

W3C は XMLHttpRequest レベル 2 仕様を提案しましたが、すべてのブラウザーが仕様で指定されている内容を実装しているわけではありませんが、それでもすべてのブラウザーまたはほとんどのブラウザーで実装されている内容がいくつかあります。

FormData型

FormDataは、XMLHttpRequestレベル2によって提供される新しいデータ型(コンストラクター)です。POSTリクエストをフォーム送信として偽装する方法をまだ覚えていますか? FormData を使用すると、XHR2 オブジェクトが渡されたデータ型が FormData のインスタンスであることを認識し、適切なヘッダー情報を自動的に構成するため、このプロセスが容易になります。

POST リクエストをフォーム送信として偽装するにはどうすればよいですか?

POST メソッドを使用してこのシーケンスでフォームデータを送信する場合、「Content-Type」リクエストヘッダーをこの値に設定する必要があります。

xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

注: これはデフォルトのメソッドであるため、フォームを使用する場合は必須の値ではありません。

FormData は次のように使用されます:

// 添加数据
let data1 = new FormData()
data1.append("name", "Tom")
xhr.send(data1)
 
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)

ログイン後にコピー

さらに、FormData のもう 1 つの利点は、従来の AJAX リクエストと比較して、バイナリデータ (画像、ビデオ、オーディオなど) をアップロードできることです。

FormDataのブラウザ互換性。

デスクトップ版 IE 10+ およびその他のブラウザがサポートされています

モバイル版 Android、Firefox Mobile、OperaMobile がサポートされていますが、他のブラウザは不明です

XMLHttpRequest レベル 2 イベントリスニングインターフェイス

XMLHttpRequest の最初のバージョンでは、onreadystatechange イベントのコールバック関数のみを指定できます。イベントはあらゆる状況に対応します。

XMLHttpRequest の 2 番目のバージョンでは、より多くのイベントに対してコールバック関数を指定できます。

onloadstart リクエストが発行されました

onprogress データの送信とロード中

onabort リクエストが中止されました。たとえば、ユーザーが abort() メソッドを呼び出しました

onerror リクエストが失敗しました