【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

简介:
导航

【初探HTML5之使用新标签布局】用html5布局我的博客页!

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道?

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站?

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息

 

前言

HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API,

跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递。

使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术。

跨文档消息传输

在之前我们若想跨域获取信息会花很多功夫,现在只要获取网页所在窗口对象实例变可以实现互相通信。

首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听:

window.addevntListener('message', function () {}, false)
使用windows对象的postMessage方法向其他窗口发生信息:

otherWindow.postMessage(message, targetOrigin)
第一个参数为发送文本,也可以是js对象(json)
第二个参数为接收消息对象窗口的URL,可以使用通配符
简单示例:

post信息


在以上基础上我们做一点修改,我们在子页面给出高宽按钮,用于告诉父窗口怎么改变iframe高宽:

父层代码
子层代码


最后为我们的e截个图:



更加灵活的运用,该api还可以更厉害的运用,我们可以传递函数名什么的,反正可做很多事情了。

web sockets 通信

web sockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP的通信机制

他实现了http不容易实现的服务器的数据推送等智能通信技术,因此受到了很高的关注。

使用web sockes api 可以在服务器端与客户端建立非HTTP的双向连接,这个连接是实时的也是永久的,除非显式关闭

这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户浏览器中,无需重新建立连接。

只要客户端有一个被打开的socket并且与服务器建立了连接,服务器就可以将数据推送到这个socket上,服务器不再需要轮询客户端请求,化被动为主动。

web sockets api

 web sockets api 本身非常简单,将url作为参数,然后调用websocket对象的构造器来建立于服务器的通信:

复制代码
var webSocket = new WebSocket('ws://localhost:8005/socket');
url必须使用ws或者wss(加密)作为头,这个url设定好后,在javascript脚本中可以通过访问websocket对象的url来重新获取
通信建立连接后,就可以双向通信了,使用websocket对象的send方法加json数据便可将任何形式数据传往服务器:

webSocket.send(msg);
通过onmessage事件来接收服务器传送过来数据:
webSocket.onmessage = function (e) {
  var data = e.data;
};
通过onopern事件监听socket打开事件:
webSocket.onopen = function (e) { };
通过onclose监听socket关闭事件:
webSocket.onclose = function (e) {};
通过webSocket.close()方法关闭socket连接;

通过readyState属性获取websocket对象状态:
CONNECTION 0 正在连接
OPEN 1 已经连接
CLOSING 2 正在关闭
CLOSE 2 已经关闭
复制代码
PS:,因为我不会配置服务器块的socket相关,所以暂时不能进行测试,该问题留待二次学习时解决。

整个代码还是很简单的:

复制代码
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 

// 打开Socket 
socket.onopen = function(event) { 

  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 

  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 

  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 

  // 关闭Socket.... 
  //socket.close() 
};
复制代码
 

结语

这章东西其实还是非常有用的,但真要问我有什么用,我还确实说不出来。。。。。。

 



本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3032548.html如需转载请自行联系原作者


相关文章
|
24天前
|
JSON API 数据格式
淘宝商品评论API接口,json数据示例参考
淘宝开放平台提供了多种API接口来获取商品评论数据,其中taobao.item.reviews.get是一个常用的接口,用于获取指定商品的评论信息。以下是关于该接口的详细介绍和使用方法:
|
2月前
|
JSON 算法 API
1688商品详情API实战:Python调用全流程与数据解析技巧
本文介绍了1688电商平台的商品详情API接口,助力电商从业者高效获取商品信息。接口可返回商品基础属性、价格体系、库存状态、图片描述及商家详情等多维度数据,支持全球化语言设置。通过Python示例代码展示了如何调用该接口,帮助用户快速上手,适用于选品分析、市场研究等场景。
|
4月前
|
XML JSON API
淘宝商品详情API的调用流程(python请求示例以及json数据示例返回参考)
JSON数据示例:需要提供一个结构化的示例,展示商品详情可能包含的字段,如商品标题、价格、库存、描述、图片链接、卖家信息等。考虑到稳定性,示例应基于淘宝开放平台的标准响应格式。
|
4月前
|
存储 供应链 监控
1688商品数据实战:API搜索接口开发与供应链分析应用
本文详细介绍了如何通过1688开放API实现商品数据的获取与应用,涵盖接入准备、签名流程、数据解析存储及商业化场景。开发者可完成智能选品、价格监控和供应商评级等功能,同时提供代码示例与问题解决方案,确保法律合规与数据安全。适合企业开发者快速构建供应链管理系统。
|
26天前
|
存储 监控 安全
电商API安全指南:保护数据与防止欺诈的最佳实践
在电商领域,API安全至关重要。本文从基础到实践,全面解析电商API安全策略:通过强认证、数据加密、输入验证及访问控制保护敏感数据;借助速率限制、欺诈检测与行为分析防范恶意行为。同时,强调将安全融入开发生命周期,并提供应急计划。遵循最佳实践,可有效降低风险,增强用户信任,助力业务稳健发展。
67 4
|
28天前
|
XML JSON API
API接口——连接世界,让你的数据畅通无阻!
API(应用程序编程接口)是连接不同软件系统的桥梁,如同数字世界的“万能适配器”。它通过标准化协议(如RESTful)和数据格式(如JSON/XML),实现前端请求与后端服务的无缝交互。API不仅提升了系统间的协作效率,还通过OAuth 2.0等技术保障安全性,并支持流量管控以优化性能。其应用场景广泛,包括金融科技、物联网、电子商务和社会化平台,为企业带来显著效益,如降低成本、提升响应速度和用户增长。未来,API将向智能化、微服务化、低代码集成和隐私计算方向发展,成为构建数字生态的核心技术,助力万物互联时代的创新与发展。
273 1
|
1月前
|
搜索推荐 安全 API
聚合电商API:一键连接多平台数据
聚合电商API接口平台整合淘宝、天猫、京东等多平台API,提供一站式数据服务。核心功能包括数据整合、多平台搜索、详细解析与定制化服务,助力商家高效管理订单、优化商品推荐及支持数据驱动决策。平台注重智能化、个性化与全渠道发展,保障数据安全,推动业务增长。
98 2
|
3月前
|
JSON 监控 API
1688 商品列表 API 深度拆解:从参数配置到数据获取
1688 是重要的批发采购平台,其商品列表 API 接口为开发者、商家和数据分析人员提供批量获取商品基础信息(如名称、价格、销量等)的能力。该接口支持市场调研、竞品分析等场景,助力商业决策与效率提升。接口基于 HTTPS 协议,采用 GET 或 POST 请求方式,需提供通用参数(如 app_key、timestamp 等)和业务参数(如 category_id、page_no 等)。响应数据以 JSON 格式返回,包含商品详情及分页信息。
129 13
|
2月前
|
机器学习/深度学习 算法 API
淘宝图片搜索API秘籍!轻松获取相似商品数据
淘宝图片搜索API是基于深度学习和计算机视觉技术的图片搜索工具,支持通过上传图片或URL搜索淘宝相似商品。其核心接口如`taobao.image.search`适用于电商购物、商品推荐及竞品分析等场景。该API具备高效性、准确性和易用性,用户只需提供一张图片即可快速获取相似商品,极大提升购物体验与效率。同时,商家也可借此优化商品展示以提高曝光率和销售机会。使用时,用户可通过Python代码调用API,上传图片并获取搜索结果。
|
3月前
|
数据采集 搜索推荐 API
Python 原生爬虫教程:京东商品列表页面数据API
京东商品列表API是电商大数据分析的重要工具,支持开发者、商家和研究人员获取京东平台商品数据。通过关键词搜索、分类筛选、价格区间等条件,可返回多维度商品信息(如名称、价格、销量等),适用于市场调研与推荐系统开发。本文介绍其功能并提供Python请求示例。接口采用HTTP GET/POST方式,支持分页、排序等功能,满足多样化数据需求。

热门文章

最新文章