清原研修/9 http://www.ark-web.jp/sandbox/wiki/455.html

目次 †

掲示板をAjaxにする †

サーバー側で次のようにPHPを組んでおく †

モード1: GETパラメータにpageというパラメータがない場合

処理: 1. 最初のページの記事をBoardClass2から受け取りboard2.tplを使って描画する

モード2: GETパラメータにpageというパラメータがある場合

処理: 1. 与えられたpageパラメータのページのコメントをBoardClass2から受け取る
      2. あたらしくcomments.tplというテンプレートを用意しそれを使って、受け取ったコメントを表示する

ページ上の「次へ」をクリックするとAjaxを使って次のページを表示するようにする †

• ページが読み込まれたら、「次へ」のリンクのonclickイベントに次のようなハンドラ関数をセットする
  • bard2.php?page=次のページへXMLHTTPRequestを使ってアクセス
  • 結果を受け取り、その結果で、記事一覧及びページング部分を差し替える。

プログラム †

var ReWrite = function(){
    window.onload = this.OnLoadWindow;
}
ReWrite.prototype ={
    OnLoadWindow: function(){
        var tag = document.getElementsByTagName('a');
        var ulr = document.links[0].search;
        tag[0].onclick = function() {func.MakeRequest('board.php'+ulr);return false;};
    },
    MakeRequest: function(url){
       var http_request = false;
       if(window.XMLHttpRequest){
            http_request = new XMLHttpRequest();
        }else if(window.ActiveXObject){
           try {
               http_request = new ActiveXObject("Msxml2.XMLHTTP");
           }catch(e){
               try{
                   http_request = new ActiveXobject("Microsoft.XMLHTTP");
               } catch(e){
               }
           }
       }
       if (!http_request){
           alert('Cannot create XMLHTPP instance');
           return false;
       }
       http_request.onreadystatechange =  function(){func.ViewContent(http_request);};
       http_request.open('GET',url,true);
       http_request.send(null);
    },
    ViewContent: function(http_request){
        if (http_request.readyState == 4){
            if(http_request.status == 200){
                 var doc = http_request.responseText;
                 document.getElementById('result').innerHTML = doc;
            }else{
                alert('NG');
            }
        }
    }
}
var func = new ReWrite();

人材募集

→詳しくはこちらのエントリで!!

Menu

• システム勉強会
• オープンソース・ライセンスなツールなど
• Plaggerでみんなのブックマークをアグリゲート

Tag

Google Friend Connect

最新の20件

ARK-Webビジネスブログの最新記事