2010-08-11

jQueryで初めてajaxをコーディングしてみた

初めて、ajaxのHelloWorld的なコードを書いてみた。
今回はjQuery 1.4.2を使ったんだけど、簡単に動作した。jQueryすごい！

んで、動作をみてみたのは、.ajaxメソッドとloadメソッド。
ajaxメソッドは細かく動作を指定できるけど、引数がたくさんあってあまりお手軽ではないかも。
でも、POSTで値をサーバに戻せるのはこのメソッドだけみたいだし、通信失敗時の動作を指定できるのもこのメソッドだけだから、どうしても使う必要が出てくると思う。

loadメソッドはお手軽で、指定したファイルの出力をセレクタに入れ込むだけ。
POSTは使えず、GETのみ使用可能。また、同期通信の設定もできないっぽい。

静的ななコンテンツをとってくるときはloadメソッドで、動的なコンテンツをとってくるときはajaxを、みたいな使い分けになるのかな。

ちなみに、書いてみたコードは下記の通り。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link media="screen" href="./css/style.css" type="text/css" charset="utf-8" rel="stylesheet" />
 <script type="text/javascript" language="JavaScript" src="./js/jquery-1.4.2.js"></script>
 <script type="text/javascript" language="JavaScript">
 <!--
  $(function() {
   $.ajax({
    async: true,
    cache: false,
    url: "./data0.txt",
    dataType: "text",
    type: "POST",
    data: {dpost:"aa", spost:"bb"},
    success: function(data, dataType){$("#test0").html(data)},
    error: function(xmlObj, stat, err){$("#test0").html("データ取得に失敗しました。")}
   });
   
   $("#test1").load("./data1.txt");
  })
 //-->
 </script>
 
 <title>ajax demo</title>
</head>
<body>
 <p id="test0">Loading...</p>
 <p id="test1">Loading...</p>
</body>
</html>


<p id="test0">Loading...</p>

の部分をajaxメソッドで置き換えて、
<p id="test1">Loading...</p>

の部分をloadメソッドで置き換え。

置き換えるデータは、それぞれテストコードと同じディレクトリに置いたdatax.txtファイルを使う。

通信内容をfirebugで捕まえると、ajaxメソッドはPOSTを使ってloadメソッドはGETを使っていることを確認できる。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)