Although jquery Ajax is much easier than the original, we should understand the original writing, here is a good example, you can refer to the following
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. First is html: code 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> 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> </html> Then the js: code is as follows:/** * Normal AJAX full access process */ var xmlhttp &nb Sp function Showselect ()//Login button after clicking to execute this method { var Username=document.getelementbyid ("UserName") .value; var Password=document.getelementbyId ("PassWord") .value; if (username.length==0) to verify that the input user name is null { document.getElementById (" Showinputerror "). Innerhtml=" User name cannot be empty "//Prompt user name cannot be null return } xmlhttp=getxmlhttpobject () if ( Xmlhttp==null) { alert ("Browser does not support HTTP Request") return } var url= "Ajaxtest. PHP//Set the file name url=url+ "? username=" +username+ "&password=" to submit the action to the background of the processing request. Add parameter username and password for this path url=url+ "&sid=" +math.random ()//Add a random number to this path xmlhttp.onreadystatechange=statechanged//whenever When the readyState changes, the onReadyStateChange event is triggered, and the ReadyState property contains XMLHttpRequest status information Xmlhttp.open ("get", url,true)// Define the requested parameter Xmlhttp.send (NULL)//Send request } function statechanged () { if ( xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")// //0: Request uninitialized //1: Server connection established //2: Request received //3: 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: 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); ?> 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
