Ajax implements Asynchronous User Name verification and ajax Asynchronous User Name Verification

Ajax implements Asynchronous User Name verification and ajax Asynchronous User Name Verification

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

Ajax functions:

When the user enters the account and switches to the password box, use ajax to verify the account availability. The verification method is as follows: first create an XMLHTTPRequest object, then send the information to be verified (User Name) to the server 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;}

Running result

Code Implementation

Index.html

<! DOCTYPE html> 
Login. php

<? Php $ con = mysqli_connect ("localhost", "root", "GDHL007", "sysu"); if (! Empty ($ _ GET ['account']) {$ sql1 = 'select * from login where account = "'. $ _ GET ['account']. '"'; // database operation $ result1 = mysqli_query ($ con, $ sql1); if (mysqli_num_rows ($ result1)> 0) echo '<font style =" color: #00FF00; "> this user exists </font> '; else echo' <font style =" color: # FF0000; "> this user does not exist </font> '; mysqli_close ($ con);} else echo '<font style = "color: # FF0000;"> the user name cannot be blank </font>';?>
The above is all the content of this article, hoping to help you learn.