原付生活(3)
AjaxならぬAjapを使ってみる。
そもそもAjax(エイジャックス)とは
「Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、
Webページのリロードを伴わずにサーバとXML形式のデータの
やり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態。」
(下記リンクより)
Asynchronous JavaScript + XMLの略だそうです。
これね、はじめてみたときに
すごい画期的な技術だなと思って。
ページ遷移しないのに、内容変えられるんですよ。
んで。
使ってみたいという気持ちはあるものの、
XMLの知識は相変わらずないので、さてどうしよう。
今回導入しようとしているのは、
POGの歴代馬のランキング。
データはもちろんDBで持ってます。
ページリクエストがきたらXMLを生成するか。。。
そこでひらめいた。
「Flashと同じじゃない？」
と。
PHPでテキストをベタではくようにしておき、
FlashのActionScript内からそのPHPを呼び出す。
そうすると、そのPHPはあたかもテキストファイルのように
ActionScript内では扱えるのです。
ActionScriptをJavaScriptに置き換えてみます。
PHPでテキストをベタではくようにしておき、
JavaScript内からそのPHPを呼び出す。
そうすると、そのPHPはあたかもテキストファイルのように
JavaScript内では扱えるのです。
ってなわけで、今回ご紹介するのを
勝手に「Ajap(エイジャップ)」と名づけさせていただきました。
XMLがPHPになった、と。
さて、詳細。
まずはJavaScript部分も含め、呼び出すほう。
----------
<html><head><script><!--
cnt = 0;
function hoge() {
//ブラウザを判定して、どちらかを使います。
xmlhttp = new XMLHttpRequest(); // for not IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); // for IE
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', 'hoge.php?cnt=' + cnt, true);
xmlhttp.send(null);
}
}
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
//--></script></head>
<body><a href="javascript:cnt++;hoge();">count+1</a>
<div id="disp"></div></body></html>
呼び出されるほう(上のソースからだとhoge.php)
----------
<?
$cnt=$HTTP_GET_VARS["cnt"];
$cnt++;
echo $cnt;
?>
とまあこれだけでいいでしょう。
ブラウザでアクセスすると、「count+1」というリンクが現れます。
リンクを押すと、その下に数字が出て、押すたびに増えていきます。
たいしたサンプルじゃないな。
でもまあ、原理はわかっていただけると思うので。
あとはPHPでDB呼び出して、データ拾って、
タグまで書いちゃうと相当楽。
まだ未完成なので、作ったアドレスをお教えすることはできないんですが、
性能的な問題がクリアできるか。
都度サーバへアクセスするわけで、ページ遷移しているのと同じですから。
クリアできればじゃんじゃん使っていこうと目論んでいるところです。
Ajaxとは 【Asynchronous JavaScript + XML】 ─ 意味・解説 ： IT用語辞典「Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、
Webページのリロードを伴わずにサーバとXML形式のデータの
やり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態。」
(下記リンクより)
Asynchronous JavaScript + XMLの略だそうです。
これね、はじめてみたときに
すごい画期的な技術だなと思って。
ページ遷移しないのに、内容変えられるんですよ。
んで。
使ってみたいという気持ちはあるものの、
XMLの知識は相変わらずないので、さてどうしよう。
今回導入しようとしているのは、
POGの歴代馬のランキング。
データはもちろんDBで持ってます。
ページリクエストがきたらXMLを生成するか。。。
そこでひらめいた。
「Flashと同じじゃない？」
と。
PHPでテキストをベタではくようにしておき、
FlashのActionScript内からそのPHPを呼び出す。
そうすると、そのPHPはあたかもテキストファイルのように
ActionScript内では扱えるのです。
ActionScriptをJavaScriptに置き換えてみます。
PHPでテキストをベタではくようにしておき、
JavaScript内からそのPHPを呼び出す。
そうすると、そのPHPはあたかもテキストファイルのように
JavaScript内では扱えるのです。
ってなわけで、今回ご紹介するのを
勝手に「Ajap(エイジャップ)」と名づけさせていただきました。
XMLがPHPになった、と。
さて、詳細。
まずはJavaScript部分も含め、呼び出すほう。
----------
<html><head><script><!--
cnt = 0;
function hoge() {
//ブラウザを判定して、どちらかを使います。
xmlhttp = new XMLHttpRequest(); // for not IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); // for IE
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', 'hoge.php?cnt=' + cnt, true);
xmlhttp.send(null);
}
}
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
//--></script></head>
<body><a href="javascript:cnt++;hoge();">count+1</a>
<div id="disp"></div></body></html>
呼び出されるほう(上のソースからだとhoge.php)
----------
<?
$cnt=$HTTP_GET_VARS["cnt"];
$cnt++;
echo $cnt;
?>
とまあこれだけでいいでしょう。
ブラウザでアクセスすると、「count+1」というリンクが現れます。
リンクを押すと、その下に数字が出て、押すたびに増えていきます。
たいしたサンプルじゃないな。
でもまあ、原理はわかっていただけると思うので。
あとはPHPでDB呼び出して、データ拾って、
タグまで書いちゃうと相当楽。
まだ未完成なので、作ったアドレスをお教えすることはできないんですが、
性能的な問題がクリアできるか。
都度サーバへアクセスするわけで、ページ遷移しているのと同じですから。
クリアできればじゃんじゃん使っていこうと目論んでいるところです。
[コメント読む(0)]
