JSON/PHPでGET,POST

　ここまでは、サーバー側にあるファイルを受け取るリクエスト送信とレスポンス受信いうパターンでテストを行ってきました。

　しかし、Ajaxはクライアントからの送信も大事です。ここでは、XMLHttpRequestな方法でのGETとPOSTによるデータ交信をJSONを利用しつつ試してみましょう。

　サーバー側が PHP に変った以外は PerlでGET,POST とまったく同じです。

GETで送/受信

POSTで送/受信

GETで送/受信

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

[ ./test2.php ]
<?php

	//POSTとGETを取得
	$pos = $_POST['test'] ;
	$get = $_GET['test'] ;

	//charsetをut-8に
	mb_http_output ( 'UTF-8' );

	//出力
	echo "{ 'POST' : '$pos' , 'GET' : '$get' }";

?>

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

使用可能なブラウザ  
 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' , 'test2.php?test=あいうえお' ,true)"
	       value   = "sendData1( onloaded1 , '' , 'GET' , 'test2.php?test=あいうえお' ,true)">
<br>
<br>
	<!-- 出力用DIV -->
	<div id="out1"></div>

POSTで送/受信 1

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

[ ./test2.php ]
<?php

	//POSTとGETを取得
	$pos = $_POST['test'] ;
	$get = $_GET['test'] ;

	//charsetをut-8に
	mb_http_output ( 'UTF-8' );

	//出力
	echo "{ 'POST' : '$pos' , 'GET' : '$get' }";

?>

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

使用可能なブラウザ  
 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' , 'test2.php' ,true)"
	       value   = "sendData2( onloaded2 , '&test=あいうえお' , 'POST' , 'test2.php' ,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)

}