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字段！

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