AjaxでYahoo検索を二通り作る

| コメント(0) | トラックバック(0)

Google Maps では画面遷移のないシームレスな画像読み込みが行われます。
それにはAjaxと言われる最新技術が使われています。

Ajaxを使わないとシームレスな通信が不可能かと言われるとそうではありません。
今まではフレームを使ってシームレスな通信を行っていました。
実際に体験してもらった方が早いと思いますので以下のページをご覧ください。
Yahoo!検索 画面遷移無し(非同期通信) - フレームバージョン

このフレーム通信には、test2_1.html(親フレーム)、test2_1_sub.html(下フレーム)、test2_1_dummy.html(上フレーム(通信受信用、見えないフレーム))、test2_1.php(Web通信用)が使われています。
test2_1.html

<HTML><HEAD>

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<TITLE>Yahoo!検索 画面遷移無し(非同期通信) - フレームバージョン</TITLE>

</HEAD>

<FRAMESET rows="0,*" frameborder="0" border="0" framespacing="0">

<FRAME src="test2_1_dummy.html" scrolling="NO" noresize marginwidth="0" marginheight="0" frameborder="0" name="up">

<FRAME src="test2_1_sub.html" frameborder="0" name="main">

<NOFRAMES>

<BODY>フレームが使用できないブラウザでは実行できません</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

rows="0,*"として見えないフレームを作る必要があります。
test2_1_sub.html
<HTML>

<BODY>

<SCRIPT language="JavaScript">

<!--

function get_data(){

  parent.up.location.href = "test2_1.php?key="+document.fo.yahoo.value;

}



function set_data(html){

  document.all("html_div").innerHTML = html;

}

//-->

</SCRIPT>

<FORM name="fo">Yahoo!検索<BR><INPUT size="20" type="text" name="yahoo"><INPUT type="button" value="検索" onclick="get_data();"></FORM>

<HR>

<DIV id="html_div"></DIV>

</BODY>

</HTML>

ここでget_data()は通信開始関数、set_data()は通信受信関数です。
parent.up.location.href =とすることで、見えない「上フレーム」を指定ページに移動させています。(ここでは検索用phpを起動します。)

Yahooの通信はWebページを簡単に取得できるPHPが使われています。
test2_1.php

<?php

$key = $_GET['key'];

$get_html_dat = file("http://search.yahoo.co.jp/search?p=$key");

$all_html_dat = "";

for($i=0;$i<count($get_html_dat);$i++){

  if(!eregi("<li><div>",$get_html_dat[$i])){continue;}

  $get_html_dat[$i] = ereg_replace('"', "", $get_html_dat[$i]);

  $all_html_dat .= rtrim($get_html_dat[$i]);

}



echo "<HTML><BODY><SCRIPT>parent.main.set_data(\"$all_html_dat\");</SCRIPT></BODY></HTML>";



?>


PHPは、$get_html_dat = file(・・・);のたった一行で$get_html_datに配列としてWebページを取得できます。($get_html_dat[0]は一行目、$get_html_dat[1]には二行目・・と格納されています。)
また、結果を表示する際に、取得したデータをそのまま表示するのではなく、<li><div>がある行のみを表示し、存在しない行は飛ばします。
ereg_replace('"', "", $get_html_dat[$i]);では、JavaScriptエラーの原因となるダブルクォーテーション(")を変換しています。
最後にparent.main.set_data(\"$all_html_dat\");で、test2_1_sub.htmlのset_data()関数を引数(検索結果データ)込みで実行します。
そうすると画面に表示されるというわけです。

ちなみにtest2_1_dummy.htmlは何も書く必要はありません。(ダミーファイルです。)

さて、このようにフレームを用いた場合、ほとんどのブラウザで動作するという利点(携帯のフルブラウザでも可能です。たとえばこちら)がありますがデメリットとして、多くのファイルを用意する必要があり、煩わしいものとなっています。

そこでAjaxを使ってみましょう。サンプルを見てみるとわかりますが、動作はフレーム版とほぼ同じです。
Yahoo!検索 画面遷移無し(非同期通信) - Ajaxバージョン

この方法だと、test2_2.html(メインファイル、通信受信兼)、test2_2.php(Web通信用)と、とても少ないファイルで通信できます。
ちなみにAjax共通関数に関してはこちらを参照しました。

さて、内容を見ていきましょう。
test2_2.html

<HTML>

<BODY>

<SCRIPT language="JavaScript">

<!--

function get_data(){

  httpObj = createXMLHttpRequest(set_data);

  if(httpObj){

    httpObj.open("GET","test2_2.php?key="+document.fo.yahoo.value,true);

    httpObj.send(null);

  }

}



function set_data(){

  if((httpObj.readyState == 4) && (httpObj.status == 200)){

    html = httpObj.responseText;

    document.all("html_div").innerHTML = html;

  }

}



// HTTP通信用、共通関数

function createXMLHttpRequest(cbFunc){

  var XMLhttpObject = null;

  try{

    XMLhttpObject = new XMLHttpRequest();

  }catch(e){

    try{

      XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");

    }catch(e){

      try{

        XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");

      }catch(e){

        return null;

      }

    }

  }

  if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;

  return XMLhttpObject;

}

//-->

</SCRIPT>

<FORM name="fo">Yahoo!検索<BR><INPUT size="20" type="text" name="yahoo"><INPUT type="button" value="検索" onclick="get_data();"></FORM>

<HR>

<DIV id="html_div"></DIV>

</BODY>

</HTML>

createXMLHttpRequest(・・・);のカッコ内に受信後に実行される関数名を記述します。ここではset_dataを実行するようにしています。
httpObj.responseTextには受信データが入っています。後はtest2_1_sub.htmlとあまり変わりません。

test2_2.php

<?php

$key = $_GET['key'];

$get_html_dat = file("http://search.yahoo.co.jp/search?p=$key");

$all_html_dat = "";

for($i=0;$i<count($get_html_dat);$i++){

  if(!eregi("<li><div>",$get_html_dat[$i])){continue;}

  $get_html_dat[$i] = mb_convert_encoding($get_html_dat[$i],"UTF-8","auto");

  $all_html_dat .= $get_html_dat[$i];

}

echo $all_html_dat;

?>

mb_convert_encoding($get_html_dat[$i],"UTF-8","auto");
で、文字コードをUTF-8に変換します。そうしないと文字化けします。
今回はダブルクォーテーションを変換したり、最後の出力を<SCRIPT></SCRIPT>で囲む必要はありません。

このように二通り試しましたが、あなたならどちらを使いますか?

トラックバック(0)

トラックバックURL: http://blog.gpso.info/mt_mgr/mt-tb.cgi/16

コメントする

このブログ記事について

このページは、nnnが2006年8月 8日 04:44に書いたブログ記事です。

ひとつ前のブログ記事は「機種毎にメインページを振り分ける」です。

次のブログ記事は「情報提供を宜しくお願いいたします」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。