文章目录
  1. 1. ajax介绍
  2. 2. ajax优点
  3. 3. 实例
    1. 3.1. HTML页面
    2. 3.2. javascript
    3. 3.3. php
  4. 4. 参考

最近在用php写网站,希望实现页面和逻辑的分离,项目比价小,就决定使用ajax实现。

ajax介绍

AJAX即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

ajax优点

  1. AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
  2. 使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
  3. AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
  4. AJAX 可使因特网应用程序更小、更快,更友好。
  5. AJAX 是一种独立于 Web 服务器软件的浏览器技术。

实例

主要包含三方面:

  1. 一个HTML页面
  2. 一段javascript
  3. 一张php页面

HTML页面

页面使用了bootstrap,注意引入的getUser.js、onclick事件中的showUser(),还有后面id是txtHint的div域,它用作 showUser() 函数所返回数据的占位符。

<head>
<meta charset="UTF-8">

<title>Admin Manage Page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/admin-main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="js/getUser.js"></script>
</head>
<body>
  <div class="container">
      <h1>报名用户列表</h1>
    </br></br>

    <div class="row"> 
         <div class="col-lg-6">
            <div class="input-group">
              <input id="key" name="key" type="text" class="form-control"  onKeyUp="showUser(this.value)">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button" onClick="showUser(document.getElementById('key').value);">Search!</button>
              </span>
            </div>
          </div>
         <button type="button" class="btn btn-primary" style="margin-left:100px;"  onClick="showUser('');">查看所有</button>  

    </div>


  <div class="content">
     <div class="panel panel-info">

     <div id="txtHint"></div>

     </div>

  </div>


</div> 

</body>

javascript

javascript代码存储在getUser.js中,代码如下

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getUser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

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;
}

简单解释:

  1. showUser()函数

    每当在输入域中输入一个字符,该函数就会被执行一次。

    如果文本框中有内容 (str.length > 0),该函数这样执行:

    定义要发送到服务器的 URL(文件名)
    把带有输入域内容的参数 (q) 添加到这个 URL
    添加一个随机数,以防服务器使用缓存文件
    调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象,并在事件被触发时告知该对象执行名为 stateChanged 的函数
    用给定的 URL 来打开打开这个 XMLHTTP 对象
    向服务器发送 HTTP 请求
    
  2. stateChanged()

    每当 XMLHTTP 对象的状态发生改变,则执行该函数。
    在状态变成 4 (或 “complete”)时,用响应文本填充 txtHint 占位符 txtHint 的内容。

  3. GetXmlHttpObject()
    AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。

    上面的代码调用了名为 GetXmlHttpObject() 的函数。

    该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

php

<?php
session_start();
error_reporting(0);
//检测是否登录,若没登录则转向登录界面
if(!isset($_SESSION['id'])){
      header("Location:admin.html");
    exit();
}
//包含数据库连接文件
include('conn.php');

$q=$_GET["q"];
$sql="SELECT * FROM user WHERE name like '%".$q."%'";

if($q==""){
    $sql="SELECT * FROM user";
}

$result = mysql_query($sql);

echo "<table class='table table-bordered table-striped'>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Date</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['id'] . "</td>";
 echo "<td>" . $row['name'] . "</td>";
 echo "<td>" . $row['phone'] . "</td>";
 echo "<td>" . $row['date'] . "</td>";
 echo "</tr>";
 }
echo "</table>";

?>

参考

  1. http://www.w3school.com.cn/php/php_ajax_suggest.asp
文章目录
  1. 1. ajax介绍
  2. 2. ajax优点
  3. 3. 实例
    1. 3.1. HTML页面
    2. 3.2. javascript
    3. 3.3. php
  4. 4. 参考