ホームページメンテナンス画面にAjaxを導入。
簡単に。
本家The Sunday Breezeのトップ画面、最新情報などは
専用のメンテナンスページから更新しています。
その専用メンテナンス画面にAjaxを使ってみた。
最新情報の中に、馬名もしくはレース名を入れるときに、
馬名だったら、その馬の詳細情報へ
レース名だったら、そのレースの出走馬情報へ
とリンクをはることが目的。
リンクアドレスに、馬なら馬ID、レースならレースIDを使用しているので、
馬名を入れたら馬IDを、レース名を入れたらレースIDをサーバから取得する、というもの。
まず、
<textarea name="topic"></textarea>
<input type="button" value="馬名" onclick="javascript:h_name=prompt('馬名',''); getIndex_h();">
とすると、テキストエリアの下に「馬名」というボタンができます。
ボタンを押すと、ちっちゃいボックスが出てきて、
馬名の入力を促されます。
馬名を入れて、「OK」ボタンを押すと、getIndex_h()というJavaScriptの関数に飛ぶわけですね。
function getIndex_h() {
if ( window.ActiveXObject ) { // for IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else if ( window.XMLHttpRequest ) { // for Firefox, Opera
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp) {
xmlhttp.onreadystatechange = check_h;
xmlhttp.open('GET', '馬ID取得.php?馬名=' + h_name, true);
xmlhttp.send(null);
}
}
function check_h() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.topics.topic.value+='<a href="リンク先' + xmlhttp.responseText + ')">' + h_name + '</a>';
}
}
getIndex_hの中で、馬IDを取得するPHPを呼んでいます。馬名を引数として。
戻り値(xmlhttp.responseText)には馬IDが入るようになってます。
あとは、テキストエリアの最後尾にリンクテキストを追記する、という感じ。
レース名についても同様の手法で簡単にできます。
どちらもID取得.PHPに日本語で引数を渡していますが、
文字コードには注意。うまく動かないことがあります。
Ajaxはそれほど大変なものではないです。
多少のWebの知識があれば、簡単にできます。
本家The Sunday Breezeのトップ画面、最新情報などは
専用のメンテナンスページから更新しています。
その専用メンテナンス画面にAjaxを使ってみた。
最新情報の中に、馬名もしくはレース名を入れるときに、
馬名だったら、その馬の詳細情報へ
レース名だったら、そのレースの出走馬情報へ
とリンクをはることが目的。
リンクアドレスに、馬なら馬ID、レースならレースIDを使用しているので、
馬名を入れたら馬IDを、レース名を入れたらレースIDをサーバから取得する、というもの。
まず、
<textarea name="topic"></textarea>
<input type="button" value="馬名" onclick="javascript:h_name=prompt('馬名',''); getIndex_h();">
とすると、テキストエリアの下に「馬名」というボタンができます。
ボタンを押すと、ちっちゃいボックスが出てきて、
馬名の入力を促されます。
馬名を入れて、「OK」ボタンを押すと、getIndex_h()というJavaScriptの関数に飛ぶわけですね。
function getIndex_h() {
if ( window.ActiveXObject ) { // for IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else if ( window.XMLHttpRequest ) { // for Firefox, Opera
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp) {
xmlhttp.onreadystatechange = check_h;
xmlhttp.open('GET', '馬ID取得.php?馬名=' + h_name, true);
xmlhttp.send(null);
}
}
function check_h() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.topics.topic.value+='<a href="リンク先' + xmlhttp.responseText + ')">' + h_name + '</a>';
}
}
getIndex_hの中で、馬IDを取得するPHPを呼んでいます。馬名を引数として。
戻り値(xmlhttp.responseText)には馬IDが入るようになってます。
あとは、テキストエリアの最後尾にリンクテキストを追記する、という感じ。
レース名についても同様の手法で簡単にできます。
どちらもID取得.PHPに日本語で引数を渡していますが、
文字コードには注意。うまく動かないことがあります。
Ajaxはそれほど大変なものではないです。
多少のWebの知識があれば、簡単にできます。
このネタへのコメント:
コメントはありません。