<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>トップ</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="moojs/moo.fx.js" type="text/javascript"></script>
<script src="moojs/moo.fx.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jkl-parsexml.js"></script>
<script>
<!--

//インジケータ
var bar

//メイン関数
function xmlRead(url)
{
	//インジケータ開始
	document.getElementById('out1').innerHTML = 'pre loading...'
	bar = setInterval('indicator()')

	// JKL.ParseXMLオブジェクトを生成
	var xml = new JKL.ParseXML( url );  
	var func = function ( data )        // 呼び出し先関数を定義する
	{  
		onloaded1( data );              //コールバック
	}
	xml.async( func );                  // 呼び出し先関数を指定する
	xml.parse();                        // ダウンロード〜解析〜関数呼び出しする
}

//XMLを受信時に起動するコールバック関数
function onloaded1(xml)
{
	var data = ""
		//出力用HTMLを作る
		data += '<div class="title">'
		data += xml.lwws.title
		data += '</div><div class="image">'
		data += '<img src="'
		data += xml.lwws.image.url
		data += '" border="0" />'
		data += '</div><div class="tenki"><font color="#FF0000">'
		data += xml.lwws.telop
		data += '</font><br />'
		data += '最高気温：'
		data += xml.lwws.temperature.max.celsius
		data += '<br />'
		data += '最低気温：'
		data += xml.lwws.temperature.min.celsius
		data += '</div>'

		
	//インジケータ停止
	clearInterval(bar)
	//出力
	document.getElementById('out1').innerHTML = data
}

//インジケータ
function indicator()
{
	document.getElementById('out1').innerHTML = '<img src="xml/004/indicator1.gif" />'
}

//-->
</script>
</head>

<body style="color:#555555; font-size:13px;">
<div align="center"><img src="image/dekirukoto.gif" alt="Ajaxでできること" /></div><br />
　XMLHttpRequestという機能を利用して，JavaScriptから非同期にHTTP通信を行い，WWWサーバと連携することで，ページを遷移することなく，アプリケーションのような操作性を実現したのがAjaxという技術です。

<!--1-->
<div style="margin-top:20px;margin-left:10px;"><img src="image/tatoeba.gif" /></div>
<div style="border:#CCCCFF 2px dashed; padding:5px; margin:5px;">
<div align="center">ロゴをドラッグ&amp;ドロップ</div>
<img id="revertbox1" style="cursor:move; margin-left:40px;" src="../indexfile/index_title.gif" />
<script type="text/javascript" language="javascript">
  new Draggable('revertbox1',{ghosting: true,scroll:window,revert:true});
</script>
</div>


<!--2-->
<div style="margin-top:20px;margin-left:10px;"><img src="image/tatoeba.gif" /></div>
<div style="border:#CCCCFF 2px dashed; padding:5px; margin:5px;">
<div align="center">エフェクト効果で左右にゆらす</div>
<div align="center">
<span href="#" onmouseover="Effect.Shake('yure'); return false;">
<img id="yure" src="image/flower.gif" border="0" />
</span></div>
</div>


<!--3-->
<div style="margin-top:20px;margin-left:10px;"><img src="image/tatoeba.gif" /></div>
<div style="border:#CCCCFF 2px dashed; padding:5px; margin:5px;">
<div align="center">アコーディオンメニュー</div><br />
<script type="text/javascript">
window.onload = function(){
	var mooKnob = document.getElementsByClassName("knob_moo");
	var mooContent = document.getElementsByClassName("content_moo");
	var myAccordion = new fx.Accordion(mooKnob, mooContent, {opacity:true});
	myAccordion.showThisHideOpen();
}
</script>
<style type="text/css">
#waku {width:350px; text-align:center; margin-left:60px;}
.knob_moo {margin-top:1px;padding:2px;font-size:12px;cursor:pointer;
           background: #D0021C; color:#FFFFFF;}
.content_moo{background-color:#FFFFFF;}
.naka{ margin:5px 0px; border:#CCCCCC 0px solid; font-size:12px;}
</style>
<div id="waku">
<div class="knob_moo">サンワダイレクト</div>
<div class="content_moo">
<div class="naka">
　<a href="http://click.linksynergy.com/fs-bin/click?id=f6NYne4FV1E&offerid=114822.10000006&type=3&subid=0" target="_blank">OAサプライの専門店　サンワダイレクト</a><IMG border=0 width=1 height=1 src="http://ad.linksynergy.com/fs-bin/show?id=f6NYne4FV1E&bids=114822.10000006&type=3&subid=0" ><br /><br />
<a href="http://click.linksynergy.com/fs-bin/click?id=f6NYne4FV1E&offerid=114822.10000033&type=4&subid=0" target="_blank"><IMG alt="サンワダイレクト" border="0" src="http://direct.sanwa.co.jp/linkshare/USBflash106x100.gif"></a><IMG border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=f6NYne4FV1E&bids=114822.10000033&type=4&subid=0">
</div></div>
<div class="knob_moo">週間ベストセラー5</div>
<div class="content_moo">
<div class="naka">
<script src="http://ad.linksynergy.com/fs-bin/show?id=f6NYne4FV1E&bids=33310.983&catid=385&gridnum=0&type=14&subid=0"></script><noscript><a href="http://click.linksynergy.com/fs-bin/click?id=f6NYne4FV1E&offerid=33310&type=4&subid="><img src="http://ad.linksynergy.com/fs-bin/show?id=f6NYne4FV1E&bids=33310&subid=&type=4&gridnum=0"></a></noscript>
</div></div>
<div class="knob_moo"> ioPLAZA【アイ・オー・データ直販サイト】 ストアフロント</div>
<div class="content_moo">
<div class="naka">
<a href="http://storefront.linksynergy.com/fs-bin/store?eid=f6NYne4FV1E&offerid=114257&stid=8&subid=" target="_blank">DVDドライブ外付型</a><br />
<a href="http://storefront.linksynergy.com/fs-bin/store?eid=f6NYne4FV1E&offerid=114257&stid=9&subid=" target="_blank">DVDドライブ内蔵型</a><br />
<a href="http://storefront.linksynergy.com/fs-bin/store?eid=f6NYne4FV1E&offerid=114257&stid=11&subid=" target="_blank">外付型ハードディスク</a>
</div></div>
</div></div>


<!--4-->
<div style="margin-top:20px;margin-left:10px;"><img src="image/tatoeba.gif" /></div>
<div style="border:#CCCCFF 2px dashed; padding:5px; margin:5px;">
<div align="center">
<a href="#" onclick="xmlRead('./001_wakkanai.php')">気象データを呼び込む</a>
<p><div id="out1"></div></p></div></div>
<br />
　このフレーム内にサンプルが表示され，フレーム枠の下に「<font color="#FF0000">解説</font>」と「<font color="#FF0000">HTMLソース</font>」が表示されます。
</body>
</html>

