通过AJAX加载文件的一部分的最快方法?

时间:2013-11-04 07:52:50

标签: javascript ajax file load

我在文本文件中有很多书。

我在网站上列出了该书的索引。

理论是:从包含整本书的文本文件中加载该索引的部分书。

书的索引(例如我们有3个索引):

<ul>
   <li><a onClick="return LoadThis('a1')">INDEX-1</a><div id="loader1" ></div></li>
   <li><a onClick="return LoadThis('a2')">INDEX-2</a><div id="loader2" ></div></li>
   <li><a onClick="return LoadThis('a3')">INDEX-3</a><div id="loader3" ></div></li>
</ul>

JavaScript代码:

var loadUrl = "http://www.website.com/books/the-book.php";

function LoadThis(link_anchor)
{
var loader="#loader"+link_anchor.substring(1);
$(loader).html(ajax_load).load(loadUrl+" #"+link_anchor);

$(loader).addClass('ajax-active');
}

The-Book.PHP文件

<div id="a1"><p>Index-1 texts...</p></div>
<div id="a2"><p>Index-2 texts ....</p></div>
<div id="a3"><p>Index-3 texts ....</p></div>

问题: 负载通常都不错!和他们的负荷工作良好。但...

如果索引的数量和The-Book.php的文件大小越来越大,则加载速度比小书慢。

问题: 我的AJAX LOAD编程方法是一种标准方法吗?

有没有更好,更标准,更快的方法来做到这一点?

请帮助我。

1 个答案:

答案 0 :(得分:3)

使用.load()本身并不是一种不好的做法,但在你的情况下它并不是很理想。

当您使用.load()获取页面并指定选择器以标识要插入的部分时,您可能会认为它只会下载该部分文件。由于jQuery无法知道文件中选择器的位置(或者它是否位于多个位置),因此即使您只想要它的第一个(或最后一个)部分,也必须下载整个文件。

因此,如果你有一本大书(比如几百千字节)并且你的书没有适当的缓存,你需要多次下载大量数据来填充页面上的所有部分。

如果您真的想要进行部分加载,那么您需要在硬盘上创建单独的文件并每次为每个部分加载正确的文件,或者您可以让您的php文件过滤结果并仅返回请求的部分

如果您想使用php进行过滤,那么您可以查看How do you parse and process HTML/XML in PHP?以获取有关解析html / xml的更多信息。