![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
AjaxAsynchronous JavaScript＋XMLでJavaScriptで非同期にデータを取りに行って表示しましょうといったもの。 Googleがつかって、注目を集めているらしい。XMLHttpRequestを使ってやっているみたいだけど、いままでもJavaScriptとiframeを使って 非同期にデータを取りにいってたりしていたので、ちょっとは便利になるかもれないが、ブラウザよっては動いたり動かなかったりする JavaScriptを使っている時点でどうなんだろ？ MACのIEのJavaScriptの悪夢がよみがえりそうです。リッチアプリケーションというわけでもなく、 HTMLの貧弱さの抜本的な解決になっているわけではないので、ちょっと期待薄です。 とおもってたら、 Javascriptから直接Javaコードを呼び出せるDWR(Direct Web Remoting)というものや、 prototype.jsがあるので、もしやいけるかも... 環境ブラウザに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シンプルで高機能な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月号を参考にさせていただきました。あれ？月刊 JavaWorld (ジャバ ワールド) 2005年9月号にもあったのか...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/ セッション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.jsprototype.jsを使ってやってみます。xoopsのテーブルusersのデータを表示します。
php4.3,mysql5でxoopsを動かしてます。prototype.jsのAjax.Requestを使い、複数データを取得します。
取得したデータを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を使用することになります。 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?を使います。
下記はボタンが押された時に動くサンプルです。 <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でのデータに関数で括ってやります。 リンク戯れ言++ とても参考にさせていただきました。 GoogleMap?自分のページに設置してみましょうということで、http://www.google.com/apis/maps/
からSign up for a Google Maps API keyをクリックしてサインアップします。
ではサンプルコードがあるので、設置してみましょう。
http://hidekazu.dhs1.sst.ne.jp/googlemap/index.htm <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は許可していないので、エラーがでるのでスペースを空けているだけです。 リンク■Ajax : 勉強用サンプル&解説ajaxな住所入力フォーム【Ajax】暫定版Ajax用ライブラリAjax用のライブラリを公開されておられます。 まい・はうすAJAX Toolkit FrameworkとDojoについて大変参考になります。 Eclipse のための Ajax Toolkit Framework を知るAjaxを勉強しよう大変丁寧なページです。出力したら本になるのではないでしょうか。 AJAXの速度をアップする方法AjaxDaddyいろいろなサンプルがあります。http://www.ajaxdaddy.com/demo-interface-fisheye.htmlとかおもしろいなー JSON/XMLデータを簡単に編集する「JSON Editor」参考書籍10日でおぼえるAjax 入門教室 コメント
|
