A simple example of using AJAX to implement page login and registered user name verification

Below I will bring you a simple example of using AJAX to implement page login and registered user name verification. Let me share it with you now and give it as a reference for everyone.

AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.

AJAX is a technology for creating fast, dynamic web pages. At its core is the JavaScript object XMLHttpRequest. First introduced in Internet Explorer 5, this object is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the responses without blocking the user.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

Imagine if you submit the registration information when registering, wait a few seconds and then the page is reloaded. As a result, a prompt box pops up telling you that "the username has been used". That would be very annoying. one thing. So here, using AJAX to implement asynchronous requests, you can communicate with the database without reloading the page.

Create XMLHTTPRequest object

Use javascript to create an XMLHTTPRequest object in the html page to implement AJAX asynchronous requests:

<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'); //Create XMLHTTP object, 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 caching issues). No requests have been made here yet.

readyState == 4 indicates that the server has returned completion data. You may have experienced 2 (the request has been sent and is being processed), 3 (part of the data in the response is available, but the server has not completed generating the response)

Note:

Don’t think it’s wrong if if (xmlhttp.readyState == 4) is executed before send, xmlhttp.send(); only then starts sending the request. At this time, the request starts to be sent and the execution continues without waiting for the server to return data, so it will not be blocked and the interface will not be stuck. This is the meaning of "asynchronous" in AJAX.

AJAX encapsulation

In actual project development, AJAX asynchronous requests will be used in many places, but the code to create the object is so long. Copying and pasting is troublesome, and it will also affect the viewing quality of the code, so AJAX needs to be encapsulated. Encapsulate it into a js function file and import it into the web page for reference.

Simple AJAX encapsulated code:

<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>

After the encapsulation is completed, we can start writing the login judgment code (I use .net):

First, create a The html page login.htm and the ashx general handler userhandle.ashx have an action parameter in the requested URL, and the request is processed in the general handler.

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;
      }
    }

After receiving the request action in the general processing program, it will judge and execute the relevant query and return a string. After the front page receives it, it will judge and execute 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);//封装好的bll层方法，判断用户名密码是否正确
      if (b == true)
      {
        context.Session["Name"] = userName;
        context.Session["role"] = "user";
        context.Response.Write("success");
       }
      else
      {
        context.Response.Write("fail");
      }
    }

After the server determines, it sends success or fail to the client. In this way, the login using AJAX asynchronous request is completed.

As for the registration to determine the user name, I will just paste it:

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 = "可以使用";
        }
      })
      }
    }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax post request jump page

Ajax submission form page refreshes quickly solution

Two solutions for Ajax opening a new window and being intercepted by the browser

The above is the detailed content of A simple example of using AJAX to implement page login and registered user name verification. For more information, please follow other related articles on the PHP Chinese website!