JavaScript -> AJAX

AJAXでの非同期表示ページ作成方法

サンプルコード

基本的な処理の流れは以下の通り。

・初期ページ index.html を表示すると、
  body onLoad に指定している javascript関数 LoadWebPage()が実行される
・LoadWebPage()では、http通信用オブジェクトを作成し table.cgiページを実行する
・table.cgi ページでの print は xmlhttp.responseText に返される
・xmlhttp.responseTextの内容を <div id='tbl'>にセットする。
・ページを更新する場合は 更新ボタンを作成しクリック時のアクションとして
  初期ロードと同様の LoadWebPate() を実行するようにしておく。

ページ本文 (index.html)

<div class=border><pre>
<html>
<head>
  <script type="text/javascript" src="./load.js"></script>
  <script type="text/javascript" src="./httpreq.js"></script>
</head>
  <body onLoad="LoadWebPage('tbl')">
  <button onClick="LoadWebPage('tbl')">更新</button><br />
  <div id='tbl'>ここにロードした内容が表示される</div>
</body>
</html>

ページロード時に実行する (load.js)

function LoadWebPage(id) {
  oHtml = document.getElementById(id);
  xmlhttp = XMLHttpRequest();
  if (xmlhttp) {
      xmlhttp.onreadystatechange = function(){
      try {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            実行ページ table.cgi のデータを DIV へセットする
            oHtml.innerHTML = xmlhttp.responseText;
         }
      }catch(e){}
  }
  xmlhttp.open("GET", "./table.cgi", true);
  xmlhttp.send(null);
}
}

ページロード時に実行する (load.js) *prototype.js使用版

   prototype.jsを使用した場合以下のコードとなる。http通信用オブジェクトも必要ない
function LoadWebPage(id) {
	oHtmlId = id;
	requestData = "./test.cgi";
	new Ajax.Request(requestData,{
		"method":"get",
		"parameters":"",
		onComplete: function(request){
			$(oHtmlId).innerHTML = request.responseText;
		},
		onFailure: function(request){
			$(oHtmlId).innerHTML += "Loading失敗";
		},
		ononException: function(request){
			$(oHtmlId).innerHTML += "Loading失敗";
		}
	});
}

http通信用オブジェクト (httpreq.js)


AJAXを使用する際の固定コード

function XMLHttpRequest()
{
  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;
            }
       }
  }
  return XMLhttpObject;
}

LoadWebPage()から実行する(table.cgi)


このページで表示(print)した内容はxmlhttp.responseTextにセットされる

#!/usr/bin/perl
use strict;
use CGI;
$oCGI = new CGI;

  AJAXで同じページを要求する場合キャッシュを無効にしておかないと
  更新されないので以下のヘッダオプションを指定しておく
print $oCGI->header(-Type =>'text/html',
                    -charset=>'shift_jis',
                    -Pragma =>'no-cache',
                    -Cache_Control =>'no-store',
                    -Expires =>'now',);


print << "EOF";
  <table>
  <tr>
  <th>番号</th><th>データ</th>
  </tr>
  <tr>
EOF

for(my $i=0;$i<@row;$i++){
    print "<td>$i</td><td>$_</td>";
}
print "</tr></table>";



      Document-Folder          一覧
HP-UX
HULFT
JAVA
JP1
JavaScript
Linux
MAC
PHP
Perl
Python
Ruby
SOA
Solaris
Unix全般
Windows
XML
エクセル
スタイルシート
セキュリティー
データベース
ネットワーク
パソコン
ブラウザ
プログラム構文
仮想化
          RSS-Folder
ニュース
   アットマーク・アイティ(@IT)
   シンクイット(ThinkIT)
   インターネットコム
   インターネットウォッチ
   日経IT-Pro
   日経パソコン
   CNET Japan
   ZD-NetJapan
   MYCOM
   RBB-Today
ベンダー
   日本IBM
   日本HP
   サンマイクロシステムズ
   NEC
   富士通
   日立
ソフトウェア
   マイクロソフト
   トレンドマイクロ
   オラクル
   サイボウズ
   Mozilla
   野村総合研究所
   (その他ソフトウェア企業)
更新履歴 一覧
 07/08 PERF
プログラム構文
 07/07 PERF
プログラム構文
 06/25 オブジェクトプログラミング2
Perl>サンプル
 07/12 クローン作成
仮想化>vCenter
 07/12 vyatta設定
ネットワーク>vyatta
 07/12 vyattaインストール
ネットワーク>vyatta
 07/12 リポジトリサーバ
Linux>サーバ構築
 07/05 VMwareのインストール
仮想化>VMware
 07/05 PXEブート
仮想化>KVM
 07/01 DHCPでのPXEブート
仮想化>KVM
 06/27 qcow2仮想DISK作成
仮想化>KVM
 06/13 NWの設定
仮想化>VMwareEsxi
 06/13 IPアドレスの変更
仮想化>VMwareEsxi
 06/12 自動ssh
Unix全般>シェル>Bash
 06/12 diffプログラミング
Python
Google