Enctype/ application/x-www-form-urlencoded
test1.htmの調査でいくつか問題のあったAjax通信について、ここでは、送出時にJavaScriptのencodeURIComponent()でURIエンコードしてみてどうなるかを調べました。結果は、下記の通りで、URIエンコードされた文字列が送出されるのは確認できましたがNGなケースは改善されていません。次に、送出は、このtest2.htmのままで、サーバー側からの返信時にURIエンコードして送出してみますtest3.htm [ NG ]と書いてあっても、該当ケースの場合は単にうまくいかないというだけのことであって、ブラウザに責任があるというような話ではありません。
Ajax送信
<script>

//暫定版Ajax用ライブラリのミニ版
//http://jsgt.org/mt/archives/01/000409.html

	////
	// XMLHttpRequestオブジェクト生成
	//
	// @sample           oj = createHttpRequest()
	// @return           XMLHttpRequestオブジェクト
	//
	function createHttpRequest()
	{
		if(window.ActiveXObject){
			 //Win e4,e5,e6用
			try {
				return new ActiveXObject("Msxml2.XMLHTTP") ;
			} catch (e) {
				try {
					return new ActiveXObject("Microsoft.XMLHTTP") ;
				} catch (e2) {
					return null ;
	 			}
	 		}
		} else if(window.XMLHttpRequest){
			 //Win Mac Linux m1,f1,o8 Mac s1 Linux k3用
			return new XMLHttpRequest() ;
		} else {
			return null ;
		}
	}

	function sendRequest(data,method,url , encSwt)
	{
		//XMLHttpRequestオブジェクト生成
		var oj = createHttpRequest();
		
		oj.onreadystatechange =function () 
		{
			if ( oj.readyState == 4 ){
				alert(oj.responseText);
			}
		}

		//URLエンコード
		data = uriEncode(data)
		
		if(method.toUpperCase() == 'GET') {
			url += "?"+data
		}
		
		//open メソッド
		oj.open(method,url);

		//ヘッダapplication/x-www-form-urlencodedセット
		if(encSwt == 1)setEncHeader(oj)

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


	function uriEncode(data){
	
		//URLエンコード
		//if(method == 'GET') {
			if(data!=""){
				//&と=で一旦分解しencode
				var encdata = '';
				var datas = data.split('&');
				//
				for(i=1;i<datas.length;i++)
				{
					var dataq = datas[i].split('=');
					encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
				}
				//url=url + encdata;
			}
			
			return encdata;
		//}
	}


	function setEncHeader(oj){
	
		//ヘッダapplication/x-www-form-urlencodedセット
		// @see  http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.13.3
		// @see  #h-17.3
		//   ( enctype のデフォルト値は "application/x-www-form-urlencoded")
		//   h-17.3により、POST/GET問わず設定
		//   POSTで"multipart/form-data"を指定する必要がある場合はカスタマイズしてください。
		//
		//  このメソッドがWin Opera8.0でエラーになったので分岐(8.01はOK)
		var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';
		if(!window.opera){
			oj.setRequestHeader('Content-Type',contentTypeUrlenc);
		} else {
			if((typeof oj.setRequestHeader) == 'function')
				oj.setRequestHeader('Content-Type',contentTypeUrlenc);
		}	
		return oj
	}

</script>

GETでAjax送信、setRequestHeader()でのenctype属性指定なし
送信ojmethodform要素のenctype属性setRequestHeaderでのContent-Type指定URIエンコード
XMLHttpRequest GET 属性省略 なし encodeURIComponent()
WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされませんが、データはサーバーへ届き文字化けしません。
[ NG ]Mac Safari1.25は、リクエストヘッダにセットされ、データはサーバーへ届きますが、文字化けします。
WinIEの送出パケットを見たら、URIエンコードはされています。
<form name    = "test4">
  <input type  = "text" 
         name  = "test"
         value = "------テスト------">
  <input type  = "button"
         onclick ="
           sendRequest("&test="+this.form.test.value,
                       'get',
                       'http://jsgt.org/ajax/ref/test/enctype/header2.php')"
         value = "送信">
</form>

POSTでAjax送信、setRequestHeader()でのenctype属性指定なし
送信ojmethodform要素のenctype属性setRequestHeaderでのContent-Type指定URIエンコード
XMLHttpRequest POST 属性省略 なし encodeURIComponent()
[ NG ]WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされず、データはサーバーへ届いていません。
[ NG ]Mac Safari1.25は、リクエストヘッダにセットされ、データはサーバーへ届きますが、文字化けします。
WinIEの送出パケットを見たら、URIエンコードはされています(データがサーバーへ届いていないように見えたのは、サーバーで処理できていないだけの可能性大)。
<form name    = "test5">
  <input type  = "text" 
         name  = "test"
         value = "------テスト------">
  <input type  = "button"
         onclick ="
           sendRequest('&test='+this.form.test.value,
                       'post',
                       'http://jsgt.org/ajax/ref/test/enctype/header2.php')"
         value = "送信">
</form>

POSTでAjax送信、setRequestHeader()でのenctype属性指定なし。フォームのenctype属性で指定してみる。
送信ojmethodform要素のenctype属性setRequestHeaderでのContent-Type指定URIエンコード
XMLHttpRequest POST application/x-www-form-urlencoded なし encodeURIComponent()
[ NG ]WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされず、データはサーバーへ届いていません。
[ NG ]Mac Safari1.25は、リクエストヘッダにセットされ、データはサーバーへ届きますが、文字化けします。
WinIEの送出パケットを見たら、URIエンコードはされています(データがサーバーへ届いていないように見えたのは、サーバーで処理できていないだけの可能性大)。
<formform  enctype = "application/x-www-form-urlencoded"
       name    = "test6">
  <input type  = "text" 
         name  = "test"
         value = "------テスト------">
  <input type  = "button"
         onclick ="
           sendRequest('&test='+this.form.test.value,
                       'post',
                       'http://jsgt.org/ajax/ref/test/enctype/header2.php')"
         value = "送信">
</form>

POSTでAjax送信、setRequestHeader()でのenctype属性指定あり
送信ojmethodform要素のenctype属性setRequestHeaderでのContent-Type指定URIエンコード
XMLHttpRequest POST 属性省略 application/x-www-form-urlencoded encodeURIComponent()
WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされ、データはサーバーへ届き文字化けしません。
[ NG ]Mac Safari1.25は、リクエストヘッダにセットされ、データはサーバーへ届きますが、文字化けします。
WinIEの送出パケットを見たら、URIエンコードはされています。
<form name    = "test7">
  <input type  = "text" 
         name  = "test"
         value = "------テスト------">
  <input type  = "button"
         onclick ="
           sendRequest('&test='+this.form.test.value,
                       'post',
                       'http://jsgt.org/ajax/ref/test/enctype/header2.php',1)"
         value = "送信">
</form>


	

【作業用掲示板】