Today to present an original AJAX request process, although jquery Ajax is much easier than the original, we should understand the original writing, the following I divided into HTML, JS, php three small files to display, the database to write their own.
The first is HTML:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> a simple Ajax request </title>
<script language= "javascript" src= "Js/ajaxtest.js" ></script>
<body>
User name: <input id= "UserName" type= "text" ></input>
Password: <input id= "PassWord" type= "PassWord" ></input>
<span id= "Showinputerror" style= "color:red;font-weight:bold;" ></span><br>
<input type= "button" value= "Login" onclick= "Showselect ()" >
</body>
Then the JS:
Copy Code code as follows:
/**
* Full access process for ordinary Ajax
*/
var xmlHttp
function Showselect ()//Login button Click to execute this method
{
var Username=document.getelementbyid ("UserName"). Value;
var Password=document.getelementbyid ("PassWord"). Value;
if (username.length==0)//Verify that the user name is blank
{
document.getElementById ("Showinputerror"). Innerhtml= "User name cannot be empty"//Prompt user name cannot be empty
Return
}
Xmlhttp=getxmlhttpobject ()
if (xmlhttp==null)
{
Alert ("Browser does not support HTTP Request")
Return
}
var url= "ajaxtest.php"//Set the filename of the processing request to be submitted to the background
url=url+ "? username=" +username+ "&password=" +password//to add parameter username and password to this path
url=url+ "&sid=" +math.random ()//Add a random number to this path
xmlhttp.onreadystatechange=statechanged//whenever readyState changes, the onReadyStateChange event is triggered and ReadyState attribute exists XMLHttpRequest The status information
Xmlhttp.open ("Get", url,true)//define the parameters of the request
Xmlhttp.send (NULL)/Send Request
}
function statechanged ()
{
if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")//
0: Request not initialized
1: The server connection has been established
2: Request received
3: In Request processing
4: The request is complete and the response is ready
{var a= xmlhttp.responsetext;//assigns the corresponding data to a
if (a== "yes") {
self.location= ' main.php ';//Jump to main.php
}else{
document.getElementById ("Showinputerror"). innerhtml= "User name or password error";//prompt username or password error
}
}
}
function Getxmlhttpobject ()
{
var xmlhttp=null;
Try
{
Firefox, Opera 8.0+, Safari
Xmlhttp=new XMLHttpRequest ();
}
catch (E)
{
Internet Explorer
Try
{
Xmlhttp=new ActiveXObject ("msxml2.xmlhttp");
}
catch (E)
{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
The Last is PHP:
Copy Code code as follows:
<?php
$userName =$_get["UserName"];
$pwd =$_get["PassWord"];
$con = mysql_connect ("localhost", "root", "123456");
mysql_select_db ("My_test", $con);
mysql_query ("Set names UTF8");
$sql = "SELECT * from Userinfo WHERE username= '". $userName. "' and pwd= ' ". $pwd." ' ";
$result =mysql_query ($sql);
$select =mysql_num_rows ($result);
$a = "no";
if ($select >0) {$a = "yes";}
Echo $a;
Mysql_close ($con);
?>
