JSON/PerlでGET,POST

　ここでは、サーバー側を Perl にして、XMLHttpRequestな方法でのGETとPOSTによるJSONフォーマットでのデータ交信を試します。サーバー側を Perl に変った以外は PHPでGET,POST とまったく同じです。

GETで送/受信

POSTで送/受信

GETで送/受信

GETで送信したデータを、受け取ります。

[ ./test3.cgi ]
#!/usr/bin/perl


	#POSTとGETを取得
	if ($ENV{'REQUEST_METHOD'} eq "POST") { 
		read(STDIN, $pos, $ENV{'CONTENT_LENGTH'}); 
	} else {
		$get = $ENV{'QUERY_STRING'};
	}
	
	#変数は1つだけなのでtest=以降を切り出す
	($dmy1, $pos) = split(/test=/, $pos);
	($dmy2, $get) = split(/test=/, $get);


	#出力
	print "Content-type: text/html;charset=utf-8\n\n"; 
	print "{ 'POST' : '$pos' , 'GET' : '$get' }";

このtest3.cgiとの間で、送受信を行います。

使用可能なブラウザ  
 Win   n7 f1 m1 e5 e6 o8,
 Mac   n7 f1 m1 s1 ,
 Linux n7 f1 m1 k3  
使えないブラウザ 
 Win   n4 e4 o7,
 Mac   n4 e4.5 e5,
 Linux n4 
 
<!-- 暫定ライブラリ jslb_ajax02.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "../../../lib/jslb_ajax02.js"></script>

<script language = "JavaScript">
<!--

	//起動
	function sendData1( callback , data , method , fileURL , async )
	{
		//出力
		outputMsg1( fileURL + "　を今送信します。<br><br>" )

		//送信データをエンコード
		var encfileURL = encodeURI( fileURL )
		//送信
		requestFile( callback , data , method , encfileURL , async )

		//出力
		outputMsg1( "ちなみにこんなエンコードで送出しました: <br>"+encfileURL + "<br><br>" )
	}
	
	
	//コールバック関数
	//	受信時に起動するスクリプト
	function onloaded1(oj)
	{

		//受信データをデコード
		var decdata = decodeURI( oj.responseText )

		//受信データをJavaScriptとして実行(JSON化)
		eval("var res =" + decdata )

		//出力
		outputMsg1( res.GET + "　を今受信しました。<br><br>" )

	}

	function outputMsg1(msg)
	{
		//出力
		document.getElementById('out1').innerHTML += msg
	}

//-->
</script>
<br>
	<input type    = "button"
	       onclick = "sendData1( onloaded1 , '' , 'GET' , 'test3.cgi?test=あいうえお' ,true)"
	       value   = "sendData1( onloaded1 , '' , 'GET' , 'test3.cgi?test=あいうえお' ,true)">
<br>
<br>
	<!-- 出力用DIV -->
	<div id="out1"></div>

POSTで送/受信 1

POSTで送信したデータを、受け取ります。

[ ./test3.cgi ]
#!/usr/bin/perl


	#POSTとGETを取得
	if ($ENV{'REQUEST_METHOD'} eq "POST") { 
		read(STDIN, $pos, $ENV{'CONTENT_LENGTH'}); 
	} else {
		$get = $ENV{'QUERY_STRING'};
	}
	
	#変数は1つだけなのでtest=以降を切り出す
	($dmy1, $pos) = split(/test=/, $pos);
	($dmy2, $get) = split(/test=/, $get);


	#出力
	print "Content-type: text/html;charset=utf-8\n\n"; 
	print "{ 'POST' : '$pos' , 'GET' : '$get' }";

このtest3.cgiとの間で、送受信を行います。

使用可能なブラウザ  
 Win   n7 f1 m1 e5 e6 o8,
 Mac   n7 f1 m1 s1 ,
 Linux n7 f1 m1 k3  
使えないブラウザ 
 Win   n4 e4 o7,
 Mac   n4 e4.5 e5,
 Linux n4 
 
<!-- 暫定ライブラリ jslb_ajax02.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "../../../lib/jslb_ajax02.js"></script>

<script language = "JavaScript">
<!--

	//起動
	function sendData2( callback , data , method , fileURL , async )
	{
		//出力
		outputMsg2( data + "　を今送信します。<br><br>" )

		//送信データをエンコード
		var encdata = encodeURI( data )
		//送信
		requestFile( callback , encdata , method , fileURL , async )

		//出力
		outputMsg2( "ちなみにこんなエンコードで送出しました: <br>"+encdata + "<br><br>" )
	}
	
	
	//コールバック関数
	//	受信時に起動するスクリプト
	function onloaded2(oj)
	{

		//受信データをデコード
		var decdata = decodeURI( oj.responseText )

		//受信データをJavaScriptとして実行(JSON化)
		eval("var res =" + decdata )

		//出力
		outputMsg2( res.POST + "　を今受信しました。<br><br>" )

	}

	function outputMsg2(msg)
	{
		//出力
		document.getElementById('out2').innerHTML += msg
	}

//-->
</script>
<br>
	<input type    = "button"
	       onclick = "sendData2( onloaded2 , '&test=あいうえお' , 'POST' , 'test3.cgi' ,true)"
	       value   = "sendData2( onloaded2 , '&test=あいうえお' , 'POST' , 'test3.cgi' ,true)">
<br>
<br>
	<!-- 出力用DIV -->
	<div id="out2"></div>

【暫定ライブラリ jslb_ajax02.js 】

//XMLHttpRequestオブジェクト生成
//createHttpRequest()
//
// @returns XMLHttpRequestオブジェクト またはnull
//
function createHttpRequest()
{
	if(window.ActiveXObject)
	{
		try 
		{
			return new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) 
		{
			try 
			{
				return new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch (e2) 
			{
				return null;
			}
		 }
	} 
	else if(window.XMLHttpRequest)
	{
		return new XMLHttpRequest();
	} 
	else 
	{
		return null;
	}
}

// requestFile( callback , data , method , fileURL , async )
//
// @param callback 受信時に起動する関数名
// @param data	 送信するデータ
// @param method "POST" or "GET"
// @param fileURLリクエストするファイルのURL
// @param async	Asyncならtrue Syncならfalse
// --@param user A username for authentication if necessary.
// --@param password A password for authentication if necessary.
// パスワード等はとりあえず省略
//
function requestFile( callback , data , method , fileURL , async )
{
	//XMLHttpRequestオブジェクト生成
	var oj = createHttpRequest()
	if( oj == null ) return null

	//ブラウザ判定-->別関数にした方がすっきりする？
	var ua = navigator.userAgent
	var safari	= ua.indexOf("Safari")!=-1
	var konqueror = ua.indexOf("Konqueror")!=-1
	var mozes	 = ((a=navigator.userAgent.split("Gecko/")[1] )?a.split(" ")[0]:0) >= 20011128 
	
	//Konquerorはonloadが不安定http://jsgt.org/ajax/ref/test/response/responsetext/try1.php
	if(window.opera || safari || mozes)
	{
	oj.onload = function () { callback(oj) }
	}
	else
	{
		oj.onreadystatechange =function () 
		{
			if ( oj.readyState == 4 )
			{
				callback(oj)
			}
		}
	}

	//open メソッド
	oj.open( method , fileURL , async )

	
	if(method == 'POST')
	{
		//このメソッドがWin Opera8でエラーになったので、とりあえず分岐2005.5.20
		if(!window.opera)
			oj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
	}

	//send メソッド
	oj.send(data)

}