AJAX を使用してページログインと登録ユーザー名の検証を実装する簡単な例-jsチュートリアル-php.cn

AJAX を使用してページログインと登録ユーザー名の検証を実装する簡単な例

亚连

リリース： 2018-05-23 14:14:01

オリジナル

3386 人が閲覧しました

ここで、AJAX を使用してページのログインと登録ユーザー名の検証を実装する簡単な例を紹介します。今からそれを皆さんと共有し、皆さんの参考にしてください。

AJAX は「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。その中心となるのは、JavaScript オブジェクト XMLHttpRequest です。 Internet Explorer 5 で初めて導入されたこのオブジェクトは、非同期要求をサポートするテクノロジです。つまり、XMLHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

登録時に登録情報を送信すると、数秒待ってからページがリロードされ、「ユーザー名が使用されています」というメッセージが表示されます。ここでは、AJAX を使用して非同期リクエストを実装することで、ページをリロードせずにデータベースと通信できます。

XMLHTTPRequest オブジェクトを作成する

JavaScript を使用して HTML ページに XMLHTTPRequest オブジェクトを作成し、AJAX 非同期リクエストを実装します:

<span style="font-size:14px;">    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
      xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true);
      xmlhttp.onreadystatechange = function ()
      {
        if (xmlhttp.readyState == 4)
        {
          if (xmlhttp.status == 200)
          {
            alert(xmlhttp.responseText);
          }
          else
          {
            alert("AJAX服务器返回错误！");
          }
        }
      }
      xmlhttp.send(); 


</span>

ログイン後にコピー

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP') ; //互換性を考慮して XMLHTTP オブジェクトを作成します

xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true) //サーバーの GetDate1.ashx に送信するための「準備」を行います。リクエストの送信 (GET にはキャッシュの問題が発生する可能性があります)。ここではまだリクエストは行われていません。

readyState == 4 は、サーバーが完了データを返したことを意味します。 2 (リクエストは送信され、処理中)、3 (レスポンス内のデータの一部は利用可能ですが、サーバーはレスポンスの生成を完了していません) を経験したことがあるかもしれません

注:

Don 't think if (xmlhttp .readyState == 4) 送信前に実行するのは間違っているように感じます。xmlhttp.send(); はその後にのみリクエストの送信を開始します。このとき、サーバーがデータを返すのを待たずにリクエストの送信が開始され、実行が継続されるため、ブロックされず、インターフェイスがスタックすることはありません。これが AJAX の「非同期」の意味です。

AJAXのカプセル化

実際のプロジェクト開発ではAJAXの非同期リクエストが多くの場所で使用されますが、オブジェクトを作成するコードが長くてコピペするのが面倒で、そのため、AJAX をカプセル化する必要があります。これを js 関数ファイルにカプセル化し、参照用に Web ページにインポートします。

単純な AJAX カプセル化コード:

<span style="font-family:Times New Roman;font-size:14px;">     function ajax(url,onsuccess,onfail)
    {
      var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
      xmlhttp.open("POST", url, true);
      xmlhttp.onreadystatechange = function ()
      {
        if (xmlhttp.readyState == 4)
        {
          if (xmlhttp.status == 200)
          {
            onsuccess(xmlhttp.responseText);//成功时逻辑操作
          }
          else
          {
            onfail(xmlhttp.status);//失败是逻辑操作
          }
        }
      }
      xmlhttp.send(); //这时才开始发送请求
    }</span>

ログイン後にコピー

カプセル化が完了したら、ログイン判定コードの記述を開始できます (私は .net を使用しています):

まず、HTML ページの login.htm と ashx 汎用ハンドラーの userhandle を作成します。、要求された URL にはアクションパラメーターが含まれており、要求は一般的なハンドラーで処理されます。

function Submit1_onclick() {
      var name = document.getElementById("name").value;
      var psw = document.getElementById("psw").value;
      if (psw != "" && name != "") { 
       //调用AJAX
       ajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) {
          if (resText == "fail") {
            alert("用户名或密码错误！");
            return false;
          }
          else {
            document.write(resText);
          }
        })
      }
      else {
        alert("请输入完整登陆信息！");
        return false;
      }
    }

ログイン後にコピー

汎用処理プログラムでリクエストアクションを受け取り、該当するクエリを判断して実行し、文字列を返します。リクエストを受け取った後、フロントページが対応する関数を判断して実行します。

 public void login(HttpContext context)
    {
      userBLL ub = new userBLL（）；
      string userName = context.Request["userName"];
      string userPsw = context.Request["psw"];   
      bool b = ub.Login(userName, userPsw);//封装好的bll层方法，判断用户名密码是否正确
      if (b == true)
      {
        context.Session["Name"] = userName;
        context.Session["role"] = "user";
        context.Response.Write("success");
       }
      else
      {
        context.Response.Write("fail");
      }
    }

ログイン後にコピー

サーバーは判定が完了すると成功か失敗かをクライアントに送信します。以上でAJAX非同期リクエストによるログインが完了します。

ユーザー名を決定するための登録については、そのまま貼り付けます:

function check() {
      var userName = document.getElementById("Text1").value;
      if (userName == "" || userName == null) {
        document.getElementById("nameMeg").style.color = "red";
        document.getElementById("nameMeg").innerHTML = "用户名为6-10位英文或数字";
      }
      else { 
      ajax("../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) {
        if (resText == "forbid") {
          document.getElementById("nameMeg").style.color = "red";
          document.getElementById("nameMeg").innerHTML = "用户名含有非法词语";
        } else if (resText == "already have") {
          document.getElementById("nameMeg").style.color = "red";
          document.getElementById("nameMeg").innerHTML = "用户名已被使用";
        } else {
          document.getElementById("nameMeg").style.color = "green";
          document.getElementById("nameMeg").innerHTML = "可以使用";
        }
      })
      }
    }

ログイン後にコピー

上記は、皆さんのためにまとめたものです。今後、皆さんのお役に立てれば幸いです。

Ajax 投稿リクエストのジャンプページ

Ajax 送信フォームページがすぐに更新される

Ajax が新しいウィンドウを開いてブラウザーによってブロックされる場合の 2 つの解決策

以上がAJAX を使用してページログインと登録ユーザー名の検証を実装する簡単な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。