Ajax implements asynchronous user name verification features _ajax related

First look at the layout is relatively simple, the effect is shown below

Ajax Features:

When the user fills in the account to switch to the Password box, use Ajax to verify the availability of the account. The test method is as follows: first create the XMLHttpRequest object, then send the information that needs to be validated (user name) to the server side for verification, and finally determine whether the user name is available based on the server return status.

function CheckAccount () {
var xmlhttp;
var name = document.getElementById ("account"). Value;
if (window. XMLHttpRequest)
 xmlhttp=new XMLHttpRequest ();
else
 xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
 
Xmlhttp.open ("Get", "login.php?account=" +name,true);
Xmlhttp.send ();
 
Xmlhttp.onreadystatechange=function () {
 if (xmlhttp.readystate==4 && xmlhttp.status==200)
  document.getElementById ("Accountstatus"). Innerhtml=xmlhttp.responsetext
}

Run results

Code implementation

Index.html

<! DOCTYPE html>  

login.php

<?php
  $con = Mysqli_connect ("localhost", "root", "GDHL007", "Sysu");
 
  if (!empty $_get[' account ')} {
    $sql 1 = ' SELECT * FROM login where account = '. $_get[' account '].
    Database Operation
    $result 1 = mysqli_query ($con, $sql 1);
    if (Mysqli_num_rows ($result 1) >0)
      Echo ' <font style= "color: #00FF00;" > The user exists </font> ';
    else 
      Echo ' <font style= ' color: #FF0000; > The user does not exist </font> ';
    Mysqli_close ($con);
  else
    Echo ' <font style= ' color: #FF0000; > user name cannot be null </font> ';
 
? >

The above is the entire content of this article, I hope to help you learn.