Ajax
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
* [[Ajax]]
Asynchronous JavaScript＋XMLでJavaScriptで非同期にデータ...
Googleがつかって、注目を集めているらしい。XMLHttpRequest...
非同期にデータを取りにいってたりしていたので、ちょっとは...
JavaScriptを使っている時点でどうなんだろ？ MACのIEのJava...
HTMLの貧弱さの抜本的な解決になっているわけではないので、...
とおもってたら、 Javascriptから直接Javaコードを呼び出せる...
#contents
** 環境
ブラウザにXHTML、HTML、CSS、XSLTがサポートされていればい...
** サンプル
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; char...
<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://cloude...
** [[JSONIC>http://jsonic.sourceforge.jp/]]
シンプルで高機能なJAVAのJSONエンコーダー/デコーダーライブ...
** DWR(Direct Web Remoting)
Ajax対応のフレームワークです。サンプルはhttp://www.getahe...
***サンプル
tomcatのdocBaseをc:\dwrsampleとして、contextのpathを/dwrs...
c:\dwrsample\dwr.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; cha...
<title>DWR</title>
<!--ここは自動生成されるため、ファイルは見つからない-->
<script type='text/javascript' src='dwr/interface/Testd...
<script type='text/javascript' src='dwr/engine.js'></sc...
<script type='text/javascript' src='dwr/util.js'></scri...
<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" onk...
都道府県:<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 We...
<dwr>
<allow>
<create creator="new" javascript="Testdwr" scope="ses...
<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-app id="dwr">
<display-name>DWR (Direct Web Remoting)</display-name>
<description>A demo of how to call Java on the server d...
<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</servle...
<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にアクセス...
ここにも参考文献が[[JAVA PRESS Vol.44>http://www.amazon.c...
***セッション
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().getSe...
HttpSession session = ExecutionContext.get().getHttpSer...
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; cha...
<title>DWR</title>
<script type='text/javascript' src='dwr/interface/Testd...
<script type='text/javascript' src='dwr/engine.js'></sc...
<script type='text/javascript' src='dwr/util.js'></scri...
<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" onke...
都道府県:<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()...
</body>
</html>***リンク
http://www.javaworld.jp/enterprise/-/20862.html
** prototype.js
prototype.jsを使ってやってみます。xoopsのテーブルusersの...
php4.3,mysql5でxoopsを動かしてます。prototype.jsのAjax.Re...
取得したデータをJSONを使って、動的にテーブルに追加してま...
http://hidekazu.dhs1.sst.ne.jp/xoops/html/を表示し、ユー...
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; intf...
target2data += dataObject.data[intfor].test1 + dataOb...
}
$('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; intf...
//row追加
var tr=tbody.insertRow(intfor);
//col追加
tr.insertCell(0).innerHTML = dataObject.data[intfor]....
tr.insertCell(1).innerHTML = dataObject.data[intfor]....
}
}
//-->
</script>
<input type="button" value="クリック" onclick="getData()...
<div id='target'>JSONテスト１ 1レコード目の1項目を表示<...
<div id='target2'>JSONテスト２ 全レコードの全項目表示</...
<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_...
echo '{"test1":"'.$uname.'", "test2":"'.$name.'"}';
}
echo ']';
echo ',"count":"'.$intCnt.'"';
echo '};';
?>
さてJSONでやっていますが、XMLHttpRequestを使っている都合...
JSONPを使用することになります。~
参考:http://at-shima.cocolog-nifty.com/blog/2007/03/javas...
** JSONP
クロスドメインで公開したい場合は、XMLHttpRequestを使って...
ようは、javascriptのファイルを使用する際に、
<script src="prototype.js" type="text/javascript"></scri...
って書いたりしますが、これが別のドメインでもいけるので、...
ベタに書いていってもいいのですが、いいのがありますので、...
http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-t...
http://www.xml.com/2005/12/21/examples/jsr_class.zipをダ...
下記はボタンが押された時に動くサンプルです。~
ボタンがクリックすることによって、getData()が呼ばれます。...
srcにURLを設定しています。jsr_class.jsはとても短いので、...
<html>
<script src="prototype.js" type="text/javascript"></scri...
<script src="jsr_class.js" type="text/javascript"></scri...
<script type="text/javascript">
var oJsr;
function getData() {
var attr = 'zip=10';
oJsr = new JSONscriptRequest('http://www.hoge.com/hoge....
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/arch...
** GoogleMap
自分のページに設置してみましょうということで、http://www....
から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&...
を
<scrip t src="http://maps.google.com/maps?file=api&v=1&...
にしてやりましょう。script にスペースはいりません。このサ...
** リンク
***[[■Ajax : 勉強用サンプル&解説>http://www.openspc2.org/...
***[[ajaxな住所入力フォーム >http://www.kawa.net/works/aj...
***[[【Ajax】暫定版Ajax用ライブラリ>http://jsgt.org/mt/ar...
Ajax用のライブラリを公開されておられます。~
http://jsgt.org/ajax/ref/lib/
***[[まい・はうす>http://blogs.sun.com/takemura/date/2006...
AJAX Toolkit FrameworkとDojoについて大変参考になります。~
***[[Eclipse のための Ajax Toolkit Framework を知る>http:...
***[[Ajaxを勉強しよう>http://www.openspc2.org/JavaScript/...
大変丁寧なページです。出力したら本になるのではないでしょ...
***[[AJAXの速度をアップする方法>http://gigazine.net/index...
***[[AjaxDaddy>http://www.ajaxdaddy.com/]]
いろいろなサンプルがあります。http://www.ajaxdaddy.com/de...
***[[JSON/XMLデータを簡単に編集する「JSON Editor」>http:/...
** 参考書籍
[[10日でおぼえるAjax 入門教室>http://www.amazon.co.jp/exe...
prototype.jsやクロージャーとかにもふれられており、初めて...
** コメント
--#comment
終了行:
* [[Ajax]]
Asynchronous JavaScript＋XMLでJavaScriptで非同期にデータ...
Googleがつかって、注目を集めているらしい。XMLHttpRequest...
非同期にデータを取りにいってたりしていたので、ちょっとは...
JavaScriptを使っている時点でどうなんだろ？ MACのIEのJava...
HTMLの貧弱さの抜本的な解決になっているわけではないので、...
とおもってたら、 Javascriptから直接Javaコードを呼び出せる...
#contents
** 環境
ブラウザにXHTML、HTML、CSS、XSLTがサポートされていればい...
** サンプル
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; char...
<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://cloude...
** [[JSONIC>http://jsonic.sourceforge.jp/]]
シンプルで高機能なJAVAのJSONエンコーダー/デコーダーライブ...
** DWR(Direct Web Remoting)
Ajax対応のフレームワークです。サンプルはhttp://www.getahe...
***サンプル
tomcatのdocBaseをc:\dwrsampleとして、contextのpathを/dwrs...
c:\dwrsample\dwr.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; cha...
<title>DWR</title>
<!--ここは自動生成されるため、ファイルは見つからない-->
<script type='text/javascript' src='dwr/interface/Testd...
<script type='text/javascript' src='dwr/engine.js'></sc...
<script type='text/javascript' src='dwr/util.js'></scri...
<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" onk...
都道府県:<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 We...
<dwr>
<allow>
<create creator="new" javascript="Testdwr" scope="ses...
<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-app id="dwr">
<display-name>DWR (Direct Web Remoting)</display-name>
<description>A demo of how to call Java on the server d...
<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</servle...
<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にアクセス...
ここにも参考文献が[[JAVA PRESS Vol.44>http://www.amazon.c...
***セッション
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().getSe...
HttpSession session = ExecutionContext.get().getHttpSer...
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; cha...
<title>DWR</title>
<script type='text/javascript' src='dwr/interface/Testd...
<script type='text/javascript' src='dwr/engine.js'></sc...
<script type='text/javascript' src='dwr/util.js'></scri...
<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" onke...
都道府県:<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()...
</body>
</html>***リンク
http://www.javaworld.jp/enterprise/-/20862.html
** prototype.js
prototype.jsを使ってやってみます。xoopsのテーブルusersの...
php4.3,mysql5でxoopsを動かしてます。prototype.jsのAjax.Re...
取得したデータをJSONを使って、動的にテーブルに追加してま...
http://hidekazu.dhs1.sst.ne.jp/xoops/html/を表示し、ユー...
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; intf...
target2data += dataObject.data[intfor].test1 + dataOb...
}
$('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; intf...
//row追加
var tr=tbody.insertRow(intfor);
//col追加
tr.insertCell(0).innerHTML = dataObject.data[intfor]....
tr.insertCell(1).innerHTML = dataObject.data[intfor]....
}
}
//-->
</script>
<input type="button" value="クリック" onclick="getData()...
<div id='target'>JSONテスト１ 1レコード目の1項目を表示<...
<div id='target2'>JSONテスト２ 全レコードの全項目表示</...
<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_...
echo '{"test1":"'.$uname.'", "test2":"'.$name.'"}';
}
echo ']';
echo ',"count":"'.$intCnt.'"';
echo '};';
?>
さてJSONでやっていますが、XMLHttpRequestを使っている都合...
JSONPを使用することになります。~
参考:http://at-shima.cocolog-nifty.com/blog/2007/03/javas...
** JSONP
クロスドメインで公開したい場合は、XMLHttpRequestを使って...
ようは、javascriptのファイルを使用する際に、
<script src="prototype.js" type="text/javascript"></scri...
って書いたりしますが、これが別のドメインでもいけるので、...
ベタに書いていってもいいのですが、いいのがありますので、...
http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-t...
http://www.xml.com/2005/12/21/examples/jsr_class.zipをダ...
下記はボタンが押された時に動くサンプルです。~
ボタンがクリックすることによって、getData()が呼ばれます。...
srcにURLを設定しています。jsr_class.jsはとても短いので、...
<html>
<script src="prototype.js" type="text/javascript"></scri...
<script src="jsr_class.js" type="text/javascript"></scri...
<script type="text/javascript">
var oJsr;
function getData() {
var attr = 'zip=10';
oJsr = new JSONscriptRequest('http://www.hoge.com/hoge....
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/arch...
** GoogleMap
自分のページに設置してみましょうということで、http://www....
から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&...
を
<scrip t src="http://maps.google.com/maps?file=api&v=1&...
にしてやりましょう。script にスペースはいりません。このサ...
** リンク
***[[■Ajax : 勉強用サンプル&解説>http://www.openspc2.org/...
***[[ajaxな住所入力フォーム >http://www.kawa.net/works/aj...
***[[【Ajax】暫定版Ajax用ライブラリ>http://jsgt.org/mt/ar...
Ajax用のライブラリを公開されておられます。~
http://jsgt.org/ajax/ref/lib/
***[[まい・はうす>http://blogs.sun.com/takemura/date/2006...
AJAX Toolkit FrameworkとDojoについて大変参考になります。~
***[[Eclipse のための Ajax Toolkit Framework を知る>http:...
***[[Ajaxを勉強しよう>http://www.openspc2.org/JavaScript/...
大変丁寧なページです。出力したら本になるのではないでしょ...
***[[AJAXの速度をアップする方法>http://gigazine.net/index...
***[[AjaxDaddy>http://www.ajaxdaddy.com/]]
いろいろなサンプルがあります。http://www.ajaxdaddy.com/de...
***[[JSON/XMLデータを簡単に編集する「JSON Editor」>http:/...
** 参考書籍
[[10日でおぼえるAjax 入門教室>http://www.amazon.co.jp/exe...
prototype.jsやクロージャーとかにもふれられており、初めて...
** コメント
--#comment
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
