スポンサード リンク

AjaxでjQueryを使用する方法について。

Ajaxのプログラミングでは、JavaScriptライブラリの一種であるjQueryがよく使われます。

jQueryは、Ajaxプログラミングのデファクトスタンダードとなっているほど人気があります。

参考になる書籍やインターネット上の情報も豊富です。

これまでのプログラミングでは、軽量タイプのフレームワークであるprototype.jsを使っていましたが、

今回はそのプログラムをjQueryで書き換えてみましょう。

jQueryを入手する方法は、とても簡単です。

prototype.jsと同じように、ダウンロードしてサーバーに配置してもよいのですが、

もっと簡単に利用できる方法があります。

それは使いたいWebページのHTMLのheadタグ部分に、1行加えるだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

たったこれだけで、jQueryをロードすることができるのです!

凄い、便利ですよねー

ただしこの方法は、インターネットに接続していることが前提です。
jQueryをロードする必要があるからです。

それでは早速、使ってみましょう。

本来ならjQueryのイベントやメソッドに適した書き方がありますが、

今回はできるだけ元のプログラムを変更せずに、
最小限の修正だけで動くようにしてみましょう。

そこで最もシンプルなsample002を使います。

【1】以前に作成したsample002 フォルダをコピーして sample002jq フォルダを作成します。


【2】今回は以下のようなファイルの構成になります。

・test.html と test.js を少しだけ変更します。
・test.css は同じものなので、ソースコードは省略します。

*「\」はWindowsではエンマークのことです。

保存先 C:\ajax\sample002jq
ファイル名 test.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css">    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <title>test</title>
  </head>
  <body>
    <div id="result"></div>
  </body>
</html>


保存先 C:\ajax\sample002jq
ファイル名 test.js

onload = init;
var result;

function init() {
result = $('#result');
calc();
}

function calc() {
var a = 1;
var b = 2;
var c = a + b;
result.text("a + b = " + c);
}


*文字コードは必ず UTF-8 で保存してください。

保存したら各Webブラウザで動作を確認してみましょう。


【3】sample002jq の「test.html」を開き、動作を確認します。

sample002の時と同じように表示されれば成功です。

本来のjQueryっぽい書き方ではありませんでしたが、
とりあえずは動作できましたね。


【解説】
(1)test.htmlのheadタグでは、念のためCSS、jQuery、jsファイルの順で読み込むようにしています。

準備が整ってから、プログラムを実行したいからです。

(2)jQueryでセレクタ(要素)を取得し、変数に代入している部分です。
result = $('#result');

jQueryでは、id要素は先頭に#(シャープ)を付ける決まりがあります。

ちなみにclass要素は先頭に.(ピリオド)を付けます。

(3)要素にjQueryのメソッドで、テキストをセットしている部分です。
result.text("a + b = " + c);

これと同じ意味。
$('#result').text("a + b = " + c);

どうでしたか?
意外と簡単にjQueryが使えましたね。

一番初歩的なjQueryの使い方を紹介しましたが、
実に高機能なJavaScriptライブラリなので、
興味がある方は詳しく調べてみると良いでしょう。

Webページに、様々な効果を加えることができますよ。

スポンサード リンク






Ajax初心者入門講座TOPへ