Hatena::ブログ(Diary)

sheherher

2012-03-22

$.ajax()がIEでうまく動かない

テキストフォームに入力したIDが既存のIDとだぶっていないかをチェックしようとしていまして。
今まではチェックボタンを都度押させていたのですが、他サービスと連携をして、こちらのサービスから登録をする際に他サービスのIDがだぶっていないかをチェックしようとしていました。
そのAPIはもう用意されているものの、JSONPでたたかないといけないのに返り値がJSON形式になっていないというもの。

jQueryajaxでチェックしようと思ったものの返り値がJSONではなくてparse errorになってしまうためphpをこちら側で用意して、サーバーサイドからたたくことにしました。

フォーム <-> js <-> php <-> 他サービス

↑こんなかんじ。

で、出来るようになったーと思ったらIEで動かない。
IE7,8,9全てで動かない。
(動かないというのはphpファイルに到達すらできておらず、エラーログアクセスログを見ても無反応)
これのおかげで、びっくりするほどつまりました。

この時点で、レスポンスヘッダに
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=utf-8");
はつけていました。


結論から言うと

$.ajax({
'type' : 'GET',
'url' : "test.php?" + parseInt((new Date)/1000),
'dataType' : 'json',
'data' : { "date": 1 },
'success' : function(data,state) {
alert("data");
},
error:function(data){
alert("error");
}
});

'url' : "test.php?" + parseInt((new Date)/1000),

これたしてみてという神様(先輩)からの助言をいただきまして。
う、う、う、うごいたーーーーーー!!(IE7,8,9)
飛び跳ねそうなぐらい嬉しかったです。

どうして
var dt = new Date();
var date = new DateFormat("yyyyMMddhhmmss");
param = "&" + date.format(dt);

こんなことまでしたときはだめだったの?と聞きましたところ
普通こういうキャッシュ系の時は ? にして、? 以下は apache が無視する、ってルールがあるね

とのことでした。ほーう。
IEでは、XMLHTTP通信(GET限定)を行ったときにキャッシュが発生するので注意です。
http://ja.wikipedia.org/wiki/UNIX%E6%99%82%E9%96%93
http://www.ajaxtower.jp/js/global_function/index1.html
http://labs.cybozu.co.jp/blog/kazuho/archives/2006/02/utilizing_cache.php


ここに至るまでの失敗

$.ajax({
'type' : 'GET',
'url' : "test.php",
'cache' : false,
'dataType' : 'json',
'data' : { "date":1 },
'success' : function(data,state) {
alert("data");
},
error:function(data){
alert("error");
}
});


'cache' : false

ググったら、ゴロゴロこれを足すと書いてるじゃないか。
通信がキャッシュしないように。


結果×


次は

$.ajax({
'type' : 'GET',
'url' : "test.php",
'cache' : false,
'dataType' : 'json',
'data' : { "date":1 },
beforeSend : function( xhr ){
xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
},
'success' : function(data,state) {
alert("data");
},
error:function(data){
alert("error");
}
});


beforeSend : function( xhr ){
xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
},

を足すとな。
XMLHttpRequest.send に先立ち If-Modified-Since を適切に設定することでリクエストをキャッシュさせずに発行することができます。
って書いてた。ここにhttp://d.hatena.ne.jp/hasegawayosuke/20090925/p1


結果×


次は

$.ajaxSetup({ cache: false });
$.ajax({
'type' : 'GET',
'url' : "test.php",
'dataType' : 'json',
'data' : { "date":1 },
'success' : function(data,state) {
alert("data");
},
error:function(data){
alert("error");
}
});

$.ajaxSetup({ cache: false });
をonload時とかに呼ぶと。http://www.mikage.to/jquery/jquery_basic.html


結果×


泣きそうになっていたら

渡すURLの後ろにはタイムスタンプを付与しないといけないみたい。

という記事を発見。http://taak.desperado.in/?eid=1075212


var dt = new Date();
var date = new DateFormat("yyyyMMddhhmmss");
param = "&" + date.format(dt);

$.ajaxSetup({ cache: false });
$.ajax({
'type' : 'GET',
'url' : "test.php&data=1?param",
'dataType' : 'json',
'success' : function(data,state) {
alert("data");
},
error:function(data){
alert("error");
}
});

もーこれは、いけるでしょう。
dataformat.jsまでダウンロードしたし...


結果×


この間にdatatypeとかdata変えてみたり、
content-type:"null"とかしてみたり、
'beforeSend': function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
こんなの足してみたり。

XDomainRequest を試してみる
http://tools.rightclicksright.net/data/frame_107843.aspx

↑これやってみたら?と先輩に言われたものの、ど、どこに何するのとなりまして
いろいろやってみたものの放置気味に...。

翌日出勤をして今まではヘッダーをFFlive HTTP headersで見ていたのですが
IEのヘッダー見ないとだめじゃない?と思いIElive HTTP headersを入れたところ
レスポンスのヘッダが

HTTP/1.0 304 Not Modified

あ、あれ...調べたらこの返り値は

クライアントが条件付き GET リクエストを実行し、アクセスは許可されたがその文書は更新されていなかった場合、サーバはこのステータスコードもって応答すべきである。 304 レスポンスはレスポンスボディを含んではならないので、いつもヘッダフィールドの後の最初の空行で終了する。
クライアントが条件付き GET を行った場合に、リソースが更新されていなければ、このステータスコードが返されます。 304 レスポンスでは、いかなるレスポンスボディも返してはいけません。

と書いていた。http://www.studyinghttp.net/status_code
や、やっぱりキャッシュなの。
あんなにいろいろやったのにまだキャッシュなの…?
他に方法あるの…?
そこで、私がjavascriptは社内一だと思っている先輩に相談。

http://mizoochi.com/archives/508.html
↑これは?でやってみた

$.ajaxSetup({ ifModified: true });
$.ajax({
'type' : 'GET',
'url' : "test.php",
'dataType' : 'json',
'data' : { "date":1 },
'success' : function(data,state) {
alert("data");
},
error:function(data){
alert("error");
}
});


結果×

以下はググったときに見たもの

http://itpro.nikkeibp.co.jp/article/COLUMN/20060530/239467/
http://www.kawa.net/works/ajax/tips/mimetype/content-type.html
http://d.hatena.ne.jp/bradtos/20090414/1239699263
http://msdn.microsoft.com/ja-jp/library/gg328025.aspx
http://www.netagent-blog.jp/archives/51509761.html

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/herher/20120322/1332416166