javascript客户端与服务器端通信
高性能的网络通信包括以下方面:选择正确的数据格式和与之匹配的传输技术。
一、数据格式
用于传输的数据格式有:
1)html,仅适用于特定场合,传输数据量大,不过它可以节省客户端的CPU周期,
2)XMl,相对笨重并且解析缓慢;
3)json 轻量级,解析速度快
4)字符分割的自定义格式十分轻量级,在解析大量数据集时快,不过需要编写额外的服务端构造程序,并在客户端解析。在创建自定义格式时,最重要的决定之一就是采用哪种分隔符,理想情况下,它应该是一个单字符,而且不应该存在于数据中,ASCII字符表的前几个字符在大多数服务端语言中能够正常工作而且容易书写,当然也可以作为split的承诺书。如\u0001,\u0002等。
二、客户端向服务器请求数据
有五种常用技术用于向服务器请求数据。
1)XMLHttpRequest(XHR)
2)动态脚本注入
3)iframes
4)comet
5)Multipart XHR
其中,comet和iframes使用在极端情况下,这里不多做介绍。
2.1 XHR
这是ajax的基础,用得很多了,它提供了最完善的控制和灵活性,可以设置或者修改http的请求头,并会把接收到的所有数据当成一个字符串,这有可能会降低解析速度。
2.2 动态脚本注入(jsonP的原理,和sql注入不同)
动态脚本注入允许跨域请求和本地执行javascript和json,但是接口并不安全,以下是一个动态脚本注入的案例。、
动态脚本注入提供的控制是有限的,不能设置请求的头信息,参数传递也只能采用GET方式,而非post。不能设置请求的超时处理或者重试。事实上,就算失败了也不一定知道。必须等待所有数据都已返回,才可以访问它们。
此外重要的一点是,响应消息作为脚本标签的源码,必须是可执行的javascript代码,不能使用纯xml,纯json或者其他任何格式的数据,无论哪种格式,都必须封装在一个回调函数中。
作为响应消息的js(dataStuct.js)代码:
function callback(name,age){ return '{"name":name,"age":age}' }
调用部分的代码如下:
//动态脚本注入 var scriptElement=document.createElement('script'); scriptElement.src=".dataStruct.js"; document.getElementsByTagName(].appendChild(scriptElement); var data=callback('bobo',27); console.log(data);//输出{"name":"bobo","age":"27"} console.log(JSON.parse(data).name);//输出bobo
使用这种技术,响应消息作为javascript直接执行,无需进一步处理。因此成为客户端获取并解析数据最快的方法,但是这种技术无法实现权限和访问控制,因此从那些无法控制的服务器上请求数据需要格外小心。
2.3 Multipart XHR
Multipart XHR是一种新技术,允许客户端只有一个http请求就可以从服务器向客户端传送多个资源,在这种技术中,任何数据类型都可以被javascript作为字符串发送。通过在服务器将资源(CSS文件,html片段,javascript代码或者base64编码的图片)打包成为一个由双方原定的字符分割的长字符串发送到客户端。然后javascript代码处理这个长字符串,并根据它的mime-type类型和传入的其他“头信息”解析出每个资源。以图片为例,图片不是由base64字符串转换成二进制,而是使用data:url的方式创建,并制定mime-type为images/jpg.
具体的实现代码这里暂略。
Multipart XHR最大的缺点是以这种方式获得的资源不能被浏览器缓存。因此在页面包含了大量其他地方用不到的资源(因此也无须缓存),尤其是图片的时候适用。毕竟http请求是ajax最大的瓶颈之一,因此减少其需求数量也会整个页面的性能有很多大提升。(感觉很适合于基站巡检系统图片的性能提升中)
3.客户端只需要向服务器发送数据
如果仅仅需要将数据发送到服务器,无需服务器返回数据时,有两种广泛使用的技术:XHR和信标。
3.1 XHR
XHR就不多说了,既可以用于向服务器发送数据,也可用于向服务器请求数据。
3.2图片信标(web beacons)
图片信标使用javascript创建一个新的image对象,并把src属性设置为服务器上脚本的url。该url包含了我们要通过get传回的键值对数据。它通常用作客户端与Web Analytics数据收集服务器间进行数据交换的桥梁,用于web网站统计用。大体代码如下:
var url='/status_tracker.php'; var params=['step=2','time=123456']; (new image()).src=url+'?'+params.join('&');
通常有两种用法:
1)服务端仅接收数据,不反馈任何信息。创建的img也不会插入DOM。
2)服务器返回一个的透明图片(通常是1px*1px),此时可以接收数据,但仅限于非常少的几种方式,可以监听image对象的load事件,它会告诉服务器是否成功地接收了数据。此外还可以检查服务器返回的图片的长度和宽度(例如,宽度1代表成功,宽度2代表失败等等)
可见图片信标很简单,能做的事情也是有限的,无法post数据,同时由于url的长度有限,因此能否发送的数据量也是有限的。
javascript客户端与服务器端通信的更多相关文章
- C#Socket_TCP(客户端,服务器端通信)
客户端与服务器通信,通过IP(识别主机)+端口号(识别应用程序). IP地址查询方式:Windows+R键,输入cmd,输入ipconfig. 端口号:可自行设定,但通常为4位. 服务器端: usin ...
- 客户端请求服务器端通信, Web 编程发展基础|乐字节
乐字节的小伙伴们,好久不见,甚是想念啊! 前面我发布的文章算是把Java初级基础阶段讲完了,接下来小乐将会给大家接着讲Java中级阶段——Javaweb. 首先,我们要看看Javaweb阶段主要重点掌 ...
- WebSocket起航 JavaScript客户端和Server通信
Message =>JSON => Move 客户端发给服务器总是Move server.send(JSON.stringify({row: row, column: column} ...
- JavaScript中利用Ajax 实现客户端与服务器端通信(九)
一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用X ...
- asp.net javascript客户端调用服务器端方法
如何用js调用服务器端方法.首先服务器端方法的格式如下 [System.Web.Services.WebMethod] public static void serverMethod(s ...
- android-------- socket 实现客户端与服务器端通信
前面介绍了Socket的简介和原理,今天简单的来实现一下客服端与服务器通信的功能 客服端 建立连接 try { socket = new Socket("192.168.1.100" ...
- io流+网络+线程池 实现简单的多客户端与服务器端通信
1 import java.io.IOException; 2 import java.io.InputStream; 3 import java.io.OutputStream; 4 import ...
- Android客户端与Python服务器端通信之上传图片
继上篇成功的与服务器端通信上之后,我现在需要将安卓本地的图片上传到服务端.服务端接收图片存下来. 参考:https://blog.csdn.net/qq_26906345/article/detail ...
- AngualrJS之服务器端通信
译自<AngularJS> 与服务器通信 目前,我们已经接触过下面要谈的主题的主要内容,这些内容包括你的Angular应用如何规划设计.不同的angularjs部件如何装配在一起并正常工作 ...
随机推荐
- <转>SQL Server返回最后一个标识值的三个函数:IDENT_CURRENT、@@IDENTITY、SCOPE_IDENTITY
MSDN对官方解释:这三个函数都返回最后生成的标识值. 但是,上述每个函数中定义的“最后”的作用域和会话有所不同. 1.IDENT_CURRENT 返回为某个会话和当前作用域中的指定表生成的最新标识值 ...
- UVA 11464 暴力+位运算 ***
题意:给你一个 n * n 的 01 矩阵,现在你的任务是将这个矩阵中尽量少的 0 转化为 1 ,使得每个数的上下左右四个相邻的数加起来是偶数.求最少的转化个数. 新风格代码 lrj书上说的很清楚了, ...
- [转载]memcached完全剖析--1. memcached的基础
转载自:http://charlee.li/memcached-001.html 翻译一篇技术评论社的文章,是讲memcached的连载.fcicq同学说这个东西很有用,希望大家喜欢. 发表日:200 ...
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
- 如何查看OpenCv的源代码
需要移植部分opencv的算法,不得不查看opencv的原始代码. 在一般的代码调试中一般只能看到一些opencv的函数声明和定义,看不到内部执行过程,需要利用 CMake导出opencv 源码,生成 ...
- HDU 5769 Substring 后缀数组
Substring Problem Description ?? is practicing his program skill, and now he is given a string, he h ...
- 踩坑事件:windows操作系统下的eclipse中编写SparkSQL不能从本地读取或者保存parquet文件
这个大坑... .... 如题,在Windows的eclipse中编写SparkSQL代码时,编写如下代码时,一运行就抛出一堆空指针异常: // 首先还是创建SparkConf SparkConf c ...
- MySQL:索引工作原理
索引查找:通过索引键找到索引的叶子节点,再通过叶子节点的标记快速找到表中对应的行数据,再返回指定的列 索引找查是通过索引键定先位到一块局部区域,再开始扫描匹配的数据的. 为什么需要索引(Why is ...
- 李洪强iOS经典面试题147-WebView与JS交互
李洪强iOS经典面试题147-WebView与JS交互 WebView与JS交互 iOS中调用HTML 1. 加载网页 NSURL *url = [[NSBundle mainBundle] UR ...
- Android 四大护法之一 Service
1.Service的概念 Service是Android 四大组件之一,是默认没有界面的运行于后台的服务程序.Service的开启方式分为启动式服务(startService)和绑定式服务(bindS ...