正文
在本地测试一次成功的AJAX请求
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
要在本地测试AJAX，首先是环境的搭建，下面以wamp为例。
1、先在wamp的官网下载wamp的安装包，网址 http://www.wampserver.com/。
2、安装wamp。如果安装过程中提示丢失VCRUNTIME140.DLL缺失，请看这篇文章：http://www.jb51.net/article/81595.htm。
3、安装完wamp后，双击桌面上wamp的快捷方式启动wamp。
如果wamp正常启动，任务栏右下角有绿色的w图标，如图：
接下来是代码的编写。
在wamp安装目录下有一个www文件夹，用来测试的文件都保存在这个文件夹中。
下面是我的例子，效果图是这样的：
使用Ajax使当前价格隔一段时间自动更新一次，同时涨跌辐度也跟着更新。这个例子要创建两个页面，一个是前台的html页面，用来发送请求和显示服务器返回来的响应结果，一个是后台的php文件（我给这个文件命名price.php，代码中要用到），用来接收请求。
首先是html页面的html代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 62.5%;
font-family: "微软雅黑";
}
#continer{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 200px;
width: 300px;
background: linear-gradient(to bottom,#D87093,#FFE4E1);
border: 1px solid #C0C0C0;
border-radius: 10px;
padding: 1em;
}
h2{
font-size: 2em;
font-weight: normal;
text-align: center;
margin-bottom: 0.5em;
}
p{
font-size: 1.5em;
line-height: 1.5em;
}
</style>
</head>
<body>
<div id="continer">
<h2>*ST橡塑(600346)股票行情</h2>
<p id="kaipan">开盘价格：<span id="kaipanprice"></span></p>
<p id="now">当前价格：<span id="nowprice"></span></p>
<p id="zhangdie">涨跌辐度：<span id="index"></span></p> </div>
<script> </script>
</body>
</html>
接下来是JavaScript代码：
<script>
function $(id) {
return document.getElementById(id.substring(1));
}
//在页面加载完成时产生一个随机的开盘价
function randomPrice() {
//产生一个随机数
var num = Math.random()*20; $('#kaipanprice').innerHTML = num.toFixed(2);//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
}
//封装一个创建XMLHttpRequest对象的函数，可以重复使用
function XMLHttp() {
var xmlhttp;
if(window.XMLHttpRequest) {
xmlhttp = new window.XMLHttpRequest();
} else {
//用来兼容以前的IE浏览器
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlhttp;
} //用一个全局变量保存创建的XMLHttpRequest，
//因为后面这个对象还要在回调函数里调用，不然的话无法在回调函数里调用
var xmlhttp; //下面这个函数用来打开一个请求和发送请求
function priceChange() {
xmlhttp = XMLHttp(); if(xmlhttp) {
//localhost就是wamp安装目录中的www文件夹，我在www文件夹下又创建了my文件夹，在my文件夹中又创建了ajax文件夹
var url = 'http://localhost/my/ajax/price.php';
var data = 'item=nowprice';
//绑定onreadystatechange事件
//JavaScript高级程序设计第三版上说在调用open()方法之前指定onreadystatechange事件能保证跨浏览器兼容性
xmlhttp.onreadystatechange = handle; //用post方式打开请求，true表示异步机制
xmlhttp.open('post',url,true); //用post方式发送请求必须添加下面这一句代码，否则报错
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //post方式的数据要在send()方法中发送，get方式向send()方法中传入null，数据在url中发送
xmlhttp.send(data); } } //指定回调函数
function handle() {
//xmlhttp.readyState=4表示服务器响应完成，并且客户端已接受到全部响应数据，可以在客户端使用了
if(xmlhttp.readyState == 4) { //xmlhttp.status=200表示响应成功，等于304表示响应数据未发生修改可以使用浏览器缓存中的数据
//if语句的判断条件是照抄JavaScript高级程序设计第三版上的
if((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) {
//我这里返回的是JSON格式的字符串，用JSON对象的parse()方法把字符串转换成一个JavaScript对象
var obj = JSON.parse(xmlhttp.responseText); //获取开盘价格
var kaipanjia = parseFloat($('#kaipanprice').innerHTML); //写入当前价格
$('#nowprice').innerHTML = obj.price; //计算涨跌辐度
var percent = (100*(obj.price - kaipanjia)/kaipanjia).toFixed(2); //不同的涨跌辐度使用不同的字体颜色
if(percent < 0){ $('#index').style.color = "green";
}
if(percent > 0){ $('#index').style.color = "red";
}
if(percent == 0){ $('#index').style.color = "#FFFFFF";
}
//写入涨跌辐度
$('#index').innerHTML = percent + '%';
}
} }
window.onload = function() {
randomPrice();
priceChange();
//两秒钟更新一次当前价格
updateprice = setInterval(priceChange,2000);
}; </script>
JavaScript高级程序设计第三版上说，用get方式发送请求时添加到url末尾的数据必须经过encodeURIComponent()方法编码。
关于服务器返回的数据格式主要有三种：
text格式（字符串），保存在XMLHttpRequest对象的responseText属性中
xml格式，保存在XMLHttpRequest对象的responseXML属性中
JSON格式，保存在XMLHttpRequest对象的responseText属性中
下面是服务器端price.php文件的代码：
<?php
//Content-Type指定返回的数据格式，text/xml 对应responXML，text/html对应responseText
header('Content-Type: text/html;charset=utf-8'); //告诉浏览器不要缓存数据
header('Cache-Control: no-cache'); //产生一个随机浮点数，传入的参数用于限制范围
function randomFloat($min = 0, $max = 1) {
return $min + mt_rand() / mt_getrandmax() * ($max - $min);
}
$num = number_format(randomFloat(1, 20), 2, '.', ''); //接收数据
$item = $_POST['item'];//请求的方式要对应，发送数据的名称要对应
$info = "";
if($item == 'nowprice') {
$info = '{"price":'.$num.'}';//返回一个JSON格式的字符串
}
echo $info;//echo的数据是返回给发送请求的页面 ?>
代码写完之后，把HTML文件和php文件保存在wamp安装目录下www文件夹下相同的目录下（我的是ajax文件夹），然后通过本地服务器打开html文件（比如我的是http://localhost/my/ajax/gujia.html/），每隔两秒钟就会看到数据的实时更新，而页面并没有刷新。
PS: 对于返回的xml格式的数据，可以通过操作DOM的方式获取想要的数据，与HTML的DOM规范基本相同。
