ウィリアムのいたずらの開発日記

ウィリアムのいたずらが、コンピューター関係について、思ったことを好き勝手に書いているブログです。

AJAXでXMLHttpRequestのopenをPOST、sendに内容を送っても送信できない時

2006-07-13 15:19:43 | JavaとWeb

AJAXのやりかたのまとめを、
ここ
http://www.geocities.jp/xmldtp/index_ajax.htm

に書いていますが、きょうは、「1.HTTPを使った通信」の
「POSTの場合」について。


■概要
POSTはGetの場合に対して、以下の2点が違うことは、
すぐに、想像できると思います。

1.生成したXMLHttpRequestのメソッドopenで、
    GETと送っていたところをPOSTにする
2.生成したXMLHttpRequestを使って、sendするとき
    ""だったところに、内容をおくる。

でも、これで実験すると、送信できないときがありました。




そのとき、こうしたら、うまくいきました

3.openしたあと、生成したXMLHttpRequestを使って、
httpObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
(ここで、httpObjが、生成したオブジェクト)
というのを書く。

。。。くわしいことは、聞かんでくれ(^^;)
とにかく、いまくいったぞ。

それと、
4.送信内容(sendする内容)、
 日本語のため、encodeURIComponentっていうのをつかいました。

以下、サンプルの仕様と内容が書いてあります。



■仕様

 このページを読み込むとき、
 引数 : ver   値  : test
 引数 : key   値  : ハローワールド

 というのに、設定し、ローカルにあるpostout.phpを呼び出し、帰ってきた値を
 alertで表示する。

 postout.phpは、POSTで受け取った引数と値について
   引数名=値<BR>
 の形で、受け取った引数分表示する。

 つまり、結果として、警告ダイアログに
   ver=test<BR>
   key=ハローワールド<BR>
 と表示される

なお、postout.phpのソースは、以下のとおり
<?
	foreach($_POST as $key => $value)
	{
    		print "$key = $value <BR>¥n";
	}
?>

(上記ソース中の < > ¥ は、本当は半角、UTF-8で保存)



■ソース
以下のとおり
<?xml version="1.0">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>POST実験</title>
<script language="javascript" type="text/javascript">

//************************ここから********************//

//--------------------------------------//
//	共通変数			   //
//--------------------------------------//
var	httpObj;
var	timer;		//	タイムアウト用


//*==============================================//
//*	関数:Load()			  *//
//	内容:読み取り開始		           *//
//*==============================================//
function Load()
{
	//	データ書き出し
	//	書き出し文字はUTF-8を想定しています
	msg = "ver=test&key=" + encodeURIComponent("ハローワールド");
	httpRequest("http://127.0.0.1/postout.php","POST",msg);


}

//*==============================================//
//*	関数:httpRequest()		  *//
//	内容:XML読み取り開始		  *//
//*==============================================//
function httpRequest(target_url,hosiki,msg)
{
	try
	{
	      	if(window.XMLHttpRequest)
		{
			httpObj = new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			httpObj = new ActiveXObject("Microsoft.XMLHTTP");
		}
		else
		{
			alert('エラーです');
			return;
		}
	}
	catch(e)
	{
		alert('エラーです');
		return;
	}

	//	タイマーセット
	timer = setInterval("timeoutError()",60000); //60秒にセット

	//	データを取得する
	httpObj.open(hosiki, target_url, true);
	httpObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
	httpObj.onreadystatechange = DataRead;
	httpObj.send(msg);

	return;
}

//*==============================================//
//*	関数:timeoutError()		  *//
//	内容:タイムアウト			  *//
//*==============================================//
function timeoutError()
{
	clearInterval(timer);	//	タイマーとめる
	httpObj.abort();
	alert('タイムアウトです');
}

//*==============================================//
//*	関数:DataRead()			  *//
//	内容:XML読み取ったあと		  *//
//*==============================================//
function DataRead()
{
        if ( httpObj.readyState == 4 )
	{
		clearInterval(timer);	//	タイマーとめる
		if ( httpObj.status == 200)
		{
			DataOut();
		}
       	}
}

//*==============================================//
//*	関数:DataOut()			  *//
//	内容:書き出し			  *//
//*==============================================//
function DataOut()
{
			//	返り値をテキストで取得
	xtext = httpObj.responseText;
	alert(xtext);

}

//************************ここまで********************//
</script>
</head>
<body bgcolor="#ffffff"  onload="Load()">
返り値を、警告ボックスでだしてるよ!
</body>
</html>

(上記ソース中の < > ¥ は、本当は半角、UTF-8で保存)



■説明
 httpRequestの関数の中が、今回の話の中心です。
 Getの場合と違い、方式(POSTかGETか)と送る内容(msg)を引数で渡すことにしました。
 
 それ以外は、概要で示したとおり、
1.httpObj.openに方式を渡すようにして(このhosikiは"POST"が設定されている)
2.httpObj.sendで送信内容をおくり
3.openのあとにhttpObj.setRequestHeaderを設定しています。

 また、このhttpRequestをよびだすとき、Load関数の中でメッセージをセットしますが
 そこで、 

  引数名1=値1&引数名2=値2&・・・

 の形で、送信内容を設定しています。
 なお、&は、最後の引数には、いりません(なので、引数が1個なら&はいりません)。
 また、値が日本語の場合、encodeURIComponentで変換しています。


 ということで、POSTのはなしは、ここまで


ジャンル:
ウェブログ
この記事についてブログを書く
この記事をはてなブックマークに追加
« ipodケータイ、ソフトバンクとの... | トップ | スカパー社長 「携帯で番組視聴... »
最近の画像もっと見る

あわせて読む