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

現在AjaxにてWebアプリを作成しております。

Webサービスからデータを取得して
ブラウザに表示させることはできたのですが、
ページングで悩んでおります。

Webサービスで返ってくるデータは１ページ１０件です。
検索フォームからある商品を検索して、返ってきたXMLタグにトータル件数、ページ数があります。

<TotalResults>249</TotalResults>　//トータル件数
<TotalPages>25</TotalPages> //ページ数

データ取得の際にpageというパラメーターにページ番号を渡してやれば、
表示できることは分かるのですが、この先に進めません。（恥）

Ajaxといいますか、javascriptでのページングはどのようにすればよろしいのでしょうか？

「Google」または、こちらの「教えて！goo」様のようなページングが理想なのですが、
何卒ご指導よろしくお願いいたします。


「追記」
また、上記の25ページ分のデータを一度に取得して表示させることはできるのでしょうか？

No.1 回答者： noname#30818 回答日時： 2007/04/29 20:32

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/i …

この回答への補足

ご助言ありがとうございます。

> 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のように）に変換いたしました。

補足日時：2007/04/29 22:58

No.2 回答者： noname#30818 回答日時： 2007/04/30 07:20

>データ取得の際に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におきかえようとしたのですが、力尽きました。
ご多忙とは存じますが、もしよろしければ上記のスクリプトを例に
ご教授いただけたら幸いです。
よろしくお願いいたします。

補足日時：2007/04/30 17:34

No.3 回答者： noname#30818 回答日時： 2007/05/01 11:20

他の回答者さんのスクリプトを変更して回答することが良いのか悪いのか知りませんが取りあえず書いておきます。

*******問題があるなら削除依頼してください。***********
私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) + ")'>&lt; PREV</a>";
}else{
$startPage=1;
$startMore="";
}

if($id+5<$maxPage){
$endPage=$id+5;
$endMore=" <a href='javascript:SUBMIT(" + ($endPage+1) + ")'>NEXT &gt;</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.h …
こちらのように表示されました。

本当にスキルがなくて情けなくて申し訳ないのですが、
この素晴らしいスクリプトをどう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フレームワークで
ページングが実装できるみたいです。
「インクリメンタルサーチ」、「ページング」のどちらも、全ページを取得すれば実現できそうなのです。

大変恐縮ではございますが、今一度ご教授お願いできないでしょうか？
よろしくお願いいたします。

補足日時：2007/05/01 17:01

No.4 ベストアンサー 回答者： noname#30818 回答日時： 2007/05/01 19:54

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) + ")'>&lt; 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 &gt;</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

この回答への補足

お手数をおかけいたしております。

ご教授いただいたコードをそのまま使用させていただきました。

環境
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
受信完了
のように表示されました。
悲しいかな、なにがなんだか分からなくなってしまいました。
親身にご指導いただきありがとうございました。

先に書いた、全ページ表示のほうを勉強したいと思います。

補足日時：2007/05/02 00:57

この回答へのお礼

お手数をおかけ致しまして申し訳ございませんでした。
本当にスキル不足でご迷惑をおかけいたしました。

IE7でのリンクも表示でき、
alert(xmlReq.responseText)
にてページが取得できていることを確認できました。

ご指導いただいたプログラムを参考に勉強させていただきます。
この度は、大変お世話になりました。

お礼日時：2007/05/03 05:56