- ベストアンサー
Ajaxでのページングについてなのですが...
- 現在AjaxにてWebアプリを作成しております。Webサービスからデータを取得してブラウザに表示させることはできたのですが、ページングで悩んでおります。
- Ajaxといいますか、javascriptでのページングはどのようにすればよろしいのでしょうか？「Google」または、こちらの「教えて！goo」様のようなページングが理想なのですが、何卒ご指導よろしくお願いいたします。
- また、上記の25ページ分のデータを一度に取得して表示させることはできるのでしょうか？
- neohiro
- お礼率53% (16/30)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
Ajaxもformもa hrefもたいしてかわらないと思いますよ。 ただサーバーになんらかのファイルをリクエストしているだけじゃないでしょうかね。 同じことをすれば良いと思いますよ。 **index.html*** <script type="text/javascript"> <!-- //こいつをちょっと変更しました。 function getParam(url){ var o = new Object(); if(url.indexOf('?') != -1){ var param = url.split('?')[1].split('&'); for(var i = 0;i < param.length;i++){ var p = param[i].split('='); o[p[0]] = p[1]; } return o; }else{ return null; } } //oGET作成 oGET = getParam(window.location.href); //Ajaxでリクエストするパターン function AJAXSUBMIT(p){ //この例ではindex.htmlをクエリ列を付けてリクエストしているだけです。 fileName = "index.html?request=" + encodeURI(document.forms[0].elements[0].value) + "&page=" + p; //oGET作成今度の引数はfileName oGET = getParam(fileName); try{ xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ xmlReq = new XMLHttpRequest(); } xmlReq.onreadystatechange = function() { var msg = document.getElementById("result"); if(xmlReq.readyState == 4){ if(xmlReq.status == 200){ //msg.innerHTML = xmlReq.responseHTML; //alert(xmlReq.responseText) var $countRe = 1000; pager(oGET["page"],$countRe,'AJAX'); msg.innerHTML = "受信完了"; }else{ msg.innerHTML = "通信に失敗しました。"; } }else{ msg.innerHTML = "通信中…"; } } xmlReq.open("GET",fileName,true); xmlReq.send(null); } //フォームでリクエストするパターン function FORMSUBMIT(p){ document.forms[0].elements[1].value=p; document.forms[0].submit(); } window.onload=function(){ var $countRe = 1000; if(oGET){ pager(oGET["page"],$countRe,'FORM'); pager(oGET["page"],$countRe,'AJAX'); }else{ pager(1,$countRe,'FORM'); pager(1,$countRe,'AJAX'); } } function pager(id,countRe,DIV_id){ var id = eval(id) if(id == "") id=1; var maxPage = Math.ceil(countRe/10); if(maxPage==1 || maxPage<id) return false; if(id > 6){ var startPage = id-5; var startMore = "<a href='javascript:" + DIV_id + "SUBMIT(" + (startPage-1) + ")'>< PREV</a>"; }else{ var startPage=1; var startMore=""; } if(id+5 < maxPage){ var endPage = id+5; var endMore = " <a href='javascript:" + DIV_id + "SUBMIT(" + (endPage+1) + ")'>NEXT ></a>"; }else{ var endPage = maxPage; var endMore = ""; } var page_footer = ""; for(i = startPage;i <= endPage;i++){ page_footer += " " + ((id == i) ? "<span style='font-Size:120%'>" + i + "</span>" : "<a href='javascript:" + DIV_id + "SUBMIT(" + i + ")'>" + i + "</a>"); } page_footer = startMore + page_footer + endMore; document.getElementById(DIV_id).innerHTML = page_footer + "<br>"; } // --> </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> <!--Ajaxを使うリンクが書き込まれる--> <div>AJAX>><span id="AJAX"></span></div> <div id="result"></div> </body> </html> テスト環境 取りあえずwindows98＋ANHTTPD＋IE6
その他の回答 (3)
他の回答者さんのスクリプトを変更して回答することが良いのか悪いのか知りませんが取りあえず書いておきます。 *******問題があるなら削除依頼してください。*********** 私PHPの経験がありませんのでそのまま流用しjavascriptでも動くようにしました。 ご提示されたページの良回答PHP部分はほとんどいじってありません。 *******問題があるなら削除依頼してください。*********** <html> <head> <title>PHP>>JavaScript</title> <script type="text/javascript"> <!-- //$_GETオブジェクト作成 //クエリ列が無い場合の処理がありませんのでロード後一度フォームを送信してお試しください。 $_GET={}; url = window.location.href; if(url.indexOf('?') != -1){ var param = url.split('?')[1].split('&'); for(var i = 0;i < param.length;i++){ var p = param[i].split('='); $_GET[p[0]] = p[1]; } } //フォーム送信用関数 function SUBMIT(p){ document.forms[0].elements[2].value=p; document.forms[0].submit(); } window.onload=function(){ $countRe=30; $countRe=65; $countRe=100; $countRe=1000; pager($_GET["page"],$countRe); } function pager($id,$countRe){ $id = eval($id) if($id=="") $id=1; $maxPage=Math.ceil($countRe/10); if($maxPage==1||$maxPage<$id) return false; if($id>6){ $startPage=$id-5; $startMore = "<a href='javascript:SUBMIT(" + ($startPage-1) + ")'>< PREV</a>"; }else{ $startPage=1; $startMore=""; } if($id+5<$maxPage){ $endPage=$id+5; $endMore=" <a href='javascript:SUBMIT(" + ($endPage+1) + ")'>NEXT ></a>"; }else{ $endPage=$maxPage; $endMore=""; } $page_footer=""; for($i=$startPage;$i<=$endPage;$i++){ $page_footer+=" "+(($id==$i)?"<span style='font-Size:120%'>$i</span>":"<a href='javascript:SUBMIT("+$i+")'>$i</a>"); } $page_footer=$startMore+$page_footer+$endMore; document.body.innerHTML += $page_footer+"<br>"; } // --> </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>
補足
ご教授ありがとうございます。 まずご指導いただいた、スクリプトをそのままページにペーストしてみました。 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フレームワークで ページングが実装できるみたいです。 「インクリメンタルサーチ」、「ページング」のどちらも、全ページを取得すれば実現できそうなのです。 大変恐縮ではございますが、今一度ご教授お願いできないでしょうか？ よろしくお願いいたします。
>データ取得の際に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回連続でリクエストすれば良いと思います。 違うのかな。 ちょっと問題のポイントが見えてきませんのでけんとう違いの回答になっているかもしれません。
補足
ご指導ありがとうございます。 何分にもスキル不足のため、うまくいきません。（恥） 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」 <!--PHPで出力したXMLを読み込んでオブジェクトを生成。 --> <script language="JavaScript"> <!-- // ［送信］ボタンをクリック時の処理を定義 function send() { // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成 try { xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlReq = new XMLHttpRequest(); } // サーバーからの応答時の処理を定義（結果のページへの反映） xmlReq.onreadystatechange = function() { var msg = document.getElementById("result"); if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { msg.innerHTML = xmlReq.responseHTML; } else { msg.innerHTML = "通信に失敗しました。"; } } else { msg.innerHTML = "通信中…"; } } // サーバーとの通信を開始 xmlReq.open("GET","dennou.php?request=" + encodeURI(document.fm.request.value),true); xmlReq.send(null); } --> </script> <form name="fm" > <input name="request" type="text" /> <input type="button" value="送信" onClick="send()" /> <div id="result" /> </form> ---------------------------------------------------- このような状況でテストをしておりました。 現在は「××××.html」のサーチボックスから検索して１ページ分だけデータを取得している状態です。 ご教授していただいたスクリプト（PHPかな？）をjavascriptにおきかえようとしたのですが、力尽きました。 ご多忙とは存じますが、もしよろしければ上記のスクリプトを例に ご教授いただけたら幸いです。 よろしくお願いいたします。
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
補足
ご助言ありがとうございます。 > 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のように）に変換いたしました。
お礼
お手数をおかけ致しまして申し訳ございませんでした。 本当にスキル不足でご迷惑をおかけいたしました。 IE7でのリンクも表示でき、 alert(xmlReq.responseText) にてページが取得できていることを確認できました。 ご指導いただいたプログラムを参考に勉強させていただきます。 この度は、大変お世話になりました。
補足
お手数をおかけいたしております。 ご教授いただいたコードをそのまま使用させていただきました。 環境 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 受信完了 のように表示されました。 悲しいかな、なにがなんだか分からなくなってしまいました。 親身にご指導いただきありがとうございました。 先に書いた、全ページ表示のほうを勉強したいと思います。