Using AJAX to achieve page landing and register user name verification of a simple instance _ajax related

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.

AJAX is a technique for creating fast-moving web pages. Its core is JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and process the response without blocking the user.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

Just imagine if the registration information, after a few seconds after the page overload, the result of a pop-up box to tell you that "username has been used", it would be very annoying thing. So here, using AJAX to implement asynchronous requests, you can communicate with the database without overloading the page.

Creating XMLHttpRequest Objects

Use JavaScript to create an XMLHttpRequest object in an HTML page to implement an AJAX asynchronous request:

<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 server returns an error!") ");
          }
        }
      }
      Xmlhttp.send (); 


</span>

var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): New ActiveXObject (' microsoft.xmlhttp '); Create XMLHTTP objects, consider compatibility

Xmlhttp.open ("POST", "ajaxtest.ashx" + "i=5&j=10", true); Prepare to issue a POST request to the server's GETDATE1.ASHX (get may have a caching problem). No request has been made here yet.

ReadyState = 4 indicates that the server returned complete data. You may experience 2 before (request sent, in process), 3 (some of the data in the response is available, but the server has not completed the response generation)

Note:

Don't assume that if (Xmlhttp.readystate = 4) executes before send, it feels wrong, xmlhttp.send (); This is the time to start sending the request. At this point began to send the request after the server to return data, continue to execute downward, so will not block, the interface is not card, this is Ajax "A" meaning "asynchronous".

Encapsulation of Ajax

In the actual project development, there will be many use of Ajax asynchronous request, but the creation of object code so long, copy paste is troublesome, but also affect the appreciation of the Code, so need to encapsulate Ajax. Encapsulate it into a JS feature file and import it into a Web page for reference.

Simple Ajax encapsulated post code:

<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) c10/>{
            onsuccess (xmlhttp.responsetext);//Logical Operation
          }
          else
          {
            onfail (xmlhttp.status); The failure is a logical operation}}}
      xmlhttp.send ()///At this point, the request is started
    }</span>

Once the package is complete, we can start writing the login code (I'm using. NET):

First, create an HTML page login.htm and ashx generic handler userhandle.ashx, with an action parameter in the requested URL that handles the request in a generic handler.

function Submit1_onclick () {
      var name = document.getElementById ("name"). Value;
      var PSW = document.getElementById ("PSW"). Value;
      if (PSW!= "" && name!= "") { 
       //Invoke Ajax
       Ajax (". /userhandle.ashx?operate=login&username= "+ name +" &psw= "+ PSW, function (resText) {
          if (ResText =" Fail ") {
            alert ("User name or password is wrong!) ");
            return false;
          }
          else {
            document.write (resText);}}
        )
      }
      else {
        alert ("Please enter full login information!") ");
        return false;
      }
    }

In the general processing program received the request action, judge and execute the relevant query, return a string, the front page received, judge and perform the corresponding function.

 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);//encapsulating the BLL layer method to determine whether the username password is correct
      if (b = = true)
      {context
        . session["Name"] = UserName;
        Context. session["Role" = "user";
        Context. Response.Write ("Success");
      }
      Else
      {context
        . Response.Write ("fail");
      }
    

After the server is judged, send success or fail to the client. This is accomplished by using an AJAX asynchronous request implementation login.

As for the registration is to judge the user name, I just paste it up:

 function check () {var userName = document.getElementById ("Text1"). Value; if (UserName = = "" | |
        UserName = = null) {document.getElementById ("Namemeg"). Style.color = "Red";
      document.getElementById ("Namemeg"). InnerHTML = "User name is 6-10 digits in English or digital"; } else {ajax ("....
          /userhandle.ashx?operate=checkname&username= "+ userName, function (resText) {if (ResText = =" Forbid ") {
          document.getElementById ("Namemeg"). Style.color = "Red";
        document.getElementById ("Namemeg"). InnerHTML = "User name contains illegal words";
          else if (ResText = = "already have") {document.getElementById ("Namemeg"). Style.color = "Red";
        document.getElementById ("Namemeg"). InnerHTML = "username already used";
          else {document.getElementById ("Namemeg"). Style.color = "green";
        document.getElementById ("Namemeg"). InnerHTML = "can be used"; }
      })
      }
    }

The above is a small series for everyone to achieve the use of Ajax page landing and registered user name verification of a simple example of all the content, I hope that we support cloud-Habitat Community ~