浏览器与服务器通信技术——Ajax详解
使用BOM接口从服务器获取数据,获取的是整个页面,得到数据之后需要刷新整个页面。运用ajax技术无须刷新页面即可从服务器取得数据。ajax的核心是XMLHttpRequest对象。
一、 创建XHR对象
var xhr=new XMLHttpRequest();
二、启动和发送请求
xhr.open("get","example.php",false);
open方法接受3个参数:要发送的请求的类型,请求的URL和表示是否异步发送请求的布尔值。URL相对于执行代码的当前页面。
xhl.send(null);
send方法接受一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null。
三、 处理响应
调用send()之后,请求就会被分派到服务器,等待服务器的响应。在收到响应后,响应的数据会自动填充XHR对象的属性,相关属性简介如下:
responseText:作为响应主体被返回的文本。
responseXML:如果响应内容类型为"text/xml",这个数据将保存包含响应数据的XML DOM文档。
status:响应的HTTP状态说明。一般来说,可以将HTTP状态代码200作为成功的标志,此时可以取得responseText属性的值。状态代码304表示请求的资源并没有被修改,可以使用浏览器缓存中的版本。
statusText:HTTP状态的说明。
1 xhr.open("get","example.php",false); 2 xhr.send(null); 3 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ 4 alert("成功"+xhr.responseText); 5 }else{ 6 alert("失败"+xhr.responseText); 7 }
四、异步获取数据
XHR对象有一个readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下:
0:未初始化。尚未调用open()方法。
1:启动。已经调用open()方法,但尚未调用send()方法。
3. 发送。已经调用send()方法,但尚未接受到响应。
3. 接受。已经接受到部分响应数据。
4. 完成。已经接受到全部响应数据,而且已经可以在客户端使用了。
只要readyState的属性值改变一次,就会触发一次readystatechange事件。
1 var xhr=new XMLHttpRequest(); 2 xhr.onreadystatechange=function(){ 3 if(xhr.readyState==4){ 4 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ 5 alert(xhr.responseText); 6 }else{ 7 alert("失败"+xhr.responseText); 8 } 9 } 10 }; 11 xhr.open("get","example.php",true); 12 xhr.send(null);
调用xhr.abort()方法,XHR对象会停止触发事件。
五、get请求
get请求常用于向服务器查询某些信息,可以将查询字符串追加到url的末尾:
xhr.open("get","example.php?age=20&name=xiaoming",true);
查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。下面这个函数可以辅助向现有URL的末尾添加查询字符串参数:
1 function addURLParam(url,name,value){ 2 url+=(url.indexOf("?")==-1?"?":"&"); 3 url+=encodeURIComponent(name)+"="+encodeURIComponent(value); 4 return url; 5 }
六、POST请求
POST请求,通常用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据,而且格式不限。如果服务器上的PHP想通过$_POST超级全局变量获取数据,可以使用XHR来模仿表单提交:首先将Content-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型,其次以适当方式创建一个字符串。
1 xhr.open("post","test.php",true); 2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 3 var data="age=20&name=dongfeng" 4 xhr.send(data);
也可以通过serialize()函数将页面中表单的数据进行序列化,然后通过XHR发送到服务器。
1 xhr.open("post","test.php",true); 2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 3 var form=document.getElementById("user-info"); 4 xhr.send(serialize(form));
与get请求相比,POST请求消耗的资源会多一些。从性能角度来看,以发送相同的数据计,Get请求的速度最多可达到POST请求的两倍。
七、FormData
FormData为序列化表单以及创建与表单格式相同的数据提供了便利。使用FromData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。
1 xhr.open("post","test.php",true); 2 var form=document.getElementById("user-info"); 3 xhr.send(new FormData(form));
可以使用append方法向FromData对象中追加数据:
var data=new FormData(); data.append("name","snsart");
八、进度事件
有以下6个进度事件:
loadstart:在接受到响应数据的第一个字节时触发。
progress:在接受响应期间持续不断的触发。
error:在请求发生错误时触发。
abort:在因为调用abort()方法而终止连接时触发。
load:在接受到完整的响应数据时触发。
loadend:在通信完成或者触发error、abort或load事件后触发。
其中onprogress事件处理程序会接收到一个envent对象,其target属性时XHR对象,并且有三个额外的属性:lengthComputable、position和totalSize。其中,lengthComputable是一个表示进度信息是否可用的布尔值,position表示已经接收的字节数,totalSize表示根据
Content-Length响应头部确定的预期字节数。有了这些数据,就可以创建一个进度指示器了:
1 xhr.οnprοgress=function(event){ 2 var divStatus=document.getElementById("status"); 3 if(event.lengthComputable){ 4 divStatus.innerHTML="接收:"+event.position+"总共:"+"event.tatalSize"+"字节"; 5 } 6 }; 7 xhr.open("get","altevents.php",true); 8 xhr.send(null);
转载于:https://www.cnblogs.com/snsart/p/10896137.html
浏览器与服务器通信技术——Ajax详解相关推荐
- Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
- php微信小程序物流进度推送,微信小程序 消息推送php服务器验证实例详解
微信小程序 消息推送php服务器验证实例详解 设置页面("设置">>"开发设置"): 1.设置服务器域名 注意http和https协议的不同. 2. ...
- 浏览器实现抓包过程详解
浏览器实现抓包过程详解 几乎所有浏览器都提供了抓取数据包的功能,因为浏览器为抓包提供了一个专门的操作界面,因此这种抓包方式也被称为"控制台抓包".本节以 Chrome 浏览器为例进 ...
- Asp.Net+Jquery.Ajax详解5-$.getScript
目录(已经更新的文章会有连接,从7月25日开始,每2到3天更新一篇): Asp.Net+Jquery.Ajax详解1-开篇(2012.07.25发) Asp.Net+Jquery.Ajax详解2-$. ...
- linux服务器操作系统日志都有哪些,Linux操作系统服务器日志管理详解
Linux操作系统服务器日志管理详解 Linux操作系统服务器日志管理详解 日志对于安全来说,非常重要,他记录了系统每天发生的各种各样的事情,你可以通过他来检查错误发生的原因,或者受到攻击时攻击者留下 ...
- PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解
PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解 uchome的index文件中的二级域名功能判断,使用了php的$_SERVER['HTTP_HOST'],开始对这个不是很了 ...
- 华为服务器cpu位置,服务器cpu参数详解
服务器cpu参数详解 内容精选 换一换 设备实时状态查询是检测设备在运行过程中的状态信息.用户可任选以下指令之一查看设备实时状态查询命令的可用参数.ascend-dmi -i -hascend-dmi ...
- 在linux系统上怎么架设服务器吗,Linux下各种服务器的架设详解
Linux下各种服务器的架设详解 本站整理 发布时间:2009-03-10 12:10:57 作者:jb51.net 我要评论 ########DNS########bind 篇##### ...
- 华为服务器bios系统,华为服务器bios配置详解
华为服务器bios配置详解 内容精选 换一换 当您想在Internet上通过域名访问您的网站时,可以通过本操作将域名托管至华为云的云解析服务,并为域名添加解析记录.例如,搭建一个网站服务器,采用IPv ...
最新文章
- VS2008下直接安装使用Boost库1.46.1版本号
- 浅谈Linux下的EXT3文件系统
- “猜你喜欢” — 浅谈内容分发中的推荐系统
- memcache运行机制(转)
- udp java 编程_JAVA 网络编程之UDP编程
- small用于不连续数组_Excel公式技巧19: 在方形区域内填充不重复的随机整数
- 查看网卡[网络接口]
- python 多进程 内存增长_python 多进程 内存 copy-on-write
- mysql二进制安装方法
- 托微软的福,谷歌把GitLab捧成了独角兽
- C++标识符的命名规则
- http请求,普通的get和post方法
- javascript中object的运算符操作使用
- PLC浏览器端机械动画仿真(nodejs、vue)
- 「不灭的火,名唤梦想」青年程序员的一颗少年心
- 蓝桥杯:座次问题(枚举法 回溯) java
- java计算机毕业设计html5健身房信息管理系统MyBatis+系统+LW文档+源码+调试部署
- linux maven yum安装,linux下yum安装maven
- ERP系统的备份考虑
- 极路由设置虚拟服务器,HiWiFi极路由手机设置教程
热门文章
- 黑马程序员Linux系统开发视频之创建守护进程模型
- 90%人工智能公司都亏损?AI盈利难背后的大数据门槛
- 机器学习实战:支持向量机
- 深度学习基础入门(一):基本概念和术语解读
- Windows API之WriteFile函数详细解答
- php $globa作用是l,php 关键字global在定义变量中的作用
- mysql concat例子_浅析MySQL中concat以及group_concat的使用
- 理解ReentrantLock的公平锁和非公平锁
- 010_logback中的SocketAppender
- 不同平台上安装python的方式是一样的对还是错_不可以在同一台计算机上安装多个不同的Python版本...