Ajaxによる、ブラウザ側からのデータ送出方法は、
test2.htmのままで、サーバー側からの返信時にURIエンコードして送出してみます。したがって、受信時に、decodeURIComponent(oj.responseText)します。
結果は、WinIE、Opera8.02、Firefox1.02は、変わりませんが、Mac Safari1.25全ケースがOKになりました。両者の違いは、ブラウザ側からのデータ送出時に、Safariだけは、リクエストヘッダにapplication/x-www-form-urlencodedが自動で付加されることです。
結論は、Ajax通信時には、oj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8')を明示的にセットし、サーバー側からの返信時にURIエンコードなどして送出して、受信時に、decodeURIComponent(oj.responseText)すると、POST、GET問わずに文字化けしなくて幸せかも。
この際、返信時URIエンコードは、Safari(とKHTML)だけ行うというのでもOKで、setRequestHeaderはSafariは無くても良いと。あと、注意したいのは、Opera8.01以前では、setRequestHeaderがエラーになるので分岐が必要。
[ 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(decodeURIComponent(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属性指定なし
| 送信oj | method | form要素のenctype属性 | setRequestHeaderでのContent-Type指定 | URIエンコード |
| XMLHttpRequest |
GET |
属性省略 |
なし |
encodeURIComponent() |
WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされませんが、データはサーバーへ届き文字化けしません。
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/header3.php')"
value = "送信">
</form>
POSTでAjax送信、setRequestHeader()でのenctype属性指定なし
| 送信oj | method | form要素のenctype属性 | setRequestHeaderでのContent-Type指定 | URIエンコード |
| XMLHttpRequest |
POST |
属性省略 |
なし |
encodeURIComponent() |
[ NG ]WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされず、データはサーバーへ届いていません。
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/header3.php')"
value = "送信">
</form>
POSTでAjax送信、setRequestHeader()でのenctype属性指定なし。フォームのenctype属性で指定してみる。
| 送信oj | method | form要素のenctype属性 | setRequestHeaderでのContent-Type指定 | URIエンコード |
| XMLHttpRequest |
POST |
application/x-www-form-urlencoded |
なし |
encodeURIComponent() |
[ NG ]WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされず、データはサーバーへ届いていません。
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/header3.php')"
value = "送信">
</form>
POSTでAjax送信、setRequestHeader()でのenctype属性指定あり
| 送信oj | method | form要素のenctype属性 | setRequestHeaderでのContent-Type指定 | URIエンコード |
| XMLHttpRequest |
POST |
属性省略 |
application/x-www-form-urlencoded |
encodeURIComponent() |
WinIE、Opera8.02、Firefox1.02は、リクエストヘッダにセットされ、データはサーバーへ届き文字化けしません。
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/header3.php',1)"
value = "送信">
</form>