Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。
従来、Webブラウザを使ったWebアプリケーションでは、データをサーバに通知して処理結果を得るにはページ全体をロードしなおさなければならず、ネイティブアプリケーションのような操作性を得ることは難しかった。Ajaxでは、指定したURLからXMLドキュメントを読み込む機能を使い、ユーザの操作や画面描画などと並行してサーバと非同期に通信を行うことで、サーバの存在を感じさせないシームレスなWebアプリケーションを実現することができる。
ちなみに、JavaScriptのHTTP通信機能自体は同期通信にも非同期通信にも対応しており、受信するデータ形式もXMLとプレーンテキストの両方を選べるため、プレーンテキストを同期通信する従来型のWebアプリケーションをページ遷移を伴わずに実現するといった使い方もできる。
<HTML
lang="ja" lang="ja" xml:lang="ja"
xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<!-- http://mymt.minibird.jp/etc/jishin/index.php -->
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>地震速報</TITLE>
<!--Ajaxで指定エレメントの内容を定期的に書き換えるのサンプル-->
<SCRIPT src="prototype.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
var myajax;
function execute() {
myajax = new Ajax.PeriodicalUpdater(
"container",
"ji2.php",
{
"method": "get",
// "parameters": "p=hoge",
frequency: 5, // 5秒ごとに実行
onSuccess: function(request) {
// 成功時の処理を記述
// alert('成功しました');
// jsonの値を処理する場合↓↓
// var json;
// eval("json="+request.responseText);
// ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え)
var str = myajax.options.parameters;
var hash = str.parseQuery();
hash["ajax_request_id"] = Math.random();
hash = $H(hash);
myajax.options.parameters = hash.toQueryString();
},
onComplete: function(request) {
// 完了時の処理を記述
// alert('読み込みが完了しました');
// jsonの値を処理する場合↓↓
// var json;
// eval("json="+request.responseText);
},
onFailure: function(request) {
alert('読み込みに失敗しました');
},
onException: function (request) {
alert('読み込み中にエラーが発生しました');
}
}
);
}
function stop() {
if (myajax != null && myajax != undefined) {
myajax.stop();
}
}
</SCRIPT>
<STYLE>
h2{
font-size:12px;
font-weight:normal;
font-family:"Times New Roman","Meiryo UI",meiryo;
}
</STYLE>
</HEAD>
<BODY
onload="execute();">
<div id="container"></div>
</BODY></HTML>
以下を読み込ませる
<?php
///////*データ取得*/
//1.読み込み
$str = file_get_contents("http://realtime.search.yahoo.co.jp/search?fr=top_ga1_sa&ei=utf-8&p=%E5%9C%B0%E9%9C%87");
$str2 = ereg_replace("r|n|t","",$str);//改行などを除去
/*
<div class="cnt cf" data-time="d+"><h2>
これからお風呂。<em>地震</em>きませんように。って、思ってしまう状況やだなあ。</h2>
*/
//2.正規表現
//$pattern = "/<div class="section">(.*)</div><!-- section -->/";
$pattern = "/<div class="cnt cf" data-time="d+"><h2>(.*?)</h2>/";//最短一致
//if(@preg_match($pattern,$str2,$match)){ //@でエラー回避
if(@preg_match_all($pattern,$str2,$match)){ //最短一致で全てを取り出す
//置換
$match[0] = str_replace("</h2>", "</h2></div>", $match[0] );
$match[0] = str_replace("<a class="url"", "<a target="_blank" class="url"", $match[0] );
//echo ( $match[0]."" );
//preg_match_allで取り出した要素が複数の場合($match[0][1],$match[0][2]・・・)、以下で全て表示させる。
foreach ($match[0] as $hoge) {
echo $hoge;
}
}
?>
window.onload = function() {
dp.SyntaxHighlighter.ClipboardSwf = ‘http://tmh.main.jp/lib/js/dp.SyntaxHighlighter/Scripts/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);
};