Javascript Ajax总结——其他跨域技术之Web Sockets
Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在Javascript中创建了Web Sockets之后,会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议。也就是说,使用标准的HTTP服务器无法实现Web Sockets,只有支持这种协议的专门服务器才能正常工作。
由于Web Sockets使用了自定义的协议,所以URL模式也略有不同。未加密的连接不再是http://,而是ws://;加密的连接也不是https://,而是wss://。在使用Web Sockets URL时,必须带着这个模式,因为将来还有可能支持其他模式。
使用自定义协议而非HTTP协议的好处:
能够在客户端和服务器之间发送非常少量的数据,而不必担心HTTP那样字节级的开销。由于传递的数据包很小,因此Web Sockets非常适合移动应用。毕竟对移动应用而言,带宽和网络延迟都是关键问题。
自定义协议的缺点:
制定协议的时间比制定Javascript API的时间还要长。
存在一致性和安全性问题。
支持Web Sockets的浏览器:Firefox6+、Safari5+、Chrome、iOS4+版的Safari。
(1)Web Sockets API
创建Web Socket,实例一个WebSocket对象并传入要连接的URL:
var socket = new WebSocket("ws://www.example.com/server.php");
注:必须给WebSocket构造函数传入绝对URL。同源策略对Web Sockets不适用,因此可以通过它打开到任何站点的连接。至于是否会与某个域中的页面通信,则完全取决于服务器。(通过握手信息就可以知道请求来自何方。)
WebSocket表示当前状态的readyState属性:
* WebSocket.OPENING(0):正在建立连接。
* WebSocket.OPEN(1):已经建立连接。
* WebSocket.CLOSING(2):正在关闭连接。
* WebSocket.CLOSE(3):已经关闭连接。
关闭Web Socket连接:
socket.close();
调用了close()之后,readyState的值立即变为2(正在关闭),而在关闭连接后就会变成3。
(2)发送和接收数据
向服务器发送数据,使用send()方法并传入任意字符串:
var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello World!");
因为Web Sockets只能通过连接发送纯文本数据,所以对于复杂的数据结构,在通过连接发送之前,必须序列化。
如:
var message = {
time: new Date(),
text: "Hello World!",
clientId: "asdfp8734req"
};
socket.send(JSON.stringify(message));
当服务器向客户端发送消息是,WebSocket对象就会触发message事件:
socket.onmessage = function(event){
var data = event.data;
//处理数据
//event.data返回的数据也是字符串
};
(3)其他事件
* open:在成功建立连接时触发。
* error:在发生错误时触发,连接不能持续。
* close:在连接关闭时触发。
WebSocket对象不支持DOM2级事件侦听器,必须使用DOM0级语法分别定义每个事件处理程序。
1 var socket = new WebSocket("ws://www.example.com/server.php");
2 socket.onopen = function(){
3 alert("Connection established.");
4 };
5 socket.onerror = function(){
6 alert("Connection error.");
7 };
8 socket.onclose = function(){
9 alert("Connection closed.");
10 };
只有close事件的event对象有额外的信息。
三个额外属性:
wasClean:布尔值,表示连接是否已经明确的关闭;
code:服务器返回的数值状态码;
reason:一个字符串,包含服务器发回的消息。
可以吧这些信息显示给用户,也可以记录到日志中以便将来分析:
socket.onclose = function(event){
console.log("Was clean?" + event.wasClean + " Code=" + event.code + " Reason=" + event.reason);
};
Javascript Ajax总结——其他跨域技术之Web Sockets的更多相关文章
- 06: AJAX全套 & jsonp跨域AJAX
目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- ajax请求ashx跨域问题解决办法
ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng ...
- javascript跨域请求RESTful Web Service
跨域请求RESTful Web Service 当我们用js请求RESTful Web Service的时候,通常会出现跨域无法访问的问题,也就是无法正常得到我们要的值.jsonp是个解决问题的方法. ...
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- JavaScript JSON AJAX 同源策略 跨域请求
网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- (转)jquery ajax使用及跨域访问解决办法
原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...
- JavaScript使用jsonp实现跨域
为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...
随机推荐
- pygame 入门实例教程 1 - 复古方块赛车游戏
作者自我介绍:大爽歌, b站小UP主 ,直播编程+红警三 ,python1对1辅导老师 . 本教程步骤明确,过程清晰简明,最终代码量250行上下,适合学习pygame的新手. 项目代码已上传到我的gi ...
- SpringBoot + 自定义注解,实现用户操作日志(支持SpEL表达式)
背景 一个成熟的系统,都会针对一些关键的操作,去创建用户操作日志. 比如: XX人创建了一条订单,订单号:XXXXXXXXX 因为操作人或者订单号是动态的,所以有些开发人员,不知道获取,就将这种操作日 ...
- 月工资不到10元的内容审核专员? - ChatGPT 在内容自动审查中的应用
内容过滤筛查是指对网络上发布或传播的文本.图片.视频等内容进行审核和监管,以防止出现违法违规.暴力色情.虚假广告.电信诈骗等现象,维护网络安全和社会秩序. 内容过滤筛查是一个亟待解决的问题,因为网络内 ...
- 两个例子带你入门 Disruptor
Disruptor 是英国外汇交易公司 LMAX 开发的一个高性能队列.很多知名开源项目里,比如 canal .log4j2. storm 都是用了 Disruptor 以提升系统性能 . 这篇文章, ...
- 「codeforces - 687D」Dividing Kingdom II
link. 好题啊. 首先有一个类 kruskal 暴力,就是对于每一个询问,把所有边按权值大小排降序,第一个加进去成为奇环的边就是答案.注意我们不需要关注偶环长成什么样子,所以我们实际上维护的是一棵 ...
- mpi转以太网连接300PLC与施耐德 Quantum PLC 通讯
S7300 PLC转以太网无需编程与施耐德 Quantum PLC modbusTCP通信 方案介绍: 西门子300PLC转以太网不需要编写程序通过兴达易控MPI-ETH-XD1.0与施耐德 Quan ...
- maven缺失ojdbc6解决方法(手动安装ojdbc6)
maven缺失ojdbc6解决方法(手动安装ojdbc6) 1. 首先下载ojdbc6jar包 jar下载地址一(需登录) jar下载地址二(直接下载) 2. 进入到jar包所在文件夹,执行cmd命令 ...
- NineData SQL 窗口支持深色模式,让程序员不再怕长期用眼!
您有没有尝试过被明亮的显示器闪瞎眼的经历? 在夜间或低光环境下,明亮的界面会导致许多用眼健康问题,例如长时间使用导致的眼睛疲劳.干涩和不适感,同时夜间还可能会抑制褪黑素分泌,给您的睡眠质量带来影响. ...
- 基于 P-Tuning v2 进行 ChatGLM2-6B 微调实践
微调类型简介 1. SFT监督微调:适用于在源任务中具有较高性能的模型进行微调,学习率较小.常见任务包括中文实体识别.语言模型训练.UIE模型微调.优点是可以快速适应目标任务,但缺点是可能需要较长的训 ...
- 如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统
序: 这几年观察下来,大部分做物联网三维可视化解决方案的企业或个人, 基本都绕不开3D机房.包括前面也讲过这样的案例<使用webgl(three.js)创建自动化抽象化3D机房,3D机房模块详细 ...