一 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# 父类的引用指向子类的实例

    在C#中关于父类对子类的引用大概有这么几种: 父类是接口,普通类,抽象类 public interface A { void a(); } public class B { public void b ...

  2. Spring课程 Spring入门篇 3-4 Spring bean装配（上）之自动装配

    课程链接: 1 自动装配的方式 2 自动装配实现 1 自动装配的方式 根据反射的机制 1.1 byName根据属性名自动装配,类似于依赖注入的set注入.(如果找不到set属性中的bean,如果tes ...

  3. Python之人工智能:PyAudio 实现录音 自动化交互实现问答

    Python 很强大其原因就是因为它庞大的三方库 , 资源是非常的丰富 , 当然也不会缺少关于音频的库 关于音频, PyAudio 这个库, 可以实现开启麦克风录音, 可以播放音频文件等等,此刻我们不 ...

  4. css多行文本溢出显示省略号

    HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  5. Mac下配置apach服务

    有的时候,我们需要在内网工作组中分享一些文件或是后台接口没有及时给出,你又想要模拟真实数据,直接在项目里创建plist也可以做到这种需求,但难免让工程变得冗余且看起来比较Low.这个时候就看出配置本地 ...

  6. C#保存图片到数据库并读取显示图片的方法

    private void button2_Click_1(object sender, System.EventArgs e) { string pathName; if (this.openFile ...

  7. 分析一点python源代码

    偶然看了一下python的部分源代码,感觉python的作者写的代码真心很美,简洁美观,学习之. 举几个例子抛砖引玉一下: def removedirs(name): ""&quo ...

  8. redis笔记(一)

    redis安装 ubuntu:     apt-get install redis-server redis服务  :redis-server 启动客户端   :redis-cli redis简单知识 ...

  9. canvas 绘制八卦图

    绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...

  10. PHP : 封装Mysqli的连接、关闭和增改查(面向过程)

    废话不多说,直接上图和案例:(看行数进行拼接) 注意:连接数据库中,因为用了$CONNECT全局变量,所以我们的连接数据库封装方法必须要执行了才能获取到此全局变量的值 所引入的数据库文件(databa ...