请求数据
请求数据的方式:
- XMLHttpRequest(XHR) 【常用】
- Dynamic script tag insertion 动态脚本注入【常用】
- iframes
- Conmet
- Multipart XHR【常用】
XMLHttpRequest
流
通过监听readState 等于 3, 可以和正在传输的服务器响应进行交互。这就是所谓的流。
这时候能接收到部分信息,但不是所有信息。
低版本ie不支持流,不会提供3状态。
get
不改变服务器状态,只获取数据
get会被缓存,可以提高性能。
只有当url加上参数的长度接近或者超过2048才需要使用post。ie现在了url长度,过长会被拦截。
动态脚本注入
特点:能跨域请求数据。Hask。
缺点:
- 不能设置请求头信息。
- 参数只能使用get。
- 不能使用post。
- 不能设置超市处理或重试。
- 不能访问请求头信息。
- 不能把响应信息作为字符串处理。
- 响应信息作为脚本标签的源码,必须是可执行的js,并且必须封装在回调函数中。
安全问题,如果数据是来自无法控制的服务器需要多加小心。
Multipart XHR
允许客户端用一个请求就可以从服务端向客服端传送多个资源。
它通过在服务端将资源(html片段,css文件,js代码,base64图片)打包成一个
由双方约定的字符串分割的长字符串并发送到客户端。
然后用js代码处理字符串,根据他的mime-type类型和传入的头信息解析出资源。
const splitImgages = function(imageString) {
let imageData = imageString.split('\u0001')
let imageElement;
for (let i = 0, len = imageData.length; i < len; i++) {
imageElement = document.createElement('img')
imageElement.src = 'data:image/jpeg;base64,' + imageData[i]
document.getElementById('container').appendChil(imageElement)
}
}
let req = new XMLHttpRequest()
req.open('GET', '', true)
req.onreadystatechange = function() {
if(req.readystate === 4) {
splitImgages(req.responseText)
}
}
req.send(null)
$images = array('1.jpg', '2.jpg', '3,jpg');
foreach($images as $image) {
$image_fh = fopen($image, 'r')
$image_data = fread($image_fh, filesize($image));
fclose($image_fh);
$payloads[] = base64_encode($image_data)
}
$newline = chr(1);
echo implode($newline, $payloads);
这里同时传了三张,也可以同时传更多,响应消息更大,但只使用了一次http请求。
MXHR类库:http://rechfoolery.com/mxhr/
缺点:获取的资源不能被浏览器缓存
应用场景:
- 页面包含了大量其他地方用不到的资源,因此也无需缓存。
- 网站已经在每个页面中使用一个独立打包的js或者css文件来减少http请求,因为对每个页面来说这些文件都是唯一的
不需要从缓存中读取数据,除非重载页面。
一次请求比多次请求速度快。
发送数据
- XHR(适用大数据传送和不同的返回数据类型
- 信标(beacons)(适用极少的返回信息,上传
信标
let url = 'test.php'
let params = [
'step=2',
'time="1111112233'
]
let beacon = new Image()
beacon.src = url + '?' + params.join('&')
beacon.onload = function() {
if(this.width === 1) { // 假设图片宽度为1是成功
// ... 成功
} else if(this.width === 2) {
// ...失败重试
}
}
beacon.onerror = function() {
// 出错重试
}
服务器会接受到数据并保存下来,它无须向客户端发送任何消息,因此没有图片会实际显示出来。
性能消耗小,服务端的错误不会影响客户端。
Image对想的load事件可以监听返回的数据。比如告诉你服务器是否成功接受数据。
如果不需要返回信息,可以发送一个不带消息正文的204 No content 状态码。
缺点:能接受的响应类型有限。不能使用post上传。
数据格式
推荐: json,传输尺寸小,解析速度快。
数据传输技术因素:
- 功能集
- 兼容性
- 性能
- 方向(接受还是发送)
数据格式:考虑速度
- XML
- XPath
- json
- jsonp
- html
- 自定义
json的三种写法
- 标准
[
{
"id": 1,
"uname": 'a'
},
...
]
- 简化
[
{
"i": 1,
"u": 'a'
},
...
]
- 数组
[
[ 1, 'a' ],
...
]
可读性换取速度,所以有的框架依靠约定来获取速度,且以维护文档的形式来维护代码之间的映射关系。
JSON-P
最快是数组的jsonp
注意问题:不可存放敏感信息,可能被插入到任何网站。
自定义格式
使用字符串分隔符split(),它是最快的支持操作方式之一。
适用数据量非常大的情况,这种形式比json略快。通用文件尺寸更小。
性能
缓存数据
最快的ajax请求就是没有请求
- 服务端,设置http头信息以确保你的响应会被浏览器缓存
- 客户端,把获取到的信息存储到本地,从而避免再次请求。
设置http头信息
get请求
Expires 设置缓存过期时间。图片或者其他静态资源集
比本地数据存储更好。
实现容易,跨页面,跨会话
本地数据存储
把响应的文本保存到一个对象中,以url作为键值索引。
手工管理,移动设备
局限性
封装的ajax没有提供状态控制,比如3的情况来控制流。
使用原生的XHR并做兼容即可操作流。
总结:
- 减少请求数,合并js和css文件,使用MXHR
- 使用ajax获取次要文件
- 服务端处理错误
- 使用时机。