Html+js+php An example of an original AJAX request

Source: Internet
Author: User
Tags http request

  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); ?> 
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.