AJAX 経由で非同期リクエストを行う方法

#今日私が共有するのは、AJAX を介して非同期リクエストを行う方法です。これは一定の参考価値があり、皆様のお役に立てれば幸いです。

AJAX の定義

AJAX は Asynchronous JavaScript XML の略称で、これを使用すると、リロードせずに JavaScript を通じてサーバー上の最新のコンテンツを直接取得できます。

ページ。 Web をよりユーザーフレンドリーにします。実際、AJAX はブラウザーによって提供される一連の API であり、JavaScript を通じて呼び出して、コードを通じてリクエストと応答を制御できます。

HTTP はリクエスト/レスポンス プロトコルです。これは、ブラウザが Web サーバーにリクエストを送信し、Web サーバーがブラウザに返信する応答を作成し、ブラウザがそのテキストを視覚的にレンダリングすることを意味します。ユーザー。ただし、ページのごく一部のみを更新する必要がある場合は、AJAX を使用し、ブラウザーの DOM モデルを使用して応答をページに動的に挿入する必要があります。

AJAX 非同期リクエストの 4 つのステップ

(1) ブラウザー用の XMLHttpRequest オブジェクトを作成します

var xhr = new XMLHttpRequest();

(2) リクエストを作成して送信しますサーバー関数:

xhr.open('GET', './demo.php');

(3) コネクション経由でリクエストが発生

xhr.send(string);

(4) 4つのxhr状態変更イベント処理関数を指定

xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)

readyState Status

0: xhr は作成されましたが、open メソッドが呼び出されなかったことを示します。

1: open() メソッドが呼び出され、接続が確立されました。

2: send() メソッドが呼び出され、ステータス行と応答ヘッダーが取得できます。

3: 応答本文のロード中、responseText 属性にはすでにデータが含まれている可能性があります。

4: 応答本文がロードされ、responseText を直接使用できるようになります。

例:

var xhr = new XMLHttpRequest()//0状态
xhr.open('GET', 'time.php')//1状态，open方法已经调用了，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2，3，4三种状态，2分别为接受到了响应头但还没有接受到响应体；
正在下载响应报文；
报文下载下来处理响应体
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//处理函数

要約: 上記がこの記事の全内容であり、ajax を学習するすべての人に役立つことを願っています。

以上がAJAX 経由で非同期リクエストを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。