Home > Developer > Web Develop
Although jquery ajax is much easier than the original method, we should understand the original method. The following is a good example.
Today, we will present you with an original Ajax request process. Although jquery ajax is much easier than the original method, we should understand the original method, the following is a presentation of three small files: html, js, and php, which are written by the database.
First, html:
The Code is as follows:
<Html>
<Head>
<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>
</Head>
<Body>
UserName: <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>
</Html>
Then js:
The Code is as follows:
/**
* Complete Ajax access process
*/
Var xmlHttp
Function showSelect () // click the logon button to execute this method.
{
Var userName = document. getElementById ("userName"). value;
Var passWord = document. getElementById ("passWord"). value;
If (userName. length = 0) // verify whether the input userName is empty
{
Document. getElementById ("showInputError"). innerHTML = "the user name cannot be blank"; // The system prompts that the user name cannot be blank.
Return
}
XmlHttp = GetXmlHttpObject ()
If (xmlHttp = null)
{
Alert ("Browser does not support HTTP Request ")
Return
}
Var url = "ajaxTest. php" // you can specify the file name of the request to be submitted to the backend.
Url = url + "? UserName = "+ userName +" & passWord = "+ passWord // Add the parameter userName and passWord to this path
Url = url + "& sid =" + Math. random () // Add a random number to this path
XmlHttp. onreadystatechange = stateChanged // when the readyState changes, the onreadystatechange event is triggered. The readyState attribute contains the status information of XMLHttpRequest.
XmlHttp. open ("GET", url, true) // define the Request Parameters
XmlHttp. send (null) // send a request
}
Function stateChanged ()
{
If (xmlHttp. readyState = 4 | xmlHttp. readyState = "complete ")//
// 0: the request is not initialized.
// 1: The server connection has been established.
// 2: The request has been received
// 3: The request is being processed
// 4: The request is complete and the response is ready
{Var a = xmlHttp. responseText; // assign the corresponding data to.
If (a = "yes "){
Self. location = 'main. php'; // jump to Main. php
} Else {
Document. getElementById ("showInputError"). innerHTML = "incorrect user name or password"; // The system prompts that the user name or password is incorrect.
}
}
}
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;
}
Php:
The Code is 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 $;
Mysql_close ($ con );
?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
