更新于

Ajax

发布于 / 分类: javascript高性能 / 仅有1条评论 / 阅读量: 1077

异步监听readyState == 3

当readyState的值等于3时,此时服务器正在与浏览器传输数据,这个时候其实是可以进行获取到responseText值得,但是这个值并不完整,只有当readyState == 4时,值才是完整的。

但是如果我们需要获取的内容是极其长的字符,那么就可以通过监听这个状态,然后轮询的方式,可以在内容没有全部下载来之前就可以提前更新内容了,这样就可以避免在下载的过程中产生的等待时间。

var req = new XMLHttpRequest();
var getLastInterval =null,
    lastLength = 0;
req.open('GET','xxx.php',true);
req.onreadystatechange = readStateHandler;
req.send(null);

function readStateHandler() {
    if(red.readyStare == 3 && getLastInterval == null) {
        getLastInterval = setInterval(function(){
            getLastePacket();
        },15)
    }
    if(red.readyStare == 4) {
        clearInterval(getLastInterval);
        getLastePacket();
    }
}

function getLastePacket() {
    var length = req.responseText.length;
    var packet = req.responseText.substring(lastLength,length);
     callback(packet);
     lastLength = length;
}

当readyState等于3的时候,创建一个定时器,15ms调用一次getLastePacket函数,这个函数每次运行先得到当前req.responseText.length的字符长度,然后通过string的substring方法截取这段内容,然后下次运行的时候又从上一次的最后一个位置开始,然后回调函数callback,将packet字符串传入,这个回调函数还要根据你传入的值做判断,毕竟你需要判断目前的字符最后一项是否完整,如果不完整可以创建一个全局变量来保存,下次再续上。

通过这个方法可以在较大的内容时减少等待时间,增加用户体验。

multipart XHR

说白了就是通过php将多个地址合并成一个字符串返回给浏览器,浏览器通过js将返回的字符串解析成需要的值。

比如php返回三个img图片的地址,通过;分号连接。

if(req.readyState == 4) {
  splitImage(req.responsText);
}


function splitImage(text) {
  var imgelement = null,
      imgdata = text.split(';');
  for(var i =0,len = imgdata.length;i<len;i++){
      imgelement = document.createElement('img');
      imgelement.src = imgdata[i];
      document.getElementsByTagName('body')[0].appendChild(imgelement);
      
  }
}

以此类推,我们还可以增加更多的值,比如添加css地址,js文件,通过用不同的字符分隔,就可以判断到不同值,然后对应的获取。

发送数据

通过ajax发送数据其实有点奢侈,但是ajax支持pos方式发送,但是如果只是单方面的发送,且数据不会太大就可以使用get方式,但是ie对get方式的请求是有字符限制的,也就是说url的字符不能超过2048个字符,为此我要可以根据实际的使用情况使用对应的方法。

发送数据我们甚至可以使用动态插入script的方式,更深层的讲,我们是通过元素的src属性进行发送的。

这里暂时先不讲src的方式,这里完善一下ajax的方式

事实上我们还要考虑如果发送错误的话怎么处理,这里就要使用到error事件。

req.onerror = functuon() {
    //发生错误,我们在这个函数了再次调用封装的ajax函数,重新再运行一次,也就是递归
}

我们甚至可以使用setTimeout来增加延时机制,如果获取的数据是要等一段时间才能获取到,然后再发送给服务器,那么就可以onerror事件里面使用setTimeout。

get的方式会比post的方式发送更快,get只有一个数据包,而post至少会有两个,一个是头信息,一个是post数据。

Beacons

上面讲到发送数据使用的是src的属性,那么我们就可以通过图片的src属性来发送我们的数据,但是这个也有一点小问题,就是他会等待服务器返回信息,我们可以通过返回一个204 No Content状态码来阻止客户端继续等待返回的消息正文。

使用Beacons其实也是有限制的,他不能发送post请求,且url的长度是有限制的。

var url = 'xxx.php';
var parms = ['id=1','time=12578'];
var beacons = new Image();
beacons .src = url + '?' + parms.join('&');

beacons.onload = function() {
  //通过服务器返回一个图片,如果宽度是1表示成功,宽度为2表示错误
  if(beacons.width == 1) {
  
  }else if(beacons.width == 2) {
    
  }
}

beacons.onerror = function() {
  //如果发生错误,递归一次
}

数据的格式

XML的格式是以前比较通过的格式,但是太过于冗长,其内容书写和html类似,下面是一个标准的格式:

<?xml version="1.0" encoding='utf-8'>
<users total='2'>
  <user id="1">
    <username>alice</username>
    <realname>Alice Smith</realname>
    <email>alice@xxx.com</email>
  </user>
   <user id="2">
    <username>alice2</username>
    <realname>Alice Smith2</realname>
    <email>alice2@xxx.com</email>
  </user>
</users>

这种格式其实实质性的内容不多,为此并不是一种很好的方式,为此可以优化一下

<?xml version="1.0" encoding='utf-8'>
<users total='2'>
  <user id="1" username="alice" realname="Alice Smith" email="alice@xxx.com"/>
   <user id="2" username="alice2" realname="Alice Smith2" email="alice2@xxx.com"/>
</users>

通过属性值得方式可以将大量重复性的标签丢弃,从而减少文件的大小,并且js也可以更简便的获取内容。

JSON

json的格式相对于xml他更倾向于数据简化,因为json你不必要像xml那样写大量的标签,json他就是一个高度集中的数据格式。

那么json的优化,最简单的就是减少书写的内容,比如name的键名改为n,单个字符,或者直接省略,通过数组的方式直接保存内容,这种方式虽然对阅读不友好,但是只要按照一样的规定去写,就可以极大的提高json文件的解析和下载速度。

自定义格式

json虽然很好,但是如果文件内容庞大的话,还是有其他的优化方式,比如自定义的格式,我们可以在一个js文件里面保存一个对象,这个对象保存着自定义的string内容,然后内容之间通过字符分隔,比如不同的内容用:分号隔开,同一个分组的值多个的话用:冒号隔开,然后ajax获取或者动态script获取,由于是一个js文件,所以他没有json的解析步骤,这里就快于json了。

然后通过js的split()方法拆成分组,然后再针对每个组值再次详细拆分获取到需要的内容,最后保存在一个数组内并返回。

事实上split的速度是极快,在大量文本内容上快于json的parse。

缓存

ajax的get方式发出的请求才能被浏览器缓存,但这还不够,服务器还需要发送Expires 过期时间来控制缓存存在多久。

为此我们可以通过创建一个对象来保存获取到的信息,这种方式适用于同一个页面需要请求多次相同的内容。

仅有一条评论

    爸爸
    爸爸

    来自 Windows10-Chrome 的网友发布于 350 天前

    测试

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买