zoukankan      html  css  js  c++  java
  • AJAX分段下载/读取HTML内容(有效节省带宽加快运行速度)

    AJAX分段下载/读取HTML内容(有效节省带宽加快运行速度)

            本来以为自己已经算是对AJAX技术了如指掌了,因为从3年前就一直用XMLHttpRequest对象做一些无刷新页面的处理工作,但是,直道今天在工作中遇到了一个分段读取内容的问题,我才了解到,自己原来还需要补充。

             基本的问题是这样的:
             我需要设计一个框架,需要承载500万以上用户访问(公司毕竟是中国用户最多的互联网企业)。我们用了大量的静态化技术,为了应对可能出现的高负载,我们 还是用了一些公司内自主研发的高性能静态WEB服务器。由于页面是静态生成的,我们遇到一个问题,就是如何在某一时刻更新了某个静态文件后,在前台进行 AJAX的加载。起初对这个问题想得比较简单,认为只要加载然后赋值并显示即可,但是在以前血的教训下(当加载的内容非常大,IE浏览器渲染显示的时候会 非常慢,给用户明显的跳动刷新的感觉。),我们决定对于文件进行分段加载,这样做不但解决了一次加载过大文件的问题,同时也为服务器省下了一些处理时间和 资源,尽可能快地结束HTTP请求。

             解决方案:
             我拿到这个问题,在设计的过程中首先考虑的是,分段请求应该就是类似于FlashGet之流,进行分段请求而已,只需要构造自己的HTTPRequest 请求的Headers就能够达到目的,因为对HTTP协议还算是比较熟悉,所以我的分析应该是没错,如果是在.net中,我会毫不犹豫地利用 WebHttpRequest()进行请求的封装,通过设置Range字段来实现上述的功能,但是,问题是在静态页面的JS里面利用 XMLHttpRequest来实现,就有一定的难度了,毕竟从来没有接触过。查阅了大量的资料后发现,在XMLHttpRequest里面确实可以设置 SetHeader(),最终决定使用Prototype.js里面现成的封装来实现,具体实现如下——

    <script language="javascript">
                       //alert($("Shadow").innerHTML);
                       var myarray = new Array();
               myarray.push("Range");
               myarray.push("bytes=0-");
               myarray.push("Pragma");
               myarray.push("no-cache");
               myarray.push("Cache-Control");
               myarray.push("no-cache");
               alert(myarray[1].toString());                
                       function myAJAX(){
                       new Ajax.Request('replace.php', {
                         method:'get',
                         requestHeaders:myarray,
                         onSuccess: function(transport){
                           var json = transport.responseText;//.evalJSON();
                           alert(json);//.a);
                           //var data = '{ "name": "Violet", "occupation": "character" }'.evalJSON();
                           //alert(data.name);
                         }
                       });

                       }
                    
                    
               </script>

    为了测试,我使用Array.push()方法建立数组,没有直接初始化数组,一段儿测试代码大家将就看看,我说一下比较重要的几点:

             1、Prototype里面RequestHeaders是一个数组,作为参数的内容必须是个数组;
             2、Prototype里面这个参数是可选得;
             3、Prototype里调用Ajax.Request()的时候加参数的方法和其他参数一样——“requestHeaders:myarray,”参数用逗号分割。
             4、Prototype里设置分段的方法如下——
    Range头域可以请求实体的一个或者多个子范围。例如,
    表示头500个字节:bytes=0-499
    表示第二个500字节:bytes=500-999
    表示最后500个字节:bytes=-500
    表示500字节以后的范围:bytes=500-
    第一个和最后一个字节:bytes=0-0,-1
    同时指定几个范围:bytes=500-600,601-999

    GEThttp://download.microtool.de:80/somedata.exe
    Host:download.microtool.de
    Accept:*/*
    Pragma:no-cache
    Cache-Control:no-cache
    Referer:http://download.microtool.de/
    User-Agent:Mozilla/4.04[en](Win95;I;Nav)
    Range:bytes=554554-

    以上是一个测试的头,注意Range字段!

    前段时间跳槽了,所以很久没来写文章,现在压力很大啊,感觉这么大个项目自己要亲自去设计,还是蛮有压力的,只能努力工作、祝自己好运了!在工作中如果发现什么觉得有价值的技巧,我会在这里跟大家进行分享。

  • 相关阅读:
    (八)CXF之用spring添加拦截器
    (七)CXF之与spring整合发布web服务
    (六)CXF之自定义拦截器
    借鉴mini2440的usb-wifi工具集在Beagleboard上移植无线网卡
    ubuntu设置网络
    mysql优化学习
    java日期转化
    Navicat使用
    (转载)windows下mysql忘记密码
    java读取文件乱码
  • 原文地址:https://www.cnblogs.com/niuniu502/p/2184434.html
Copyright © 2011-2022 走看看