すべてのチュートリアルでは、ネット上の資料でも書籍でも.ajaxをマスターするには、html+css+javascriptを事前にマスターすればいいと言われていますが、多くの先端初心者たちが学び始めました.
実は......あなたたちはバックグラウンドの環境を作っていませんね.
1.まずバックグラウンド環境を作りましょうか?例えばphp
私たち~先端の初心者にとって、PHPを精進する時間がこんなに多いのではないでしょうか.だから、php環境構築をお勧めします:phpstudy、次のステップのインストールだけでOKです.
私はPHPStudyをDディスクにインストールしたので、Dディスクに入ってphpstudyフォルダの中のWWWフォルダを見つけました.
WWWフォルダは私たちのパソコンのサーバーに相当します.後で書いたものはすべてWWWフォルダに入れます.
WWWフォルダの下に2つのファイルを作成します.index.htmlとhandle.php
さっき新しく作ったindexをテストしてみましょう.htmlにコードを勝手に書きます.ブラウザを開いて、localhostを入力して車に戻って、さっき書いたホームページを開くことができれば、私たちが成功したことを説明します.
もし失敗したら、ポートの衝突かもしれないし、phpstudy木が実行しているかもしれない~自分で調べてデバッグしてみよう
2.PHPで簡単なバックグラウンドアプリを書きましょう.
index.html

GETは私たちが使う伝送方式を代表して、対応しているのはPOSTです.Inputラベルのidはlabelラベルのfor属性に対応する.inputラベルの中のname属性は、PHPに接続して使用します.
handle.php

"  ","sex"=>" ","age"=>"20"),
    array("name"=>"  ","sex"=>" ","age"=>"19"),
    array("name"=>"  ","sex"=>" ","age"=>"21")
    );

$str="        ";

$name=$_GET["name"];

foreach ($student as $value) {
    if($value["name"]==$name){
        $str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"];
        break;
    };
};

echo $str;

 ?>

3.Ajaxの書き換え!
index.html
html:

     ：

  

javascript:

function submit(){
        
        var name=document.getElementById('name').value
               var text=document.getElementById('text')

        var XHR=new XMLHttpRequest();
               XHR.open("GET","handle.php?name="+name);
               XHRsend();
               XHR.onreadystatechange=function(){
            text.innerHTML=XHR.responseText
        }

注意:誰かがソースコードのtextをinnerHTML=XHR.responseTextがalert(XHR.responseTXT)に変更されると、コマンドが複数回実行されることがわかります.この时、コードを少し変更します:(原因、文章の后であなたは探し当てることができます)

   ......
    XHR.onreadystatechange=function(){
             if(XHR.readyState==4){alert(XHR.responseText)};
                                     }
   ......

4.例はすでに成功したので、正式に勉強に入りましょう.
ajaxのメリット
我々の最初の例では,submitボタンを介してphpバックグラウンドにコミットし,データの処理操作を行う.この操作には、ページ全体のデータをバックグラウンドに同時に提出する必要があるという弊害があります.
栗を挙げて、もし私达が1つのウェブサイトで登录するならば、ニックネーム、パスワード、性别、年齢などの情报を书き终えて、提出した后に、バックグラウンドはあなたにニックネームがすでに使用されていることを教えて、OK私达はニックネーム、パスワード、性别、年齢などを书いて、再び提出して、またあなたにニックネームが依然として使用されていることを教えます.この时、あなたはとてもLOWの名前をつけて、今度はもう問題がないと思いますか?結果を提出した後、バックグラウンドはあなたのパスワードが短すぎると再び情報を記入する必要があると教えてくれました.う~ん、あきらめましょう!
ajaxテクノロジーを使うと?データをバックグラウンドに逐条提出したり、いつでもどこでも提出したりすることができます.例えば、ニックネームを記入したら、楽屋がすぐにニックネームが使われていることを教えてくれます.OK、変えたらいいですよ.
AJAXの使用
1.AJAXの作成

    var XHR=new XMLHttpRequest();

2.サーバへのリクエスト送信

XHR.open("GET","handle.php",true);
XHR.send();

Openには3つのパラメータがあります.それぞれデータ転送方式、ファイル転送、非同期かどうかです.
私達の伝送方式がPOSTの時、send()を使うことができて、もしGETの方式ならば、sendの中でパラメータnullを書くことを推薦します
3.GET vs POST
一言:getはもっと速く、postはもっと強い
4.サーバーの応答——あなたは値を伝えて、どうして何かを伝えなければなりませんか?
ツールバーの
説明
responseText
文字列形式の応答データを取得します.
responseXML
XML形式の応答データを取得します.

XHR.responseText;
XHR.responseXML;

5.応答イベント--いつデータを返すことができますか?
onreadystatechangeイベントの2つのプロパティ:readystate status

   readyState    ，     onreadystatechange   。
readyState      XMLHttpRequest      。

XHR.onreadystatechange=function(){
                console.log(XHR.readyState)
                console.log(XHR.responseText)

ツールバーの
説明
readyState
XMLHttpRequestの状態0を返します.要求が初期化されていません.サーバは接続を確立しました2.リクエスト受信3.要求処理中4.リクエスト完了、応答完了
status
200:「ok」404:エラー、ページが見つかりません