javascript客户端与服务器端通信

Posted 2020-08-24

高性能的网络通信包括以下方面：选择正确的数据格式和与之匹配的传输技术。

一、数据格式

　　用于传输的数据格式有：

　　　　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(‘head‘)[0].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图片信标（beacons）