Ajaxでのページングについてなのですが...

2023/10/14 14:38

このQ&Aのポイント

現在AjaxにてWebアプリを作成しております。Webサービスからデータを取得してブラウザに表示させることはできたのですが、ページングで悩んでおります。
Ajaxといいますか、javascriptでのページングはどのようにすればよろしいのでしょうか？「Google」または、こちらの「教えて！goo」様のようなページングが理想なのですが、何卒ご指導よろしくお願いいたします。
また、上記の25ページ分のデータを一度に取得して表示させることはできるのでしょうか？

ベストアンサー

Ajaxでのページングについてなのですが...

2007/04/29 18:13

現在AjaxにてWebアプリを作成しております。 Webサービスからデータを取得してブラウザに表示させることはできたのですが、ページングで悩んでおります。 Webサービスで返ってくるデータは１ページ１０件です。検索フォームからある商品を検索して、返ってきたXMLタグにトータル件数、ページ数があります。 <TotalResults>249</TotalResults>　//トータル件数 <TotalPages>25</TotalPages> //ページ数データ取得の際にpageというパラメーターにページ番号を渡してやれば、表示できることは分かるのですが、この先に進めません。（恥） Ajaxといいますか、javascriptでのページングはどのようにすればよろしいのでしょうか？「Google」または、こちらの「教えて！goo」様のようなページングが理想なのですが、何卒ご指導よろしくお願いいたします。「追記」また、上記の25ページ分のデータを一度に取得して表示させることはできるのでしょうか？

neohiro
お礼率53% (16/30)

JavaScript
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#30818

2007/05/01 19:54 回答No.4

Ajaxもformもa hrefもたいしてかわらないと思いますよ。ただサーバーになんらかのファイルをリクエストしているだけじゃないでしょうかね。同じことをすれば良いと思いますよ。 **index.html*** <script type="text/javascript">  </script> </head> <body>  <div>FORM>><span id="FORM"></span><div> <form action="" method="GET"> <input type="text" value="aaa" name="request"> <input type="hidden" value="1" name="page"> <input type="submit" value="submit"> </form>  <div>AJAX>><span id="AJAX"></span></div> <div id="result"></div> </body> </html> テスト環境取りあえずwindows98＋ANHTTPD＋IE6

質問者

お礼 2007/05/03 05:56

お手数をおかけ致しまして申し訳ございませんでした。本当にスキル不足でご迷惑をおかけいたしました。 IE7でのリンクも表示でき、 alert(xmlReq.responseText) にてページが取得できていることを確認できました。ご指導いただいたプログラムを参考に勉強させていただきます。この度は、大変お世話になりました。

質問者

補足 2007/05/02 00:57

お手数をおかけいたしております。ご教授いただいたコードをそのまま使用させていただきました。環境 XP IE7 Firefox2 ソースを何もいじらずに挙動を確認しようとしたのですが、 IE7ですと、 FORM>> AJAX>> のようにリンクは、表示されないのですが、 Firefox2だと、 FORM>> 1 2 3 4 5 6 NEXT > AJAX>> 1 2 3 4 5 6 NEXT > のように表示されます。挙動といたしましては、IE7の方が正しいような気もするのですが...？まず、 ******************************************** //Ajaxでリクエストするパターン function AJAXSUBMIT(p){ //この例ではindex.htmlをクエリ列を付けてリクエストしているだけです。 fileName = "index.html?request=" + encodeURI(document.forms[0].elements[0].value) + "&page=" + p; //oGET作成今度の引数はfileName oGET = getParam(fileName); ******************************************** の「fileName」の箇所を中継PHPのファイル名に変更しました。 Ajax通信なので、 ******************************************** <form action="" method="GET"> <input type="text" value="aaa" name="request"> <input type="hidden" value="1" name="page"> <input type="submit" value="submit"> </form> ******************************************** を ******************************************** <form> <input type="text" value="aaa" name="request"> <input type="hidden" value="1" name="page"> <input type="button" onClick="AJAXSUBMIT()" value="submit"> </form> ******************************************** 検索語句を入力しましたところIE7ではブラウザ上の表示は変わらず、ステータスバーに「ページでエラーが発生しました。」とでてしまいました。 Firefox2の場合は、ボタンクリック後、 FORM>> 1 2 3 4 5 6 NEXT > AJAX>> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 受信完了のように表示されました。悲しいかな、なにがなんだか分からなくなってしまいました。親身にご指導いただきありがとうございました。先に書いた、全ページ表示のほうを勉強したいと思います。

その他の回答 (3)

noname#30818

2007/05/01 11:20 回答No.3

他の回答者さんのスクリプトを変更して回答することが良いのか悪いのか知りませんが取りあえず書いておきます。 *******問題があるなら削除依頼してください。*********** 私PHPの経験がありませんのでそのまま流用しjavascriptでも動くようにしました。ご提示されたページの良回答PHP部分はほとんどいじってありません。 *******問題があるなら削除依頼してください。*********** <html> <head> <title>PHP>>JavaScript</title> <script type="text/javascript">  </script> </head> <body> <div id="TotalPages">25</div> <form action="" method="GET"> <input type="text" value="aaa" name="aaa"> <input type="text" value="vvv" name="vvv"> <input type="text" value="1" name="page"> <input type="submit" value="submit"> </form> </body> </html>

質問者

補足 2007/05/01 17:01

ご教授ありがとうございます。まずご指導いただいた、スクリプトをそのままページにペーストしてみました。 http://www.do-kuchikomi.net/Ajax/sample_search.html こちらのように表示されました。本当にスキルがなくて情けなくて申し訳ないのですが、この素晴らしいスクリプトをどうAjaxに組み込むかが理解できません。 <form action="" method="GET"> のactionに中継PHPのアドレスを入れてみたりしたのですが、的外れのようですし... <input type="text" value="aaa" name="aaa"> <input type="text" value="vvv" name="vvv"> のvalueとnameをPHPでの処理時のパラメーターに置き換えたりしたのですが、これも... > 25ページ分のデータを一度に取得したいならパラメーターを変えて25回連続でリクエストすれば良いと思います。こちらは、for構文 (ループ命令)」などを使って表示させるのでしょうか？ Ajaxにて「インクリメンタルサーチ」を実現しようとしておりますので、１ページにすべて表示させたいのが、本命です。大変あつかましいのですが、検索にかかった全ページ分のデータを表示させるロジックをご教授しただけたら幸いです。また、このページ分の全データを表示できれば、Ajaxフレームワークでページングが実装できるみたいです。「インクリメンタルサーチ」、「ページング」のどちらも、全ページを取得すれば実現できそうなのです。大変恐縮ではございますが、今一度ご教授お願いできないでしょうか？よろしくお願いいたします。

noname#30818

2007/04/30 07:20 回答No.2

>データ取得の際にpageというパラメーターにページ番号を渡してやれば、表示できることは分かるのですが >上記の25ページ分のデータを一度に取得して表示させることはできるのでしょうか？ってことは大雑把にかいてこう言う流れ？ onloadはonreadystatechangeかも知れませんがイメージです。 function aa(p){ o = new XMLHttpRequest(); o.onload = function(p){ x=o.responseXML; } o.open("GET","***.***?page="+p,true);＜＜ここですね。 o.send(null); } ファイルを***.***?page="+pのようにリクエストしているなら現在のページ(p)は解るわけでそれならばそれをコールバックに渡せば良いのでは？ o.onload = function(p){ x=o.responseXML; $countRe=x.getElementsByTagName('TotalPages')[0].childNodes[0].nodeValue pager(p,$countRe); } 後は、http://oshiete1.goo.ne.jp/kotaeru.php3?q=2110551のpager()をちょっと変更すれば良いと思います。例えば ceil($countRe/10);-->Math.ceil($countRe/10); $PHP_SELF?id=".($startPage -1).-->javascript:aa($startPage -1) print $page_footer-->何処か適当な場所.innerHTML = $page_footer などなど 25ページ分のデータを一度に取得したいならパラメーターを変えて25回連続でリクエストすれば良いと思います。違うのかな。ちょっと問題のポイントが見えてきませんのでけんとう違いの回答になっているかもしれません。

質問者

補足 2007/04/30 17:34

ご指導ありがとうございます。何分にもスキル不足のため、うまくいきません。（恥） Ajaxの構成ですが、 ---------------------------------------------------- 「○○○○.php //Webサービス取得のためのスクリプト」 <?php // 出力/内部文字コードをUTF-8に設定 mb_http_output('UTF-8'); mb_internal_encoding('UTF-8'); header('Content-Type: text/xml;charset=UTF-8'); $url ='http://hogehoge.com/get_tag.php?'; $url.=urlencode(mb_convert_encoding($_GET['request'],'UTF-8','auto')) .'&'.'page=1'; print(file_get_contents($url)); ?> ---------------------------------------------------- ---------------------------------------------------- 「××××.html」  <script language="JavaScript">  </script> <form name="fm" > <input name="request" type="text" /> <input type="button" value="送信" onClick="send()" /> <div id="result" /> </form> ---------------------------------------------------- このような状況でテストをしておりました。現在は「××××.html」のサーチボックスから検索して１ページ分だけデータを取得している状態です。ご教授していただいたスクリプト（PHPかな？）をjavascriptにおきかえようとしたのですが、力尽きました。ご多忙とは存じますが、もしよろしければ上記のスクリプトを例にご教授いただけたら幸いです。よろしくお願いいたします。

noname#30818

2007/04/29 20:32 回答No.1

o= new XMLHttpRequest(); o = new ActiveXObject("Msxml2.XMLHTTP"); o = new ActiveXObject("Microsoft.XMLHTTP"); のどれかとして、 o.responseXMLが <?xml version="1.0" encoding="utf-8" ?> . . . <TotalResults>249</TotalResults> <TotalPages>25</TotalPages> . . . ならば o.responseXML.getElementsByTagName('TotalResults')[0].childNodes[0].nodeValue が249で o.responseXML.getElementsByTagName('TotalPages')[0].childNodes[0].nodeValue が25じゃないの？ http://www.openspc2.org/JavaScript/Ajax/Excel2/index.html

質問者

補足 2007/04/29 22:58

ご助言ありがとうございます。 > o.responseXML.getElementsByTagName('TotalResults')[0].childNodes[0].nodeValue が249で o.responseXML.getElementsByTagName('TotalPages')[0].childNodes[0].nodeValue が25じゃないの？各XMLのタグデータは表示させることができております。説明不足で申し訳ございません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2110551 こちらのような、ページングをAjax（Webサービスを読み込み）で実装したいのです。 Ajax（javascript）では、どのようにプログラム（ロジック？）を組んだらよろしいのでしょうか？それから質問投稿時と内容が変わってしまいますが、「jkl-parsexml.js」にて、XMLをJavaScriptオブジェクト（JSONのように）に変換いたしました。

Ajaxでのページングについてなのですが...

Ajaxでのページングについてなのですが...