AJAXでのJS（ユーザログイン）

完全なユーザー名アヤックス非同期テスト

htmlコード

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
    <メタ文字セット= "UTF-8">
    <タイトル名が存在している</ TITLE>
</ head>の
<身体>
<フォームアクション=「」メソッド=「ポスト」>
    <表>
        <TR>
            <TD>ユーザー名</ TD>
            <TD>の<input type = "text" の名= "ユーザ名" プレースホルダ= "请输入用户名" クラス= "名前" ID = "名前"> </ TD>
            <TD> <スパンクラス= "ノート"> </ span>を</ TD>
        </ TR>
        <TR>
            <TD>パスワード</ TD>
            <TD>の<input type = "パスワード" 名前= "パスワード" クラス= "PWD"> </ TD>
        </ TR>
        <TR> <TD>の<input type = "提出" ID = "チェック"> </ TD> </ TR>
    </ TABLE>
</フォーム>
</ BODY>
</ HTML>

（マウスの検証を完了するためにユーザ名タグ、バックエンドとのAJAXエンジン自動非同期相互作用を除去する）JSコード

ます。<script type = "text / javascriptの">
     のvar名=のdocument.getElementById（ '名' ）;
    VAR PWD = document.getElementsByClassName（ 'PWD'）[0 ];
    document.querySelector（ '.nameの'）のonblur = 関数（）{
        document.querySelector（ '注'）のinnerHTML = '検証......' ;
         // 1.オブジェクトを作成
        するvar XHRを= 新しい新しいのXMLHttpRequest（）;
         // 2.ライン設定要求（リクエストデータは、URLの後に書き込まれます） 
        XHR .Open（「POST」、「check.php」）;
         // 3セット要求ヘッダ（要求を省略することができるGET、POSTを送信しないデータを省略してもよい） 
        xhr.setRequestHeader（「コンテンツタイプ」、「ファイルアプリケーション/ X- -体、URLエンコードWWW」）;
         // コールバック関数の3.5登録され 
        xhr.onload = 関数（）{
             IF（xhr.status == == 200は&& xhr.readyState 4です。）
            {
                console.log（xhr.responseText）。
                VaRのデータ= JSON.parse（xhr.responseText）。
                console.log（データ）。
                もし（data.flag == 3 ）{
                    document.querySelector（ '注'）のinnerHTML = data.msg。
                }
            }
        }。
        // 4.体は、要求（空nullに直接、要求が空または書き込みnullのポスト要求データが存在しない場合は、ここに書き込まれたデータ、または書き込みを取得）を送信する
        // 送信データを送信するためのPOSTリクエストが書かれている
        // キー=値＆キー2値2 = 
        xhr.send（ "ユーザ名=" +のdocument.getElementById（ '名' ）.Valueの）;
    }。
</ SCRIPT>

背景のphpファイル（check_ajax.php）：

<？PHP
 // ますprint_r（$ _ POST）; 
$フラグ = 0 ;
$ MSG = '失敗' ;
$ユーザ名 = ISSET（$ _POST [ 'ユーザー名']）？$ _POST [ 'ユーザー名']： "" ;
$パスワード = ISSET（$ _POST [ 'パスワード']）？$ _POST [ 'パスワード']： "" ;

IF（$名 === 'ADMIN' ）{
     $のフラグ = 3 ;
     $ MSG = '正しいユーザ名' ;
} 他{
     $のフラグ = 3 ;
     $ MSG = 'ユーザ名が存在しません' 。
}
？>

結果は以下の通りであります：

AJAXの知識----- - onreadystatechangeにイベント

　リクエストを送信する場合、クライアントは要求を完了する時期を決定する必要があり、そのため、XMLHttpRequestオブジェクトは、提供onreadystatechange要求の状態をキャプチャして、応答を達成するためにイベントメカニズムを。

　要求がサーバーに送信されると、応答に基づいて、我々はいくつかのタスクを実行する必要があります。

　たびreadyState、あなたは変更トリガonreadystatechangeイベントを。

　readyStateXMLHttpRequestのプロパティのステータス情報があります。

　ここではXMLHttpRequestオブジェクトの三つの重要なプロパティは次のとおりです。

II。ユーザ名とパスワードを提出する際に検証が完了した後、

方法1つのユーザ名とパスワードを認証するために使用される。背景文書を作成する（check_login.php）

方法2は、AJAXを使用して実装しました

AJAXでのJS（ユーザログイン）

AJAXの知識----- - onreadystatechangeにイベント

おすすめ