Ajaxで簡単なログイン効果を実現する原理

本文を読む前に(1).PHP:登録情報記憶/登録情報検証の基本原理及び(2).php及びSQLで簡単な登録及び登録効果を実現し、多くの重複内容はこれ以上説明しない.

本稿では、単純な効果を達成し、基本原理を理解するために、実際に使用することはできません.

Ajaxは、Webコンテンツを全体的にリフレッシュすることなく、ローカルWebリクエストサーバ情報を使用する非同期更新技術です.これにより、サーバに要求されるデータ量が大幅に減少し、ローカルな要求の失敗によってWebページ全体のロードに影響を及ぼすことはありません.
一.Ajax要求データの基本操作
Ajaxを使用して、既知のドキュメント「test.txt」からファイルを取得するとします.
1.基本操作

  // 1.     ajax      
  //            ，        
  var ajaxObj = new XMLHttpRequest();

  // 2.    ，      ，     
  //     
  // ①. GET   
  // ②.     
  // ③. true       （               ）
  // ④.    
  // ⑤.     
  ajaxObj.open("GET", "test.txt", true);
  // ajaxObj.open("GET", "test.php", true); //         

  // 3.            
  ajaxObj.send();

  // 4.               ，      
  // onreadystatechange        
  ajaxObj.onreadystatechange = function() {
   if (ajaxObj.readyState == 4) {
    //    http       ，          
    if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
     //       ，       php   echo   
     alert(ajaxObj.responseText);
    };
   };
  };

このとき、test.txtファイルに書き込まれた内容を取得するためにファイルを実行します.
2.readyState説明ajaxObj.readyState == 4とは何ですか.ここには実は種の状態があります:0,1,2,3,4
≪ステータス｜Status｜emdw≫
説明
0
初期化されていない状態:この段階でXMLHttpRequestオブジェクトが作成されたかどうかを確認し、openメソッドを使用して準備するために値が0の場合、オブジェクトがすでに存在していることを示します.そうしないとエラーが発生します.
1
読み込みステータス:XMLHttpRequestオブジェクトを初期化します.openメソッドを呼び出し、リクエストを設定し、send()メソッドを呼び出してサーバにリクエストを送信します.1は、サーバにリクエストを送信していることを示します.
2
ロード完了:このフェーズは、サーバから送信されたデータを受信したばかりで、このデータは元のデータであり、クライアントに直接使用することはできません.次のフェーズの準備をします.
3
≪解決｜Resolution｜ldap≫:この段階では、受信したサーバー側の応答データを解析します.すなわち,サーバ側応答ヘッダから返されるMIMEタイプに応じて,responseBody,responseTextまたはresponseXML属性でアクセス可能な形式にデータを変換し,クライアント呼び出しに備える.ステータス3は、データを解析していることを示します.
4
完了:この段階ですべてのデータがクライアントで利用可能なフォーマットに解析されたことを確認し、解析が完了したことを確認し、値が4であることはデータの解析が完了したことを示し、XMLHttpRequestオブジェクトの対応する属性でデータを取得することができる.
これらの場合,4のみがクライアントが操作可能であり,残りはコンピュータが独自に処理する.
3.パッケージ
しかし、このように使用するのは不便なので、このjsコードをJSファイルにカプセル化し、呼び出すたびにいいです.名前はAjax_パッケージ.js

//    Ajax     
function ajaxFn(url,succFn) { // succFn                  
    var ajaxObj = new XMLHttpRequest();
    ajaxObj.open("GET", url, true);
    ajaxObj.send();
    ajaxObj.onreadystatechange = function() {
    if (ajaxObj.readyState == 4) {
    if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
    //             
    succFn(ajaxObj.responseText);
      };
    };
  };
};
//         
ajaxFn("test.txt",function (data) {
    alert(data);
});

二.ログインが成功したかどうかを検証するインスタンス
1.HTMLファイル