js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解
![](https://luanpeng.oss-cn-qingdao.aliyuncs.com/csdn/ad1.jpg)
全栈工程师开发手册 (作者:栾鹏)
快捷链接:
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
js系列教程13-原型、原型链、作用链、闭包全解
js中json 全解
js对象
var person0={name:"person0", //key和value间用冒号连接age:11 //不同的key-value对之间用逗号连接,最后一个value后不加符号。
};
json对象
var person0 = {"name":"person0", //与js对象的对象字面量的区别在于属性必须加引号"age":12
};
var person1 = {"name":"person1","age":12,"school":{ //JSON中对象可以嵌套。每个JSON对象使用{}包含"name":"school1", "address":"北大对面" } toJSON:function(){ //toJSON函数是对象序列化时的调用虚函数return this.name;}
};
json数组
var persons = [person0,person1,person2]; //JSON数组,每一个元素都是json对象
json对象的操作
person0.name = "person0" //json对象与js对象操作方法相同
person0['name'] = 'person0'
person0.newName = "pppp" //也是支持属性的增删查改操作
json数组元素的操作
persons[2].age=person0.age; //JSON中数组对象与js对象使用方法相同
将js对象、json对象、json数组转化json字符串(序列化)
var personstr = JSON.stringify(persons); //JSON.stringify将对象(js的或JSON的)转化为JSON字符串(称为序列化)。可以序列化对象或对象数组。会自动滤出值为underfined的属性。person2str =JSON.stringify(person2,["name","age"],"--"); //第二个参数是过滤器,表示只保留name和age两个属性。第三个参数是换行缩进,可为数字缩进空格数目,最大缩进为10,可为字符串,表示缩进字符串。调用stringify,执行顺序:toJSON虚函数或对象本身->函数过滤器->存在属性进行序列化->缩进参数进行格式化personstr = JSON.stringify(person2,function(key,value){ //使用函数为过滤器if(key=="name"||key=="age")return value;elsereturn undefined; //返回undefined就不会再被序列化
},4);
将json字符串转化为json对象、json数组
persons = JSON.parse(personstr); //JSON.parse将字符串转化为js对象或数组person2 = JSON.parse(person2str,function(key,value){ //使用函数控制转化操作if(key=="name") return "family"+value;else return value;
});
js中的ajax(XMLHttpRequest)
Ajax的核心是XmlHttpRequest。我们通过对该对象的操作来进行异步的数据请求。
实际上我们接触到最多的应该是jQuey对ajax的封装,比如.ajax,.ajax,.ajax,.post等,如果用Angular的话我们可以用$http服务。
除了这些之外,我们可以使用第三方的Ajax库qwest等。
jquery中ajax的使用可以参考jquery系列教程6-ajax的应用全解
这里作为js的系列文章,我们只介绍js中的XmlHttpRequest。
创建请求对象
var xhr = new XMLHttpRequest(); //创建XHR对象
状态变化函数
xhr.onreadystatechange=function(){ //onreadystatechange状态变化函数console.log("readstate="+xhr.readyState.toString()); //readyState的取值0为未初始化,未调用open,1已open未send,2已send未回复,3回复部分,4全部回复if(xhr.readyState==3) //在后台使用推送机制的话,前端会间断的收到推送数据,状态为3。console.log(xhr.responseText); //responseText包含曾经的所有推送数据,所以每次读取应该根据旧数据长度查找最新的数据的位置。这里省略了
};
响应完成事件
xhr.onload=function(){ //无论什么响应,接收完成就触发console.log("接收响应完成");};
响应异常事件
xhr.onerror=function(){console.log("响应出错");
};
进度事件
xhr.onprogress=function(event){ if(event.lengthComputable){ //lengthComputable表示进度信息是否可用console.log("进度"+event.position*1.0/event.totalSize); //position表示已接收数,totalSize表示预期接收数}
};
请求初始化
xhr.open("get","example.php?qunid=12",false); //opet准备启动请求,参数:请求类型post或get,请求地址,是否异步发送。同步的话会等待程序返回方可继续
自定义头部信息
xhr.setRequestHeader("myheader","myvalue"); //发送自定义信息
发送请求
xhr.send(null); //发送请求,如果是同步,会直到响应完毕才会继续运行。参数:请求主体。xhr.abort()取消异步请求
获取响应
if((xhr.status>200 && xhr.status<300)|| xhr.status==304)
{console.log(xhr.responseText); //responseText返回数据,responseXML在响应类型为text/xml和application/xml时返回XML的响应数据console.log(xhr.getResponseHeader("myback")); //读取服务器返回在自定义头部信息console.log(xhr.getAllResponseHeaders()); //返回所有信息
}
else console.log("失败:"+xhr.status); //statusText表示HTTP状态描述,各浏览器不同
超时函数
xhr.ontimeout = function(){console.log("响应超时")
};
请求数据序列化
var data = new FormData(myform); //序列化表单,也可以通过new FormData(),创建空的对象
data.append("qunid","21"); //添加键值对
data.append("file1",files[0]); //可以在包含file的表单中直接添加文件xhr.open("post","example.php",true);
xhr.send(data); //发送序列化数据
comet:基于http长连接的“服务器推”技术
Ajax的出现使客户端与服务器端传输数据少了很多,也快了很多,也满足了以丰富用户体验为特点的web2.0时代 初期发展的需要,但是慢慢地也暴露了他的弊端。比如无法满足即时通信等富交互式应用的实时更新数据的要求。这种浏览器端的小技术毕竟还是基于http协议,http协议要求的请求/响应的模式也是无法改变的,除非http协议本身有所改变。
对于某些特定的业务需求,比如通知,我们需要有及时的数据更新,我们能够想到的就是使用setInterval每隔一定时间比如10s去获取一次请求,从而做到一些通知更新,但是这并不一种高效的做法,这会增加服务器的请求数量。
这个时候有了另外一种概念,“反向Ajax”,由服务器进行数据推送, Comet能够让信息近乎实时的被推送到页面上,非常适合要求实时性的获取的数据的页面。客户端与服务器端保持一个长连接,只有客户端需要的数据更新时,服务器才主动将数据推送给客户端。
Comet的实现主要有两种方式,基于Ajax的长轮询(long-polling)方式和基于 Iframe 及 htmlfile 的流(http streaming)方式。
因此可以说comet主要是在服务器端由后台来进行完成。
前端要做的就是通过ajax请求成功后,在XMLHttpRequest的onreadystatechange函数中持续获取数据。
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() { //服务器实现comet技术,当后台发来数据后,会自动触发这个函数。连接不关闭console.log(xhr.readyState);if (xhr.readyState === 3 && xhr.status === 200) {//获取成功后执行操作//数据在xhr.responseTextconsole.log(xhr.responseText);}
};
SSE
SSE(Server-Sent Event,服务端推送事件)是一种允许服务端向客户端推送新数据的HTML5技术。与由客户端每隔几秒从服务端轮询拉取新数据相比,这是一种更优的解决方案。
var source = new EventSource("myevent.php"); //参数:入口点。必须与创建对象的页面同源(url模式,域、端口)。连接断开会自动建立,或者使用source.close()强制断开
source.onmessage = function(event){ //open在连接建立时触发,message在接收到新数据时触发,error在无法建立连接时触发console.log(event.data); //推送数据保存在event.data中
};
source.onerror=function(){console.log("连接失败");console.log("连接状态"+source.readyState) //readyState属性0表示正在连接,1表示打开了链接,2表示关闭了链接
};
WebSocket
在新一代html标准html5中提供了一种浏览器和服务器间进行全双工通讯的网络技术Websocket。从Websocket草案得知,Websocket是一个全新的、独立的协议,基于TCP协议,与http协议兼容、却不会融入http协议,仅仅作为html5的一部分。
HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
也就是我们可以使用web技术构建实时性的程序比如聊天游戏等应用。
意:SSE和 Web Sockets 都是新的api,需要专门服务器支持,需要大家考虑兼容性。
var socket = new WebSocket("ws://www.example.com/server.php"); //未加密的链接不使用http,而是ws,加密的使用wss
socket.send("hello world"); //发送数据
socket.onmessage=function(event){ //web socket有open、error、close事件console.log(event.data);console.log(socket.readyState); //0表示正在建立,1已经建立,2正在关闭,3已经关闭
};
总结
AJAX – 请求 → 响应 (频繁使用)
Comet – 请求 → 挂起 → 响应 (模拟服务端推送)
Server-Sent Events – 客户单 ← 服务端 (服务端推送)
WebSockets – 客户端 ↔ 服务端 (未来趋势,双工通信)
js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解相关推荐
- js系列教程7-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程5-数据结构和算法全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程8-事件全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程4-函数、函数参数全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程2-对象、对象属性全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程12-浏览器存储全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程10-canvas绘图全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程9-表单元素全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程6-BOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
最新文章
- 发那科karel机器人环境配置_湖北轻工职业技术学院-FANUC机器人授权培训中心正式授牌...
- windows下CodeIgniter CLI Tool 指定host 和port无效问题
- 微软认真聆听了开源 .NET 开发社区的炮轰: 通过CLI 支持 Hot Reload 功能
- java bitset_Java BitSet cardinality()方法与示例
- 线程下的udp和tcp局域网聊天
- 向量加减法首尾规律_向量加减口诀首尾相接
- 用户在登录的时候,密码输入错误也能登录问题
- yum 配置详解(转发)
- cni k8s 插件安装_使用kind来快速部署k8s环境
- qq发文件大小上限_微信再两个放大招!网友:QQ可以卸载了?
- CSS overflow属性与display属性
- 全志A33 Android4.4 RTL8723DS WIFI/BT驱动调试
- 做在线交易你必须知道的关于支付的知识
- HDMI接口 PCB布线指南-4层板为例
- 对udp组播流(MPTS)进行简单的收录
- 接连入职五位博士,云和恩墨到底在搞什么大事情?
- Android手机拍照或从本地相册选取图片设置头像。适配小米、华为、7.0
- IT行业的人越来越多,工资为啥却不降反升?
- perl与c相互调用
- 牛客网语法篇练习函数类型(全)
热门文章
- 软件测试用例模板和例子_如何编写测试用例?
- 【c++】笔记:输入带空格的字符串
- ffdshow 源代码分析 2: 位图覆盖滤镜(对话框部分Dialog)
- python 提示框如何顶层显示_python tkinter之顶层菜单、弹出菜单实例
- c mysql dll_PHP5.3以上版本没有libmysql.dll,以及由此带来的困扰
- java多线程按行读取文件_“java”中多线程按行读取txt且每个线程读的内容不能重复,这么求“demo”?...
- webSphere报错:Error 500: javax.servlet.ServletException: SRVE0207E: Uncaught initialization
- Codeforces Global Round 14, C. Phoenix and Towers
- 2021牛客寒假算法基础集训营5,签到题BF
- 软件静态测试qac,Helix QAC — 软件静态测试工具