2013年1月26日土曜日

[jQuery]Ajaxでサーバーのプログラム実行

test0.html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">
    <title>Ajax Test 0</title>
<script language="JavaScript">
<!--
// [実行]ボタンをクリック時の処理
function req(scriptName) {
  // 非同期通信を行うための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.responseText;
      } else {
        msg.innerHTML = "通信に失敗しました。";
      }
    } else {
      msg.innerHTML = "通信中…";
    }
  }

  // サーバーとの通信を開始
  xmlReq.open("GET", scriptName, true);
  xmlReq.send(null);
}
//-->
</script>
  </head>
<body>
  <form name="test">
    <input type="button" value="実行" onclick='req("test0.pl")'/>
    <input type="button" value="失敗" onclick='req("dummy.pl")'/><br>
    <div id="result"/>
  </form>
</body>
</html>
test0.pl
#!/usr/bin/perl
# -*- coding: utf-8 -*-
use strict;
use utf8;

sleep(3); # 少し待たせる

my $times = time();
my ($sec, $min, $hour, $mday, $month, $year, $wday, $stime) = localtime($times);
$year = $year + 1900;
$month++;
my $currentTime = $year . "/" . $month . "/" . $mday . " " . $hour . ":" . $min . ":" . $sec;

print "Content-Type: text/xml\n\n";
print '' . $currentTime . '';

# print $currentTime . "\n";

0 件のコメント:

コメントを投稿