ajax とは一体何ですか? ajax の背景と使い方の紹介 (分析例付き)

この記事では、ajaxの詳細、ajaxの具体的な意味、ajaxの使い方を中心に紹介します

まずは、ajaxとは何かを見ていきましょう。 ?

ajaxという名前をよく聞くけど、ajaxって何？

1: 背景の紹介

まず最初に、私と話してください、ねえ、それをアヤックスと発音しないでください〜。

AJAX = 非同期 JavaScript および XML。

AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。

AJAX の最大の利点は、ページ全体をリロードすることなく、サーバーとデータを交換し、Web ページのコンテンツの一部を更新できることです。

AJAX はブラウザーのプラグインを必要としませんが、ユーザーがブラウザーで JavaScript を実行できるようにする必要があります。

2. 知識分析:

Ajax は、JS を使用してリクエストを開始し、サーバーから返されるコンテンツを取得します。これまでの技術との最大の違いは「ページが更新されない」ことで、ユーザーエクスペリエンスが向上する、それだけです。

では、ajax リクエストを送信するにはどうすればよいでしょうか?

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

var xhr = new XMLHttpRequest(); ie6 以前のバージョンをサポートするには、var xhr=new ActiveXObject()

2. リクエストが成功した後のステータスの変化を監視します

3. リクエストパラメータを設定する

4. リクエストを開始する

5.

DOM を操作して動的部分更新を実現する

そして、完全な

HTTP リクエストとは何でしょうか?

完全なリクエストは 4 つの部分で構成されます

次に、成功したリクエストのステータス変化を監視する必要があります

onreadystatechange: readyState の変化を監視するために使用されます

readyState: 現在のリクエストのステータスを表します背景

status: 処理の結果を示します

ここで、readyState: 現在のリクエストのバックグラウンドのステータスを示します

0: リクエストは初期化されていません (open() がまだ呼び出されていません)

1:リクエストは確立されましたが、まだ送信されていません (send() がまだ呼び出されていません)

2: リクエストは送信され、処理中です

3: リクエストは処理中です。通常は応答内の一部のデータです利用可能です

4: 応答は完了し、取得および使用できます。サーバーは

および

statusに応答しました: 処理結果(ステータスコード)を示します1XX。リクエストが受信され、処理中であることを示します

status == 200 は、処理結果が OK であることを示します

ステータス コード

:200 ～ 300 は、サーバーが正常に戻ったことを意味します 304: リクエスタの最後のリクエスト以降、Web ページが変更されていない場合、サーバーはこの応答を返すように構成されているため、帯域幅とオーバーヘッドが節約されます

404: オブジェクトが見つかりません (404 が見つかりません)

503: サーバーのタイムアウト

リクエストパラメータを設定します

xhr オブジェクトは 3 つのパラメータを受け入れます

1: リクエストのタイプを示します

2 : リクエストのURLを示します
3: 非同期かどうかを示します

get/post/put/delete

Getメソッドとpostメソッドの違い:

getはデータを取得することです。 null または空にすることができます。情報の送信には制限があり、通常は 2000 文字です。一般的にクエリ (電源など) に使用されます。

post メソッドを使用してデータを送信する場合は、setRequestHeader( を使用する必要があります。 ) HTTP ヘッダーを追加すると同時に、post の send() メソッドで送信するデータの値を書き込む必要があります。これは通常、サーバーのリソースを変更するために使用されますが、情報量に制限はありません。 、より安全です (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの

AJAX 開発マニュアル
列にアクセスして学習してください)

3 FAQ

post submit を使用するときは content-type を忘れる必要があります問題

4.解決策

xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code);

Content-type は open と send の間にリクエストヘッダーとして配置する必要があります

5. コーディングの練習

var xhr = new XMLHttpRequest();
function ip() {
    var name = $("#name").val();
    var code = $("#code").val();
// 指定通信过程中状态改变时的回调函数
    xhr.open("post", "/carrots-admin-ajax/a/login",true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=" + name + "&pwd=" + code);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                if (JSON.parse(xhr.responseText).code >= 0) {
                    window.location.href = "http://dev.admin.carrots.ptteng.com/";
                } else {
                    $(".alert").html("该用户不存在或密码不正确");
                }
            }
        }
    };
}
$(function () {
    $("#summit").click(function () {
        var name = $("#name").val();
        var code = $("#pwd").val();
        $.ajax({
            type: "POST",
            url: "/carrots-admin-ajax/a/login",
            data: {
                "name": name,
                "pwd": code
            },
            // beforeSend: function(xhr){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");},
            datatype:"json",
            success: function (data) {
                console.log(data);
                if (JSON.parse(data).code==0) {
                    alert(JSON.parse(data).message);
                }
                else {
                    alert(JSON.parse(data).message)
                }
            }
        })
    })
});

6 拡張思考

Ajax の利点と欠点は何ですか?

参考資料

jqury ajaxメソッド

初心者チュートリアル

その他のディスカッション

1. リクエストボディとは何ですか?

リクエスト本文は、ページフォームのコンポーネント値を、param1=value1¶m2=value2 のキーと値のペアの形式でフォーマットされた文字列にエンコードし、複数のリクエストパラメータのデータを保持します。メッセージ本文がリクエスト パラメーターを渡すだけでなく、リクエスト URL も「/chapter15/user.html?param1=value1¶m2=value2」のようなメソッドでリクエスト パラメーターを渡すことができます。

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

application/x-www-form-urlencoded とはどういう意味ですか?

form の enctype 属性は、一般的に使用される 2 つのメソッドです: application/x-www-form-urlencoded と multipart/form-data です。デフォルトは application/x-www-form-urlencoded です。

x-www-form-urlencoded

アクションがgetの場合、ブラウザはx-www-form-urlencodedエンコード方式を使用してフォームデータを文字列(name1=value1&name2=value2...)に変換します。 , そして、この文字列が ? で区切られて URL の末尾に追加され、新しい URL がロードされます。

3. jQuery は受け入れられるデータ型をどのように設定しますか?

データ型: "json" を使用し、受け入れたいデータ型を記述します

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの AJAX ユーザー マニュアル 列にアクセスして学習してください)。ご質問がございましたら、以下にメッセージを残してください。

以上がajax とは一体何ですか? ajax の背景と使い方の紹介 (分析例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。