Ajax realizes the complete process of registering user name-JS Tutorial-php.cn

This time I will bring you the full process of registering a user name with ajax. What are the precautions for realizing the full process of registering a user name with ajax? Here are practical cases, let’s take a look.

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 javascriptCreate XMLHTTPRequest object in html page to implement 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服务器返回错误！");
          }
        }
      }
      xmlhttp.send(); 
</span>

Copy after login

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 starts sending the request at this time. At this time, the request starts to be sent and the execution continues without waiting for the server to return the 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 Create objectsThe code is so long that it is troublesome to copy and paste, 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('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>

Copy after login

After the encapsulation is completed, we can start writing the login judgment code (I am using .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;
      }
    }

Copy after login

After receiving the request action in the general processing program, it will judge and execute the relevant query and return a string. After receiving it, the front page 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");
      }
    }

Copy after login

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!