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

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