ajaxのリクエスト処理とリクエスト方法の説明（コード例）

この記事では、ajax のリクエスト処理とリクエストメソッドについての説明 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

ajax の正式名称は、Asynchronous JavaScript and XML です。このうち、Asynchronous は非同期を意味し、従来の Web 開発で使用される同期方式とは異なります。編集者の知識によると、ajax は以前から存在していましたが、当時は使用されておらず、その後 Google が Google マップで使用したため、このページには必要がなくなりました。更新され、ユーザー エクスペリエンスは非常に良好でした (当時の Web サイトにはユーザー エクスペリエンスがありませんでした^_^)

ajax 原則

XMLHttpRequest が中心的なメカニズムですajax は IE5 で初めて導入され、非同期リクエストをサポートするテクノロジーです。簡単に言うと、JavaScript はユーザーをブロックすることなくサーバーにリクエストを送信し、応答をタイムリーに処理することができ、ページを更新しない効果を実現します

#

var xhr = new XMLHttpRequest()
//IE浏览器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            success(xhr.responseText)
        } else {
            fail && fail(xhr.status)
        }
    }
}

#xhr.open()

3 番目のパラメータ: true/fasle デフォルト値は true です。

false は、データが取得されない場合は、データが取得されるまで続行する前にデータが返されるのを待つことを意味します。 。
True は、待機せずに直接返すことを意味します。これは、いわゆる非同期データ取得です。

#xhr.send

送信されるデータは文字列タイプを受け入れます

xhr.onreadystatechange

状態が変化するたびにトリガーされるイベント ハンドラー

xhr.readyState には次の状態があります

0 リクエストは初期化されておらず、オープン メソッドも初期化されていません呼び出されました

1 サーバー接続が確立され、open メソッドが呼び出され、send メソッドがまだ呼び出されていません

2 リクエスト、つまりヘッダーが受信されました情報を受信しました

3 リクエストの処理中、つまりレスポンスボディに到達しました このとき、レスポンスと http ヘッダーが不完全なため、データの一部を取得する際にエラーが発生します。

4 リクエストは完了しており、この時点で、responseXml と responseText を通じてデータを取得できます。 .statusCommon HTTP ステータス

0**: 初期化されていません

1**: リクエストを受信しました、処理を続行します

2**: 操作は正常に受信されました。分析され、受け入れられました

3**: このリクエストはさらに処理する必要があります

4**: リクエストには構文エラーが含まれているか、完了できません

5**:サーバーは完全に有効なリクエストの実行に失敗しました

#jQuery.ajax

$.ajax({
    url: '',
    Type: '',
    data: '',
    async:true,
    dataType: '',
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Access-Toke");
    },
    success: function (data) {
        fn1()
    },
    error: function (err) {
       error && error(err) 
    }
})
fn2()

success-function

$.ajax success メソッドは成功したコールバックを取得し、jQuery は次の状態を決定します。ソース コードには次のコードがあります (およそ 8193 行目)

isSuccess = status >= 200 && status < 300 || status === 304

304- --よく言われるのは、ブラウザにはまだキャッシュがあるということです。

async-Boolean value

async のデフォルト設定 値は true です。つまり、ajax がリクエストを送信すると、サーバーが戻るのを待ちながら、フロント デスクはサーバーが正しい結果を返すまで、ajax ブロックの背後でスクリプトを実行し続けます。現時点では 2 つのスレッドが実行されます。1 つのスレッドは ajax ブロックがリクエストを送信した後、スクリプトは ajax ブロックの後に送信されます (別のスレッド)

asyn が false に設定されている場合、ajax リクエストは同期です。たとえば、この時点で ajax ブロックがリクエストを送信した後、fn1() で待機し、fn1() 部分が実行されるまで fn2() は実行されません。

dataType--String

dataType では次の値を指定できます

xml: JQuery で処理できる XML ドキュメントを返します。

html : プレーン テキストの HTML 情報を返します。含まれているスクリプト タグは、DOM に挿入されると実行されます。

script: プレーン テキストの JavaScript コードを返します。結果は自動的にキャッシュされません。キャッシュパラメータが設定されていない限り。リモート リクエスト中 (同じドメインの下ではない)、すべての post リクエストが get リクエストに変換されることに注意してください。

json: JSON データを返す

jsonp: JSONP 形式。 myurl?callback=? などの SONP 形式を使用して関数を呼び出すと、JQuery は最後の「?」を正しい関数名に自動的に置き換えてコールバック関数を実行します。

text: プレーン テキスト文字列を返します

beforeSend--Function

カスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトを変更できる関数。 beforeSend で false が返された場合、この ajax リクエストはキャンセルできます。 XMLHttpRequest オブジェクトは唯一のパラメータです

ajax の長所と短所

長所: 非同期によりユーザー エクスペリエンスを向上させ、不要なデータの往復を削減し、部分的な更新を実現します

短所:はい 検索エンジンのサポートは比較的弱いです

以上がajaxのリクエスト処理とリクエスト方法の説明（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。