通常、ブラウザがWebサーバへ要求して、Htmlファイルを取得し表示した後、
Htmlファイルの表示を変更したい場合には、ファイルの内容を変更し、再読み込みが
必要になります。
再読み込みを不要にし、動的に変更する技術がAjax(あやっくす)の機能のひとつです。
Ajaxと聞くと、難しそうと感じるかもしれませんが、それほどでもないです。
さっそく、サンプルから順に見ていきましょう。
0.最小限のプロジェクトを用意(最小限のプロジェクトの作り方)
プラグイン設定で、jQueryとjQueryMobileを有効にします。
参考:http://make-monaca.blogspot.jp/2014/05/input.html
1.さっそく書いてみます。
index.htmlファイル内の 幅設定(monaca.viewport)とYour code hereを消して、コードを書きます。
ボタンをクリックすると、表示欄へラッキーアイテムを表示する動作を書きます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="plugins/plugin-loader.js"></script>
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script>
// Set virtual screen width size to 640 pixels
monaca.viewport({width: 320});
</script>
</head>
<body>
<br>
<br>
<div id="msg">今日のラッキーアイテムは?</div>
<div>
<button onclick="lu_click()">見る</button>
</div>
<script>
function lu_click(){
var message=document.getElementById("msg");
message.innerHTML="アイスコーヒー";
}
</script>
</body>
</html>
2.コードを解説
buttonタグのなかで、クリックされた時、呼び出されるのが関数 lu_click()であることを定義します。
それが、onclickです。
クリックされたときの動作を決める関数 lu_click() を確認します。
var message=document.getElementById("msg")
変数 message へIDがmsgの要素をまるまる、セットします。
変数messageのinnerHTMLへ"アイスコーヒー"をセットすることで、今の文字を上書きします。
では、IDが、msgの要素は、どこかと言うと、
<div id="msg">今日のラッキーアイテムは?</div>
です。
今日のラッキーアイテムは? を アイスコーヒー へ書き換えています。
3.実際の画面
タップすると、
再読み込みせずに、画面の文字を変更できる技術が簡単に実現できます。
Ajaxはすごいです。
占いアプリに発展させることができそうです。
0 件のコメント:
コメントを投稿