在本地测试一次成功的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代码:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css">
 6 *{
 7   margin: 0;
 8   padding: 0;
 9 }
10 body{
11    font-size: 62.5%;
12    font-family: "微软雅黑";
13 }
14 #continer{
15    position: absolute;
16    margin: auto;
17    top: 0;
18    bottom: 0;
19    left: 0;
20    right: 0;
21    height: 200px;
22    width: 300px;
23    background: linear-gradient(to bottom,#D87093,#FFE4E1);
24    border: 1px solid #C0C0C0;
25    border-radius: 10px;
26    padding: 1em;
27 }
28 h2{
29    font-size: 2em;
30    font-weight: normal;
31    text-align: center;
32    margin-bottom: 0.5em;
33 }
34 p{
35    font-size: 1.5em;
36    line-height: 1.5em;
37 }
38 </style>
39 </head>
40 <body>
41   <div id="continer">
42     <h2>*ST橡塑(600346)股票行情</h2>
43     <p id="kaipan">开盘价格:<span id="kaipanprice"></span></p>
44     <p id="now">当前价格:<span id="nowprice"></span></p>
45     <p id="zhangdie">涨跌辐度:<span id="index"></span></p>
46
47   </div>
48   <script>
49
50   </script>
51 </body>
52 </html>

接下来是JavaScript代码:

 1   <script>
 2      function $(id) {
 3          return document.getElementById(id.substring(1));
 4      }
 5      //在页面加载完成时产生一个随机的开盘价
 6      function randomPrice() {
 7          //产生一个随机数
 8          var num =  Math.random()*20;
 9
10          $(‘#kaipanprice‘).innerHTML = num.toFixed(2);//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
11      }
12      //封装一个创建XMLHttpRequest对象的函数,可以重复使用
13      function XMLHttp() {
14         var xmlhttp;
15         if(window.XMLHttpRequest) {
16             xmlhttp = new window.XMLHttpRequest();
17         } else {
18             //用来兼容以前的IE浏览器
19             xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);
20         }
21         return xmlhttp;
22      }
23
24      //用一个全局变量保存创建的XMLHttpRequest,
25      //因为后面这个对象还要在回调函数里调用,不然的话无法在回调函数里调用
26      var xmlhttp;
27
28      //下面这个函数用来打开一个请求和发送请求
29      function priceChange() {
30          xmlhttp = XMLHttp();
31
32          if(xmlhttp) {
33              //localhost就是wamp安装目录中的www文件夹,我在www文件夹下又创建了my文件夹,在my文件夹中又创建了ajax文件夹
34              var url = ‘http://localhost/my/ajax/price.php‘;
35              var data = ‘item=nowprice‘;
36              //绑定onreadystatechange事件
37              //JavaScript高级程序设计第三版上说在调用open()方法之前指定onreadystatechange事件能保证跨浏览器兼容性
38              xmlhttp.onreadystatechange = handle;
39
40              //用post方式打开请求,true表示异步机制
41              xmlhttp.open(‘post‘,url,true);
42
43              //用post方式发送请求必须添加下面这一句代码,否则报错
44              xmlhttp.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
45
46              //post方式的数据要在send()方法中发送,get方式向send()方法中传入null,数据在url中发送
47              xmlhttp.send(data);
48
49          }
50
51      }
52
53      //指定回调函数
54      function handle() {
55             //xmlhttp.readyState=4表示服务器响应完成,并且客户端已接受到全部响应数据,可以在客户端使用了
56             if(xmlhttp.readyState == 4) {
57
58                 //xmlhttp.status=200表示响应成功,等于304表示响应数据未发生修改可以使用浏览器缓存中的数据
59                 //if语句的判断条件是照抄JavaScript高级程序设计第三版上的
60                 if((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) {
61                      //我这里返回的是JSON格式的字符串,用JSON对象的parse()方法把字符串转换成一个JavaScript对象
62                      var obj = JSON.parse(xmlhttp.responseText);
63
64                      //获取开盘价格
65                      var kaipanjia = parseFloat($(‘#kaipanprice‘).innerHTML);
66
67                      //写入当前价格
68                      $(‘#nowprice‘).innerHTML = obj.price;
69
70                      //计算涨跌辐度
71                      var percent = (100*(obj.price - kaipanjia)/kaipanjia).toFixed(2);
72
73                      //不同的涨跌辐度使用不同的字体颜色
74                      if(percent < 0){
75
76                         $(‘#index‘).style.color = "green";
77                      }
78                      if(percent > 0){
79
80                         $(‘#index‘).style.color = "red";
81                      }
82                      if(percent == 0){
83
84                         $(‘#index‘).style.color = "#FFFFFF";
85                      }
86                      //写入涨跌辐度
87                      $(‘#index‘).innerHTML = percent + ‘%‘;
88                 }
89             }
90
91      }
92   window.onload = function() {
93      randomPrice();
94      priceChange();        //两秒钟更新一次当前价格
95      updateprice = setInterval(priceChange,2000);
96   };
97
98   </script>

JavaScript高级程序设计第三版上说,用get方式发送请求时添加到url末尾的数据必须经过echoURIComponent()方法编码。

关于服务器返回的数据格式主要有三种:

text格式(字符串),保存在XMLHttpRequest对象的responseText属性中

xml格式,保存在XMLHttpRequest对象的responseXML属性中

JASO格式,保存在XMLHttpRequest对象的responseText属性中

下面是服务器端price.php文件的代码:

 1 <?php
 2 //Content-Type指定返回的数据格式,text/xml 对应responXML,text/html对应responseText
 3   header(‘Content-Type: text/html;charset=utf-8‘);
 4
 5   //告诉浏览器不要缓存数据
 6   header(‘Cache-Control: no-cache‘);
 7
 8   //产生一个随机浮点数,传入的参数用于限制范围
 9   function randomFloat($min = 0, $max = 1) {
10     return $min + mt_rand() / mt_getrandmax() * ($max - $min);
11   }
12   $num = number_format(randomFloat(1, 20), 2, ‘.‘, ‘‘);
13
14   //接收数据
15   $item = $_POST[‘item‘];//请求的方式要对应,发送数据的名称要对应
16   $info = "";
17   if($item == ‘nowprice‘) {
18      $info = ‘{"price":‘.$num.‘}‘;//返回一个JSON格式的字符串
19   }
20   echo $info;//echo的数据是返回给发送请求的页面
21
22 ?>

代码写完之后,把HTML文件和php文件保存在wamp安装目录下www文件夹下相同的目录下(我的是ajax文件夹),然后通过本地服务器打开html文件(比如我的是http://localhost/my/ajax/gujia.html/),每隔两秒钟就会看到数据的实时更新,而页面并没有刷新。

PS: 对于返回的xml格式的数据,可以通过操作DOM的方式获取想要的数据,与HTML的DOM规范基本相同。

时间: 2024-10-10 01:47:43

在本地测试一次成功的AJAX请求的相关文章

配置Chrome支持本地(file协议)的AJAX请求

https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html 什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击HTML文件,直接在浏览器中运行演示 如果此时Demo中有AJAX操作,浏览器就会报一个错: XMLHttpRequest cannot load file:

Ajax请求状态200,却走error的函数

已经将近一个月没有正式使用Ajax的请求代码了,参加工作后,这是第一次使用,感觉有些生疏,但基本代码还是记得的,写起来也不费劲,但正因为如此,问题就来了,由于经验不足,本来导致问题的原因不是那个,我却误以为是那个,于是调试花费了很久. Ajax的部分代码如下: $.ajax({                url:'http://XXXXX/practice/pj2/Merchant.class.php',                type: "POST",          

微信现金红包接口本地测试成功,服务器上失败后的解决办法

本地测试成功后,基本上确定代码还是可用的. 那么本地跟服务器就剩下配置上的区别了. 现金红包接口api 是需要带证书的.所以呢,iis配置有所不同. asp.net 4.0 + iis 8.0  配置环境 1 打开iis   点击 应用程序池 2 点击最右侧的  右上角   设置应用程序池默认设置 3 设置 里面的参数,把 加载用户配置文件 项  改为  true 重启下 iis  再试试  服务器上的接口是否变得正常了呢.

win7 windows server 2008R2下 https SSL证书安装的搭配(搭配https ssl本地测试环境)

原文:http://www.cnblogs.com/naniannayue/archive/2012/11/19/2776948.html 要想成功架设SSL安全站点关键要具备以下几个条件. 1.需要从可信的证书办法机构CA获取服务器证书. 2.必须在WEB服务器上安装服务器证书. 3.必须在WEB服务器上启用SSL功能. 4.客户端(浏览器端)必须同WEB服务器信任同一个证书认证机构,即需要安装CA证书. 下面,我们对照上面的四部,进行一步一步的操作 1:需要从可信的证书办法机构CA获取服务器

win10系统iis下部署https (ssl/tls)本地测试环境

有时想要把公司的某些XX项目部署成https站点,是为了在传输层加密传输,防止他人嗅探站点重要数据信息,平常我们使用的http方式都是明文方式传输的很不安全,容易被他人窃取.而有些时候要在本地搭建https环境用来测试,下面看具体在本地搭建https测试站点. 首先要去证书认证机构申请一个证书用来测试,认证机构很多,如              1.http://www.symantec.com/zh/cn/ 2.https://www.geotrust.com/  3.https://cn.g

jquery ajax请求成功,返回了数据,但是不进success的问题 【转】

这几天一直被 ajax请求成功,返回了数据,但是不进success的问题困扰着,怎么弄就是解决不了,总以为 是:$(document).ready(function(){});没起作用,一直找页面加载的方法来试,整了好几天没整出来....今天比较幸运, 在网上找到了一篇关于这方面问题的文章,按上面的方法一试,果然ok了,哈哈哈,真是太高兴了....终于解决这个问题了. 这个问题的原因(来自http://www.myexception.cn/ajax/413061.html的拷贝内容): ----

配置chrome支持本地(file协议)ajax请求

配置chrome支持本地(file协议)ajax请求 网址:配置chrome支持本地(file协议)ajax请求 将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误.XMLHttpRequest cannot load file:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=1414738973999. Cross origin requests are only support

java.lang.IllegalArgumentException: SessionContext must be an HTTP compatible implementation.:模块化本地测试shiro的一些总结

项目由于是多模块的,所以,测试的时候我想现将shiro框架进行本地测试,然后再放入框架里面,但是这个困扰我了两天了都,其实我应该想到的,只是想多试试,最后还不如多想想 先说一下系统的基本情况,项目是多模块协同开发的,我负责的用户管理模块和权限认证模块,权限认证使用的是shiro框架,然后我就在网上学习了这个框架以及这个框架和ssm的整合,问题就出现在这里:学习的是和ssm框架进行整合,而这个整合用到了web的内容,而我只是本地化单元测试,所以我在写test cases的时候就出现了很多异常,让我

友言评论框本地测试问题

友言评论框在本地测试的时候,如果你的域名是localhost/***,在友言后台是直接验证不通过的. 因为他的验证是通过域名验证,而localhost如果大家都用的话是没法分清楚谁是谁的,所以理论上友言之类的社会化评论框只支持线上使用. 但是问题来了,友言怎么能分清楚写的是本地还是线上的域名呢?答案是,它根本不用分清楚. 友言只是会进行唯一性验证,如果这个域名或者ip之前没有出现过,它就会给你验证通过,如果出现过,就会让你用其他方式,比如嵌入meta标签,修改html等方式验证. 所以说如果想本