web worker，SSE，WebSocket，AJAX 与后端交互的方式
Posted 重剑无锋，大巧不工
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web worker，SSE，WebSocket，AJAX 与后端交互的方式相关的知识，希望对你有一定的参考价值。
一 web worker
web worker 是运行在后台的 javascript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
下面的例子创建了一个简单的 web worker，在后台计数：
demo_workers.js 文件代码：
var i=0;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 html 页面传回一段消息。
注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
if(typeof(w)=="undefined"){
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();
完整代码如下：
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker() {
w.terminate(); w = undefined;
}
</script>
</body>
二：server-sent event （SSE）
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
EventSource 对象用于接收服务器发送事件通知：
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br>";
};
实例解析：
创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
以下实例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：
if(typeof(EventSource)!=="undefined"){
// 浏览器支持 Server-Sent
}else{
// 浏览器不支持 Server-Sent..
}
服务器端代码：
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
<?php
header(‘Content-Type: text/event-stream‘);
header(‘Cache-Control: no-cache‘);
$time = date(‘r‘);
echo "data: The server time is: {$time}
";
flush();
?>
三WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 对象的属性
1：Socket.readyState只读属性 readyState 表示连接状态，可以是以下值：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
2：Socket.bufferedAmount只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
WebSocket 对象的相关事件。
|
事件 |
事件处理程序 |
描述 |
|
open |
Socket.onopen |
连接建立时触发 |
|
message |
Socket.onmessage |
客户端接收服务端数据时触发 |
|
error |
Socket.onerror |
通信发生错误时触发 |
|
close |
Socket.onclose |
连接关闭时触发 |
WebSocket 对象的相关方法
|
方法 |
描述 |
|
Socket.send() |
使用连接发送数据 |
|
Socket.close() |
关闭连接 |
WebSocket实例
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
在执行以上程序前，我们需要创建一个支持 WebSocket 的服务，从 pywebsocket 下载 mod_pywebsocket ,
或者使用 git 命令下载：git clone https://github.com/google/pywebsocket.git
四：AJAX
AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
|
方法 |
描述 |
|
执行异步 AJAX 请求 |
|
|
$.ajaxPrefilter() |
在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
|
为将来的 AJAX 请求设置默认值 |
|
|
$.ajaxTransport() |
创建处理 Ajax 数据实际传送的对象 |
|
使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
|
|
使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
|
|
使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
|
|
创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
|
|
使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
|
|
规定 AJAX 请求完成时运行的函数 |
|
|
规定 AJAX 请求失败时运行的函数 |
|
|
规定 AJAX 请求发送之前运行的函数 |
|
|
规定第一个 AJAX 请求开始时运行的函数 |
|
|
规定所有的 AJAX 请求完成时运行的函数 |
|
|
规定 AJAX 请求成功完成时运行的函数 |
|
|
从服务器加载数据，并把返回的数据放置到指定的元素中 |
|
|
编码表单元素集为字符串以便提交 |
|
|
编码表单元素集为 names 和 values 的数组 |
以上是关于web worker，SSE，WebSocket，AJAX 与后端交互的方式的主要内容，如果未能解决你的问题，请参考以下文章
爱创课堂每日一题 Web Worker 和webSocket?
即时通讯开发中WebSocket和SSE技术如何实现Web端消息推送