Sorry, no corresponding articles.
--
--
--
no comments

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Related Posts

Next and Prev

Comments + Add Comment

Leave a comment

05
29
2011
0 comments

なぜか認知度の高いAjax

ウチの大学の情報工学科の先生や学生の間では、なぜかAjaxの知名度が変に高いです。何か憧れに近いものになっていて、使えたらかっこいいみたいな雰囲気を感じることも、、、


技術のキーとなるJavascriptが得意っていう先生もいないし、学生曰くJavascriptの授業は、2年生のときに2コマぐらいチョロっとやるだけなんだとか。XMLに関しては、その単語さえ聞くことが無いです。


個人的な認識としては、GoogleマップやGmailで一気に広まったのが4~5年前で、2~3年前のjQueryの登場により、AjaxはjQueryが提供するリッチなWebを構築するために使われる技術発想の中の1つという位置付けで、jQueryが動的Web構築の中核となり、主戦場がスマートフォンに移行しつつあるのが今の流れ。


Ajaxは手法の1つで、その考え方を知るのも大事ですが、それはハイレベルな人達の話しで、その前に実践的なことを、動的Webのメリットやデメリット、実装する方法やjQueryの使い方、そもそももっとJavascriptやXMLについて学ぼう!!と思うわけで。。。


先日、4年生のティムールが3年生のサッポロボーイにAjaxを教えるというので見学。


jQueryで他のhtmlから要素を引っ張ってくるサンプルを使って教えていました。


↓サンプルはこんな具合だったかと。
http://blog-imgs-42.fc2.com/k/u/r/kuraclock/sample.html


プログラムのソース

いちおうソースを書いておきます。

メインのHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>sample</title>
<script type="text/javascript" src="./jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button.button1").click(function(){
$("div.targetDiv").load("./html1.html p");
});
$("button.button2").click(function(){
$("div.targetDiv").load("./html2.html p");
});
});
</script>
</head>
<body>
<button class="button1">button1</button>
<button class="button2">button2</button>
<div class="targetDiv"><p>sample<p/></div>
</body>
</html>

内容を引っ張られるHTMLその1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>title_html1</title>
</head>
<body>
<p>html1</p>
</body>
</html>

内容を引っ張られるHTMLその2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>title_html2</title>
</head>
<body>
<p>html2</p>
</body>
</html>

ティムールならもしかしたらと思いましたが、やっぱりjQuery。


JavascriptのライブラリをくんでAjaxを実装するようなことをやられたら、荷物をまとめて日本に帰るところでした^^;

Comments + Add Comment

Leave a comment

Urgench Time

Urgench Temp

Click for Urgench, Uzbekistan Forecast

Tweets

Counter (visitor)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。