Ajax Php 实例 « Clovery

采用了ajax技术的注册程序，后台采用php处理，使用了三个文件。适合初学者的参考学习。Ajax通常采用get、post的方式静默地向后台发送信息，并且接收后台的反馈，而这种过程是不需要刷新页面来实现的，所以用户一般不会觉察。采用了Ajax技术的客户端提供了良好的用户体验，互联网程序的运行可以达到与本地相似的良好体验。但是，这种技术不要滥用，而且有的客户端会禁用JavaScript功能。所以，在没有启用JavaScript的情况下也要保证程序运行顺畅，对使用者负责。Ajax的实质就是通过JavaScript把客户端的请求传递到服务器，服务器接收数据并经过处理之后发送到客户端，客户端在接收到传来的数据之后，利用DOM修改页面结构来达到信息传递的目的。Ajax通过这种方式避免了页面刷新所带资源消耗，它把以前占用大量带宽的请求分解成多个小的请求，虽然它没有节省带宽，但是避免了带宽拥挤现象。这只是本人的一些感触，如有不对的地方敬请指教。

建立好该程序需要使用的数据库。本示例采用的MySQL数据库。

CREATE TABLE IF NOT EXISTS `user` (
  `uid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(48) NOT NULL,
  `userpass` char(40) NOT NULL,
  PRIMARY KEY (`uID`)
);

首先建立的是register.html文件。三个文件都要放在相同的文件夹内。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Ajax php 实例</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="register.js"></script>
  </head>
  <body>
    <div id="register">
      <h2>用户注册</h2>
      <form action="#" method="#">
        <p>
          <label for="username">用户名</label>
          <input type="text" id="username" name="username" onchange="startRequest(this.value)" />
          <span id="username-label"></span> <!-- 显示服务器返回的信息 -->
        </p>
        <p>
          <label for="password">密码</label>
          <input type="password" id="password" name="password" />
        </p>
        <p>
          <label for="confirm-pwd">重新输入密码</label>
          <input type='password' id="confirm-pwd" name="confirm-pwd" />
        </p>
        <p>
          <input type="submit" id="submit" name="submit" value="提交" />
        </p>
      </form>
    </div>
  </body>
</html>

建立register.js文件，这个文件存放了必须的JavaScript脚本。

/**
 * register.js
 * 简单的php ajax程序
 */

/* 创建并初始化XHR全局变量 */
var XHR = false;

/* 创建兼容于不同浏览器之间的XHR对象 */
if (window.XMLHttpRequest) { 
    XHR = new XMLHttpRequest();
} else { /* IE7之前的浏览器版本采用如下的创建方式 */
    try {
        
        XHR = new ActiveXObject('Msxml2.0.XMLHTTP');
    } catch (e1) {
       try {
           XHR = new ActiveXObject('Microsoft.XMLHTTP');
       } catch (e2) {}
    }
}

if (!XHR) {
    return;
}

function startRequest(username) {
    XHR.open('get', 'register.php?username=' + encodeURIComponent(username));
    XHR.onreadystatechange = handleStateChange; // 注意，这里是函数调用，不要加括号
    XHR.send(null);
}

function handleStateChange() {
    if (XHR.readyState == 4) { // 这里主要关注 readyState = 4 这个状态，如有其它的需要请查阅相关资料
        if (XHR.status == 200) {
            document.getElementById('username-label').innerHTML = XHR.responseText;
        }
    }
}

最后建立处理客户端信息的php脚本：register.php。

<?php
if (isset($_GET['username']) && !empty($_GET['username'])) {
    $db = mysqli_connect('localhost', 'root', '123456', 'test') or die ('Cannot connect to the Database!');
    $query = sprintf("SELECT uid FROM user WHERE username='%s'", mysqli_real_escape_string($db, trim($_GET['username'])));
    $result = mysqli_query($db, $query) or die('Cannot exectue Query!');
    
    if (@mysqli_num_rows($result) == 1) {
        echo '用户名已存在!';
    } else {
        echo '该用户名可以注册';
    }
    mysqli_close($db);
} else {
    echo '请输入用户名!';
}
?>

留下您的大名