在本地测试一次成功的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末尾的数据必须经过encodeURIComponent()方法编码。
关于服务器返回的数据格式主要有三种:
text格式(字符串),保存在XMLHttpRequest对象的responseText属性中
xml格式,保存在XMLHttpRequest对象的responseXML属性中
JSON格式,保存在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规范基本相同。
转载于:https://www.cnblogs.com/fogwind/p/5975083.html
在本地测试一次成功的AJAX请求相关推荐
- 配置Chrome支持本地(file协议)的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- ajax get请求_python测试开发django50.jquery发送Ajax请求(get)
前言 有时候,我们希望点击页面上的某个按钮后,不刷新整个页面,给后台发送一个请求过去,请求到数据后填充到html上,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.Ajax可以完美的 ...
- async与await封装ajax请求
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- ajax请求,请求头是provisional are shown。请求未发送出去
问题: ajax请求,请求没成功.ajax请求没有发送出去. 查看network,看到请求头处:Provisional headers are shown. 原因: 搜索了一下,网上说了几个原因. 1 ...
- jquery的ajax全局事件和AJAX 请求正在进行时显示“正在加载”
实例 当 AJAX 请求正在进行时显示"正在加载"的指示: $("#txt").ajaxStart(function(){$("#wait" ...
- electron ajax路径,electron 打包用file协议的ajax请求路径问题
使用electron, 将项目打包成离线应用.使用file协议,在本地读取静态资源.但是ajax请求如果用相对路径,打包之后,会直接找到根目录. // main.js const winURL = p ...
- 七牛云php20m文件上传不了,七牛云存储 - 用php上传图片,我在本地测试,用php 接口,不成功...
七牛反馈显示信息说明已经成功了,但是在七牛空间显示的文件却不完整 请问这是为什么啊?!! 测试文件如下,本地localhost测试: require_once("qiniu/io.php&q ...
- php文件上传接口测试,七牛云存储-用php上传图片,我在本地测试,用php接口,不成功...
七牛反馈显示信息说明已经成功了,但是在七牛空间显示的文件却不完整 请问这是为什么啊?!! 测试文件如下,本地localhost测试: require_once("qiniu/io.php&q ...
- node本地测试ajax CMD窗报错:_http_outgoing.js:436 throw new Error('Header %s value must not be undef
背景:node本地测试ajax CMD窗报错:_http_outgoing.js:436 throw new Error('Header "%s" value must ...
- 网站本地测试安装流程
拥有整套网站源码,如何做本地测试,对于个人站长建站已经不是问题,但对于很多新手来说还是一个难题,下面韶关SEO详细记录下如何做本地测试. 网站本地测试需做3步 1.配置好本地环境. 即使用APMSer ...
最新文章
- springiocxml方式注入对象原理分析
- HTML lt strong gt 标签,HTML lt;legendgt; 标签
- GIS数据里的4D数据
- 人工智能 - paddlepaddle飞桨 - 深度学习基础教程 - 图像分类
- 关于tomcat的思考
- oracle 查询表里信息_查看ORACLE 数据库及表信息
- mac adb环境变量配置
- Android 头像更换从相册选取崩溃
- 岛田庄司《占星术杀人魔法》读后感
- 计算机制图的特点和原理,计算机地图制图原理、特点及发展趋势
- 2020双周训练训练日志
- Linux命令行与shell脚本(17)--正则表达式
- React中input输入框中文输入的问题
- java activiti_《Activiti实战》PDF 下载
- 《卓有成效的管理者》——学习心得(四)
- 运放脉冲宽度放大_下一代Ka波段雷达系统应用脉冲行波管放大器(twta),工作频率为34至36GHz,峰值功率为1000瓦,占空比为10%。...
- python 类的学习笔记
- K8S之初入师门第一篇熟读手册
- [运放滤波器]5_滤波器的分类
- 数据结构--顺序表、链表、栈、队列、树、文件(visual studio可运行)
热门文章
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)...
- Android的Bundle传递数据的使用
- windows核心编程第二章阅读
- 架构设计师(Architect)的专业与角色
- mysql 利用延迟关联优化查询(select * from your_table order by id desc limit 2000000,20)
- chrome断点调试其他技巧
- Python控制语句执行流程
- ruby web性能响应时间
- 5个提高效率的编程工作环境
- Spring 相关jar包详细介绍