* [[Ajax]]
Asynchronous JavaScript＋XMLでJavaScriptで非同期にデータを取りに行って表示しましょうといったもの。
Googleがつかって、注目を集めているらしい。XMLHttpRequestを使ってやっているみたいだけど、いままでもJavaScriptとiframeを使って
非同期にデータを取りにいってたりしていたので、ちょっとは便利になるかもれないが、ブラウザよっては動いたり動かなかったりする
JavaScriptを使っている時点でどうなんだろ？ MACのIEのJavaScriptの悪夢がよみがえりそうです。リッチアプリケーションというわけでもなく、
HTMLの貧弱さの抜本的な解決になっているわけではないので、ちょっと期待薄です。
とおもってたら、 Javascriptから直接Javaコードを呼び出せるDWR(Direct Web Remoting)というものや、 prototype.jsがあるので、もしやいけるかも...
#contents
** 環境
ブラウザにXHTML、HTML、CSS、XSLTがサポートされていればいい。
** サンプル
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>test</TITLE>
<script src="prototype.js"></script>
<script>
function test1()
{
new Ajax.Request('test.txt',{
onComplete : function (request) {
$('idtest1').innerHTML = request.responseText;
}
});
}
</script>
</HEAD>
<BODY>
<div id="idtest1">
<p>テスト1</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
</BODY>
</HTML>
このtest.txtはUTF-8で保存。prototype.jsは[[JavaScript]]を参考に
IEでうまくいかなったので、原因を調べているとhttp://clouder.jp/yoshiki/mt/archives/000437.htmlこちらの記事が大変参考になりました。ありがとうございます。
** [[JSONIC>http://jsonic.sourceforge.jp/]]
シンプルで高機能なJAVAのJSONエンコーダー/デコーダーライブラリだそうです。確かに簡単で、POJOを簡単に変換できるので、とても楽
** DWR(Direct Web Remoting)
Ajax対応のフレームワークです。サンプルはhttp://www.getahead.ltd.uk/dwr/のExamplesを見てみましょう。http://getahead.ltd.uk/dwr/downloadからまずdwr.warをダウンロードして、Tomcat 5.5のwebappsにコピーして、起動です。
***サンプル
tomcatのdocBaseをc:\dwrsampleとして、contextのpathを/dwrsampleとする。
c:\dwrsample\dwr.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>DWR</title>
<!--ここは自動生成されるため、ファイルは見つからない-->
<script type='text/javascript' src='dwr/interface/Testdwr.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript'>
<!--
function searchAddress () {
var zipcode = DWRUtil.getValue("zipcode");
if (zipcode.length == 7) {
Testdwr.getZipdata(result,zipcode);
}
}
function result(data) {
DWRUtil.setValues(data);
}
// -->
</script>
</head>
<body>
住所検索<br>
郵便番号:<input type="text" id="zipcode" size="10" onkeyup="searchAddress()" maxlength="7"><br>
都道府県:<input type="text" id="pref" size="10"><br>
市区町村:<input type="text" id="city" size="10"><br>
</body>
</html>
c:\dwrsample\WEB-INF\src\com\hidekazu\dwr\Testdwr.java
package com.hidekazu.dwr;
import java.util.HashMap;
public class Testdwr {
public HashMap getZipdata(String data) {
HashMap map = new HashMap();
map.put("pref","北海道");
map.put("city","札幌市");
return map;
}
}
c:\dwrsample\WEB-INF\dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Testdwr" scope="session">
<param name="class" value="com.hidekazu.dwr.Testdwr"/>
</create>
</allow>
</dwr>
c:\dwrsample\WEB-INF\web.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="dwr">
<display-name>DWR (Direct Web Remoting)</display-name>
<description>A demo of how to call Java on the server directly from Javascript on the client</description>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
では、http://localhost:8080/dwrsample/dwr.htmlにアクセスです。ここで、http://localhost:8086/dwrsample/dwr/index.htmlにアクセスすると、利用可能なオブジェクトが見れます。見たくない場合は、<init-param>のdebugをfalseにします。 [[月刊 JavaWorld (ジャバ ワールド) 2006年4月号>http://www.amazon.co.jp/exec/obidos/ASIN/B000EHSMUO/worried-22]]を参考にさせていただきました。あれ？[[月刊 JavaWorld (ジャバ ワールド) 2005年9月号>http://www.amazon.co.jp/exec/obidos/ASIN/B0007WE5SO/worried-22]]にもあったのか...http://www.javaworld.jp/sample_source/sample_2005.htmlからDWRによるAJAXアプリケーション開発をダウンロードしました。Tomcat 5.5のwebappsにコピーしてtomcatを再起動すると、webapps\jw_0509_dwr\jw_0509_dwrになっているので、一階層上にコピーしてやって、http://localhost:8080/jw_0509_dwr/~
ここにも参考文献が[[JAVA PRESS Vol.44>http://www.amazon.co.jp/exec/obidos/ASIN/4774124834/worried-22]]
***セッション
c:\dwrsample\WEB-INF\src\com\hidekazu\dwr\Testdwr.java
package com.hidekazu.dwr;
import java.util.HashMap;
import javax.servlet.http.HttpSession;
import uk.ltd.getahead.dwr.ExecutionContext;
public class Testdwr {
public HashMap getZipdata(String data) {
//ServletContext context = ExecutionContext.get().getServletContext();
HttpSession session = ExecutionContext.get().getHttpServletRequest().getSession();
if (session.getAttribute("test2") == null) {
session.setAttribute("test2",data);
}
HashMap map = new HashMap();
map.put("pref","北海道");
map.put("city","札幌市");
map.put("test2",session.getAttribute("test2"));
return map;
}
}
c:\dwrsample\dwr.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>DWR</title>
<script type='text/javascript' src='dwr/interface/Testdwr.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript'>
<!--
var resData;
function searchAddress () {
var zipcode = DWRUtil.getValue("zipcode");
if (zipcode.length == 7) {
Testdwr.getZipdata(result,zipcode);
}
}
function result(data) {
DWRUtil.setValues(data);
resData = DWRUtil.toDescriptiveString(data, 2);
//DWRUtil.setValue("test2","aa");
}
function btnKakunin() {
alert(resData);
}
// -->
</script>
</head>
<body>
住所検索<br>
郵便番号:<input type="text" id="zipcode" size="10" onkeyup="searchAddress()" maxlength="7"><br>
都道府県:<input type="text" id="pref" size="10"><br>
市区町村:<input type="text" id="city" size="10"><br>
テスト:<input type="text" id="test2" size="10"><br>
<input type="button" value="確認" onclick="btnKakunin()"><br>
</body>
</html>***リンク
http://www.javaworld.jp/enterprise/-/20862.html
** prototype.js
prototype.jsを使ってやってみます。xoopsのテーブルusersのデータを表示します。
php4.3,mysql5でxoopsを動かしてます。prototype.jsのAjax.Requestを使い、複数データを取得します。
取得したデータをJSONを使って、動的にテーブルに追加してます。~
http://hidekazu.dhs1.sst.ne.jp/xoops/html/を表示し、ユーザID:hoge,パスワード:hogeでログインしてから[[サンプル>http://hidekazu.dhs1.sst.ne.jp/xoops/html/modules/hidegw/test1.php]]~
JSONで扱うフォーマットは、
{"data":
[
{"test1":"admin", "test2":"管理人"},
{"test1":"hoge", "test2":"ほげ"}
],
"count":"2"
};
としてます。
test1.php
<script type="text/javascript"><!--
function getData() {
new Ajax.Request('test.php',{
method: 'get',
onSuccess:getResponse
});
}
function getResponse(req) {
eval("var dataObject = " + req.responseText);
//一つめ
$('target').innerHTML = dataObject.data[0].test1;
//2つめ
var target2data = "";
for(var intfor=0; intfor < dataObject.data.length; intfor++) {
target2data += dataObject.data[intfor].test1 + dataObject.data[intfor].test2 + "<br>";
}
$('target2').innerHTML = target2data;
//カウント
$('target3').innerHTML = dataObject.count;
//テーブルに追加
var tbody = $('result');
for(var intfor=tbody.rows.length-1; intfor >=0 ; intfor--) {
var tr=tbody.deleteRow(intfor);
}
for(var intfor=0; intfor < dataObject.data.length; intfor++) {
//row追加
var tr=tbody.insertRow(intfor);
//col追加
tr.insertCell(0).innerHTML = dataObject.data[intfor].test1;
tr.insertCell(1).innerHTML = dataObject.data[intfor].test2;
}
}
//-->
</script>
<input type="button" value="クリック" onclick="getData()" />
<div id='target'>JSONテスト１ 1レコード目の1項目を表示</div>
<div id='target2'>JSONテスト２ 全レコードの全項目表示</div>
<div id='target3'>カウント</div>
<table>
<thead>
<tr>
<th>
test1
</th>
<th>
test2
</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
test.php
<?php
echo '{"data":';
echo '[';
$intCnt = 0;
$sql = "SELECT * FROM ". $xoopsDB->prefix("users");
$result = $xoopsDB->query($sql);
while ($myrow = $xoopsDB->fetchArray($result)) {
if ($intCnt > 0) {
echo ',';
}
$intCnt++;
$uname = $myrow["uname"];
$name = mb_convert_encoding($myrow["name"], 'UTF-8',mb_internal_encoding());
echo '{"test1":"'.$uname.'", "test2":"'.$name.'"}';
}
echo ']';
echo ',"count":"'.$intCnt.'"';
echo '};';
?>
さてJSONでやっていますが、XMLHttpRequestを使っている都合上、クロスドメイン（異なったドメイン）にはアクセスできません。そこでそのような場合は、
JSONPを使用することになります。~
参考:http://at-shima.cocolog-nifty.com/blog/2007/03/javascriptjavas_79bb.html
** JSONP
クロスドメインで公開したい場合は、XMLHttpRequestを使っている都合上、別の方法で回避することになります。
ようは、javascriptのファイルを使用する際に、
<script src="prototype.js" type="text/javascript"></script>
って書いたりしますが、これが別のドメインでもいけるので、このようなscriptタグを生成してやって、そのコールバックで処理をしてやろうというものです。
ベタに書いていってもいいのですが、いいのがありますので、それを使います。
http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.htmlより、
http://www.xml.com/2005/12/21/examples/jsr_class.zipをダウンロードし、解凍し、JSONscriptRequestを使います。
下記はボタンが押された時に動くサンプルです。~
ボタンがクリックすることによって、getData()が呼ばれます。JSONscriptRequestでscriptタグを生成し、
srcにURLを設定しています。jsr_class.jsはとても短いので、一読してみましょう。
<html>
<script src="prototype.js" type="text/javascript"></script>
<script src="jsr_class.js" type="text/javascript"></script>
<script type="text/javascript">
var oJsr;
function getData() {
var attr = 'zip=10';
oJsr = new JSONscriptRequest('http://www.hoge.com/hoge.php?'+attr+'&callback=hundler');
oJsr.buildScriptTag();
oJsr.addScriptTag();
}
function hundler(dataobj) {
if (dataobj.count > 0) {
$('id1').value = dataobj.data[0].id1;
}
oJsr.removeScriptTag();
}
</script>
<body>
<input type="button" value="クリック" onclick="getData()" />
<input name="id1" type="text" id="id12"/>
</body>
</html>
http://www.hoge.com/hoge.phpが返すデータは、
hundler({data:[{id1:"05", id2:"10"}],count:"1"});
とJSONでのデータに関数で括ってやります。
*** リンク
[[戯れ言++>http://www.baldanders.info/spiegel/remark/archives/000222.shtml]] とても参考にさせていただきました。
** GoogleMap
自分のページに設置してみましょうということで、http://www.google.com/apis/maps/
からSign up for a Google Maps API keyをクリックしてサインアップします。
ではサンプルコードがあるので、設置してみましょう。
http://hidekazu.dhs1.sst.ne.jp/googlemap/index.htm~
あれ？IEでエラーがでてますね。
<scrip t src="http://maps.google.com/maps?file=api&v=1&key=hogehoge" type="text/javascript"></script>
を
<scrip t src="http://maps.google.com/maps?file=api&v=1&key=hogehoge" type="text/javascript" charset="utf-8"></script>
にしてやりましょう。script にスペースはいりません。このサイトではscriptは許可していないので、エラーがでるのでスペースを空けているだけです。
** リンク
-http://www.openspc2.org/JavaScript/Ajax/~
-http://www.kawa.net/works/ajax/zip/ajaxzip.html~
-http://connect.seesaa.net/article/2477260.html~
-http://jsgt.org/mt/archives/01/000409.html~
***[[■Ajax : 勉強用サンプル&解説>http://www.openspc2.org/JavaScript/Ajax/]]
***[[ajaxな住所入力フォーム >http://www.kawa.net/works/ajax/zip/ajaxzip.html]]
***[[【Ajax】暫定版Ajax用ライブラリ>http://jsgt.org/mt/archives/01/000409.html]]
Ajax用のライブラリを公開されておられます。~
-http://jsgt.org/ajax/ref/lib/~
-[[まい・はうす>http://blogs.sun.com/takemura/date/20060703]]~
http://jsgt.org/ajax/ref/lib/
***[[まい・はうす>http://blogs.sun.com/takemura/date/20060703]]
AJAX Toolkit FrameworkとDojoについて大変参考になります。~
-[[Eclipse のための Ajax Toolkit Framework を知る>http://www-06.ibm.com/jp/developerworks/opensource/library/os-ecl-atf/index.shtml]]~
-[[Ajaxを勉強しよう>http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html]]~
***[[Eclipse のための Ajax Toolkit Framework を知る>http://www-06.ibm.com/jp/developerworks/opensource/library/os-ecl-atf/index.shtml]]
***[[Ajaxを勉強しよう>http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html]]
大変丁寧なページです。出力したら本になるのではないでしょうか。
-[[AJAXの速度をアップする方法>http://gigazine.net/index.php?/news/comments/20060428_ajax/]]~
-[[AjaxDaddy>http://www.ajaxdaddy.com/]]~
***[[AJAXの速度をアップする方法>http://gigazine.net/index.php?/news/comments/20060428_ajax/]]
***[[AjaxDaddy>http://www.ajaxdaddy.com/]]
いろいろなサンプルがあります。http://www.ajaxdaddy.com/demo-interface-fisheye.htmlとかおもしろいなー~
***[[JSON/XMLデータを簡単に編集する「JSON Editor」>http://www.moongift.jp/2008/11/json_editor/]]
** 参考書籍
[[10日でおぼえるAjax 入門教室>http://www.amazon.co.jp/exec/obidos/ASIN/4798112968/worried-22]]~
prototype.jsやクロージャーとかにもふれられており、初めて読むにはとてもいい本です。
** コメント
--#comment
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
