ユーザー名の登録までをAjaxで実現-jsチュートリアル-php.cn

今回は、Ajax でユーザー名を登録する完全なプロセスをお届けします。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('Microsoft.XMLHTTP');
      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('Microsoft .XMLHT TP '); //XMLHTTP オブジェクトを作成します、互換性を考慮します

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

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

注:

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

AJAXのカプセル化

実際のプロジェクト開発ではAJAXの非同期リクエストが多くの箇所で使用されますが、create objectのコードが長すぎてコピペするのが面倒で、そのため、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('Microsoft.XMLHTTP');
      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 = "可以使用";
        }
      })
      }
    }