程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> html+js+php一次原始的Ajax請求示例

html+js+php一次原始的Ajax請求示例

編輯:更多關於編程

     雖然jquery的ajax要比原始的寫法容易得多,我們還是應該了解原始的寫法,下面有個不錯的示例,大家可以參考下

    今天給大家呈現一個原始的Ajax請求過程,雖然jquery的ajax要比原始的寫法容易得多,我們還是應該了解原始的寫法,下面我分為html、js、php三個小文件來展示,數據庫自己寫。    首先是html:   代碼如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>一次簡單的Ajax請求</title>  <script language="javascript" src="js/ajaxTest.js"></script>  </head>  <body>  用戶名:<input id="userName" type="text"></input>  密碼:<input id="passWord" type="password"></input>  <span id="showInputError" style="color:red;font-weight: bold;"></span><br>  <input type="button" value="登錄" onclick="showSelect()">  </body>  </html>    然後是js:   代碼如下: /**  * 普通Ajax的完整訪問過程  */  var xmlHttp    function showSelect()//登錄按鈕點擊後執行這個方法  {  var userName=document.getElementById("userName").value;  var passWord=document.getElementById("passWord").value;  if (userName.length==0)//驗證輸入用戶名是否為空  {  document.getElementById("showInputError").innerHTML="用戶名不能為空";//提示用戶名不能為空  return  }  xmlHttp=GetXmlHttpObject()  if (xmlHttp==null)  {  alert ("Browser does not support HTTP Request")  return  }  var url="ajaxTest.php"//設置要提交action到後台的那個處理請求的文件名  url=url+"?userName="+userName+"&passWord="+passWord//為這個路徑加上參數用戶名和密碼  url=url+"&sid="+Math.random()//為這個路徑加上一個隨機數  xmlHttp.onreadystatechange=stateChanged//每當 readyState 改變時,就會觸發 onreadystatechange 事件,readyState 屬性存有 XMLHttpRequest 的狀態信息  xmlHttp.open("GET",url,true)//定義請求的參數  xmlHttp.send(null)//發送請求  }    function stateChanged()  {  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")//  //0: 請求未初始化  //1: 服務器連接已建立  //2: 請求已接收  //3: 請求處理中  //4: 請求已完成,且響應已就緒  { var a= xmlHttp.responseText;//把相應數據賦值給a  if(a=="yes"){  self.location='Main.php';//跳轉到Main.php  }else{  document.getElementById("showInputError").innerHTML="用戶名或密碼錯誤";//提示用戶名或密碼錯誤  }  }  }  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:   代碼如下: <?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);  ?> 
    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved