一 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}\n\n"; 
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()

执行异步 AJAX 请求

$.ajaxPrefilter()

在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项

$.ajaxSetup()

为将来的 AJAX 请求设置默认值

$.ajaxTransport()

创建处理 Ajax 数据实际传送的对象

$.get()

使用 AJAX 的 HTTP GET 请求从服务器加载数据

$.getJSON()

使用 HTTP GET 请求从服务器加载 JSON 编码的数据

$.getScript()

使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript

$.param()

创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）

$.post()

使用 AJAX 的 HTTP POST 请求从服务器加载数据

ajaxComplete()

规定 AJAX 请求完成时运行的函数

ajaxError()

规定 AJAX 请求失败时运行的函数

ajaxSend()

规定 AJAX 请求发送之前运行的函数

ajaxStart()

规定第一个 AJAX 请求开始时运行的函数

ajaxStop()

规定所有的 AJAX 请求完成时运行的函数

ajaxSuccess()

规定 AJAX 请求成功完成时运行的函数

load()

从服务器加载数据，并把返回的数据放置到指定的元素中

serialize()

编码表单元素集为字符串以便提交

serializeArray()

编码表单元素集为 names 和 values 的数组

web worker，SSE，WebSocket，AJAX 与后端交互的方式的更多相关文章

  1. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  3. ajax前后端交互原理（3）

    3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...

  4. JSON（及其在ajax前后端交互的过程）小识

    一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...

  5. ajax前后端交互原理（1）

    1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...

  6. AJAX 前后端交互 验证信息是否正确

    1.前段: function checkPtCode(obj){ $.ajax({ type: "post", url: "xxxxxxx", data: {& ...

  7. ajax前后端交互原理（5）

    5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...

  8. ajax前后端交互原理（7）

    7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head&g ...

  9. ajax前后端交互原理（6）

    6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...

随机推荐

  1. C#遍历匿名对象的所有属性、value

    Object obj = ,pwd=" }; //遍历匿名对象 foreach (System.Reflection.PropertyInfo p in obj.GetType().GetP ...

  2. cf914F. Substrings in a String(bitset 字符串匹配)

    题意 题目链接 Sol Orz jry 和上一个题一个思路吧,直接bitset乱搞,不同的是这次有了修改操作 因为每次修改只会改两个位置,直接暴力改就好了 #include<bits/stdc+ ...

  3. [原创]在Debian9上配置NAS

    序言 此教程安装的都是最新版本的.由于是当NAS让它非常稳定的运行,所以能不安装的软件尽量不要安装. 一.准备工作 1. 更新系统 没啥,就他喵想用个最新的. apt update && ...

  4. centos7 & centos6 rrdcache

    cat > /etc/systemd/system/rrdcached.service << EOF [Unit] Description=Data caching daemon f ...

  5. Java项目性能瓶颈分析及定位（八）——Java线程堆栈分析（五）

    对于CPU而言,常见的瓶颈主要有两种:服务器的压力很小,但是CPU的利用率却很高,这样的性能瓶颈相对比较容易定位(好比我只是说了你一句,你就哭了,你的弱点立马就暴露出来了):给服务器施加的压力很大,但 ...

  6. ubuntu查看nvidia显卡状态

    nvidia-smi 连续查看显卡状态 sudo watch nvidia-smi

  7. UE4的蓝图都能做什么

    创建关卡脚本 蓝图具有和虚幻3中Kismet一样的功能,每个关卡都由自己的蓝图,他可以: 引用和操控actors 控制使用Matinee的过场 管理关卡流,存档点以及其他关卡相关的系统 和关卡中的类蓝 ...

  8. Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly.错误

    错误如图示: 1.在php的目录下建立个文件夹tmp,这个有权限的问题,如果是ntfs的分区,就一定要添加evryone的控制权限,否则是没用的.2.在php.ini找到session.save_pa ...

  9. POJ-3111 K Best---二分求最大化平均值

    题目链接: https://cn.vjudge.net/problem/POJ-3111 题目大意: 卖宝救夫:Demy要卖珠宝,n件分别价值vi 重 wi,她希望保留k件使得 最大. 解题思路: # ...

  10. 【UOJ139】【UER #4】被删除的黑白树（贪心）

    点此看题面 大致题意: 请你给一棵树黑白染色,使每一个叶结点到根节点的路径上黑节点个数相同. 贪心 显然,按照贪心的思想,我们要让叶结点到根节点的路径上黑节点的个数尽量大. 我们可以用\(Min_i\ ...