2

私は基本的に、人気のある書籍サイトで div のコンテンツを遅延ロードしようとしています。
私がこれまでに行ったことは次のとおりです。

  1. simple_html_dom.php パーサーを使用して必要なコンテンツをスクレイピングし、php ファイルに表示します
  2. simpleXmlを使用して、スクレイピングされたデータ（タイトル、著者、画像）を保存するためのxmlファイルを作成しました（また、htmlページに表示してコンテンツをテストしました）

xml ツリーの生成

<?php
include_once('simple_html_dom.php');
$target_url = "http://www.amazon.in/gp/bestsellers/books/1318209031/ref=zg_bs_nav_b_2_1318203031";
$html = new simple_html_dom();
$html->load_file($target_url);

$xml = "<BOOKLIST>";
foreach($html->find('div[class=zg_itemWrapper]') as $post)
{
 $xml .= "<BOOK>";
 foreach($post->find('div[class=zg_itemImageImmersion] img') as $image)
 $xml .= "<IMAGE>".$image->src."</IMAGE>";
  foreach($post->find('div[class=zg_title] a') as $title)
  {
   $xml .= "<TITLE>".$title->href."</TITLE>";
   $xml .= "<TITLENAME>".$title->innertext."</TITLENAME>";
  }
 foreach($post->find('div[class=zg_byline]') as $author)
 $xml .= "<AUTHOR>".$author->plaintext."</AUTHOR>";

/*  I don't know why but the parser doesn't seem to generate 'price' tag
foreach($post->find('strong[class=price]') as $price)
 $xml .= "<price>".$price->text."</price>";
*/
 $xml .= "</BOOK>";
}
$xml .= "</BOOKLIST>";
$sxe = new SimpleXMLElement($xml);
$sxe->asXML("test.xml");
?>

simpleXml を使用して xml ツリーの内容を表示する html ファイルは次のとおりです。

<html>
<body>
<script>
 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","test.xml",true);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML;

document.write("<div class='container' id='result'>");
var x=xmlDoc.getElementsByTagName("BOOK");
for (i=0;i<x.length;i++)
{
 document.write("<div class='span3' id='lazy'>");
 document.write("<div class='span2'>");
 document.write("<img src="+x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue+"></img>");
 document.write("</div>");
 document.write("<div class='span2'>");
 document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
 document.write("</div>");
 document.write("<div class='span3' style='padding:0;margin-left:20px;height:auto'>");
 document.write("<a href="+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+">"+x[i].getElementsByTagName("TITLENAME")[0].childNodes[0].nodeValue+"</a>");
 document.write("</div>");
 document.write("</div>");
}
document.write("</div>");
</script>
</body>

<script>
function reloadq()
{
 var position = $("#lazy").offset().top;      
 var scllwidth = $(window).scrollTop() + $(window).height();
 if ( scllwidth > position)
 {
   alert( "Time to Load Content! Ajax request goes here" );
 }
}
$(window).scroll( function() { reloadq() } )
</script>
</html>

このページをスクロールすると、アラート (後で ajax を配置するための jquery スクリプト内) が機能します。
私が助けを必要としている部分は、遅延読み込みのために ajax を使用して xml ファイルからコンテンツを読み込む方法です。
解決策、またはどこが間違っているかアドバイスをお願いします。ありがとうございました ：）

4

1 に答える 1