原付生活(3)
Ajax非対応ブラウザでもページ遷移なしにサーバからデータを取得する。
タイトル長いな。
新ページはAjax満載です。
で、「チームゴルゴ」という変な集団(笑)に
モニタをお願いしてました。
Mac使いのT氏より、いくつかのブラウザでの動作を確認していただいたところ、
やっぱり出た。
MacIE、Ajax完全非対応！
ということで、いろいろと対策を考えました。
備忘録。
------
if ( window.ActiveXObject ) {// for IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else if ( window.XMLHttpRequest ) {// for Firefox, Opera
xmlhttp = new XMLHttpRequest();
}
//(1)
if (xmlhttp) {
xmlhttp.onreadystatechange = OKだったときの関数;
xmlhttp.open('GET', '内部処理.php?パラメータ', true);
xmlhttp.send(null);
}
function OKだったときの関数() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("表示エリア名").innerHTML = xmlhttp.responseText;
}
}
まあ基本はこんな感じですわ。
最近ではMicrosoft.XMLHTTP2だの3だのってあるみたいですけどね。
で、Ajax非対応(=XMLHttpRequest非対応)のブラウザの場合、
(1)の時点で
xmlhttpには何も入らないわけです。
もうちょっと言うと、一番先頭で
xmlhttp=null
としておくと、(1)では
xmlhttp=null
のままなわけで、(1)すぐ下のif文は通らない、ということになります。
要は、Ajax非対応のブラウザ向けに
else
を追加すればいいだけの話。
------
呼び出し元のページは
<div id="表示エリア名">
<input type="button" onclick="上のJava Script()">
</div>
となっていて、
Ajax対応ブラウザの場合は、表示エリア内に
xmlhttp.responseTextが出力される、と。
じゃあAjax非対応(xmlhttp=null)ブラウザだったら？
OKだったときの関数へは行かないので、何も表示されない。
ということで、xmlhttp=nullの場合は、
そこに内部処理ページを埋め込んでしまえばよい、ということになるのです。
------
追加したスクリプト。
} else {
top.document.getElementById("表示エリア名").innerHTML = '<object type="text/html" data="内部処理.php?パラメータ" style="スタイル" standby="読み込み中..."></object>';
}
という感じ。
------
一応、Opera7.23での動作確認はしてみましたが、
動きとしてはAjaxと遜色ないと思います。
あとは内部処理ページでどこまでHTMLを組み込むか？
ってこともありますが。
(Ajaxで呼ばれても、OBJECTタグ埋め込みで呼ばれても、
動きが変わらないようにうまいこと作りこむ必要があるってことです)
------
でも、どちらにしろ、
ブラウザのJavaScriptがOFFになっていたら
もちろん動作しません。
その対応は別途必要です。
ちなみに、追加したスクリプトの
document.…の前の「top」は
内部処理.phpで生成されたHTMLから、さらに別パラメータなどで
表示エリアに内部処理.phpを再読み込みさせたい場合に必要です。
まあ「parent」でも動くとは思うけど。
新ページはAjax満載です。
で、「チームゴルゴ」という変な集団(笑)に
モニタをお願いしてました。
Mac使いのT氏より、いくつかのブラウザでの動作を確認していただいたところ、
やっぱり出た。
MacIE、Ajax完全非対応！
ということで、いろいろと対策を考えました。
備忘録。
------
if ( window.ActiveXObject ) {// for IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else if ( window.XMLHttpRequest ) {// for Firefox, Opera
xmlhttp = new XMLHttpRequest();
}
//(1)
if (xmlhttp) {
xmlhttp.onreadystatechange = OKだったときの関数;
xmlhttp.open('GET', '内部処理.php?パラメータ', true);
xmlhttp.send(null);
}
function OKだったときの関数() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("表示エリア名").innerHTML = xmlhttp.responseText;
}
}
まあ基本はこんな感じですわ。
最近ではMicrosoft.XMLHTTP2だの3だのってあるみたいですけどね。
で、Ajax非対応(=XMLHttpRequest非対応)のブラウザの場合、
(1)の時点で
xmlhttpには何も入らないわけです。
もうちょっと言うと、一番先頭で
xmlhttp=null
としておくと、(1)では
xmlhttp=null
のままなわけで、(1)すぐ下のif文は通らない、ということになります。
要は、Ajax非対応のブラウザ向けに
else
を追加すればいいだけの話。
------
呼び出し元のページは
<div id="表示エリア名">
<input type="button" onclick="上のJava Script()">
</div>
となっていて、
Ajax対応ブラウザの場合は、表示エリア内に
xmlhttp.responseTextが出力される、と。
じゃあAjax非対応(xmlhttp=null)ブラウザだったら？
OKだったときの関数へは行かないので、何も表示されない。
ということで、xmlhttp=nullの場合は、
そこに内部処理ページを埋め込んでしまえばよい、ということになるのです。
------
追加したスクリプト。
} else {
top.document.getElementById("表示エリア名").innerHTML = '<object type="text/html" data="内部処理.php?パラメータ" style="スタイル" standby="読み込み中..."></object>';
}
という感じ。
------
一応、Opera7.23での動作確認はしてみましたが、
動きとしてはAjaxと遜色ないと思います。
あとは内部処理ページでどこまでHTMLを組み込むか？
ってこともありますが。
(Ajaxで呼ばれても、OBJECTタグ埋め込みで呼ばれても、
動きが変わらないようにうまいこと作りこむ必要があるってことです)
------
でも、どちらにしろ、
ブラウザのJavaScriptがOFFになっていたら
もちろん動作しません。
その対応は別途必要です。
ちなみに、追加したスクリプトの
document.…の前の「top」は
内部処理.phpで生成されたHTMLから、さらに別パラメータなどで
表示エリアに内部処理.phpを再読み込みさせたい場合に必要です。
まあ「parent」でも動くとは思うけど。
[コメント読む(0)]
