WampServer下的AJAX示例

本文将介绍一个简单的利用Ajax调取后台数据的示例。

相关概念

AJAX，即Asynchronous Javascript And XML（异步的JavaScript和XML），用JavaScript执行异步网络请求，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。利用Ajax通过后台与服务器进行数据交换可以使网页实现异步更新，无须重新加载整个网页，就可以对网页的某部分进行更新操作。

JSON，即JavaScript Object Notation（JavaScript 对象表示法）， 是一种轻量级的数据交换格式。它基于 ECMAScript 的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

PHP， 是一种创建动态交互性站点的服务器端脚本语言。

MySQL，是一个关系型数据库管理系统。

WampServer，即Windows Apache Mysql PHP集成安装环境，是一款集成Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。

官方下载地址：http://www.wampserver.com/en/download-wampserver-64bits/

一、下载安装并运行 WampServer

WampServer 可以通过其官网或者第三方进行下载。

具体的安装和调试不作为本文的主要内容进行介绍，第一次使用WampServer的用户需要相关教程的指导。

安装成功后，启动WampServer，打开浏览器在网址搜索栏中输入 localhost 或者 127.0.0.1（或加端口号）就可以访问本地站点，来调试 PHP 代码等。

二、创建测试用数据表

1. 在Windows操作系统下，运行cmd：

2. 转到mysql的保存目录，并登录mysql：

3. 执行以下命令行：

以上，我们用来测试的数据表就创建好了。

三、编写服务器端代码

// 将文件设置为纯文本的形式, 编码格式是utf-8

header("Content-Type: text/plain;charset=utf-8");

// $_SERVER['REQUEST_METHOD']用来获取访问页面使用的请求方法, POST或GET...

// 如果是GET方法，则执行search方法进行查询

if ($_SERVER['REQUEST_METHOD'] == 'GET') {

search();

}

/**

* search 执行具体的查询操作

*/

function search() {

//是否通过url传递有效参数

if (!isset($_GET['id']) empty($_GET['id'])) {

echo '{"msg":"参数有误"}';

return;

}

// 获取查询结果

$feedback = query($_GET['id']);

if (!$feedback) {

echo '{"msg":"查询失败"}';

return;

}

// 回应json

echo '{"msg" : "商品名称：'.$feedback['name'].'，商品价格：'.$feedback['price'].'元，商品库存：'.$feedback['remaining'].'个。"}';

}

/**

* query 连接MySQL数据库，并查询相关数据

* @param number $id 商品ID

* @return array $value 查询所得的商品信息

*/

function query($id) {

// 连接数据库

$mysqli = new mysqli('localhost', 'root', '', 'test');

// 检测连接状态

if ($mysqli->connect_error) {

die ('Connect Error: ' . $mysqli->connect_error);

}

// 设置字符集

$mysqli->set_charset('utf8');

$table_name = 'commodity';

// $sql = "SELECT * FROM `{$table_name}` WHERE `id`='{$id}' LIMIT 1";

$sql = "SELECT * FROM $table_name WHERE id = $id LIMIT 1";

// 查询数据库

$result = $mysqli->query($sql);

// 从结果集中取得一行

$value = $result->fetch_array(MYSQLI_ASSOC);

// 释放结果内存

$result->free();

// 关闭连接

$mysqli->close();

return $value;

}

四、前端代码

HTML部分

...

商品信息查询

请输入商品编号：

查询

...

预览：

2. JS部分

var query = document.getElementById('query'),

goods_id = document.getElementById('goodsId'),

notice = document.getElementById('notice');

query.onclick = function() {

// 创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();

// 当 readyState 改变时，触发 onreadystatechange 事件

xmlhttp.onreadystatechange = function() {

// 请求完成

if (xmlhttp.readyState === 4) {

if (xmlhttp.status === 200) {

// 解析json字符串

var data = JSON.parse(xmlhttp.responseText);

notice.innerHTML = data.msg;

} else {

notice.innerHTML = '请求失败，状态码：'.xmlhttp.status;

}

}

};

// 创建http请求

xmlhttp.open('GET', 'server.php?id=' + goods_id.value, false);

// 发送

xmlhttp.send(null);

};

测试（商品ID = 3）：

五、总结

如上，本文演示了利用AJAX访问后台数据更新前端页面的一个简单示例。由于时间关系，具体内容可能介绍得不够细致。