一 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. 如何修改eclipse的web项目默认浏览器

  2. tomcat多站点部署

    我们可能会有这种场景,一个tomcat想部署两个web工程,说白了就是公用一个端口,那怎么办呢?就是多站点部署,具体步骤如下(这里以linux平台举例): 1)先修改server.xml(conf/s ...

  3. 根据tomcat日志查找想要的错误日志

    1.首先要记得程序报的错误信息 我的错误信息是[2015接收的参数中有空值],对应程序中的返回值是2015 以及出现错误信息的大致时间,我的大概是吃过午饭后,12:40-13:20之间 2.先去log ...

  4. ionic1跨域问题

    在使用ionic是遇到跨域问题 我自己尝试简单的单间一个能返回数据的后台服务器,ionic的www目录我使用一个ionic的livereload 来当做一个简易的web服务器,在使用ionic ser ...

  5. 移动web基础

    接触retina屏 基础知识(移动Web的基础知识)排版布局(高效的移动Web布局)开发效率终端交互优化 pixel像素基础viewport视图viewport_meta标签viewport_codi ...

  6. 使用GreenDao 添加字段，删除表,新增表操作

    GreenDao 给我个人感觉 比一般的ORM框架要好很多,虽然说上手和其他的比起来,较复杂,但是如果使用熟练以后,你会爱上这个框架的 用这些ORM 框架给我的感觉都是,当升级时,都需要进行数据库所有 ...

  7. Android 应用监听自身卸载，弹出用户反馈调查

    监听卸载情景和原理分析 1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇 ...

  8. Struts2 displaytag 导出文件为空

    以一个user的查询为例,在struts.xml配置里有这个action的配置: 然后可以在UserAction.java里找到list方法这个就是无非new 一个List<User> u ...

  9. python3绘图示例6-1（基于matplotlib，绘图流程介绍及设置等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import os import pylab as pyimport numpy as npfrom matpl ...

  10. Linux命令之查看服务进程（ps aux、ps -aux、ps -ef）的运用

    执行ps命令即可列出的是当前服务器进程的快照(时间点),如果想要实时动态的显示进程信息,就可以使用top命令. linux上进程有5种状态:  1. 运行(正在运行或在运行队列中等待)  2. 中断( ...