第1回ではJSONPによるAjax実装を取り上げましたが、今回はそこで使ったJSONという表記法と、JSONPというAjax実装手法について解説します。また、jQueryによる簡単なAjaxの実装についても解説します。 JSONってなに？ JSONとは、JavaScript Object Notationの略称です。ECMAScript言語 ECMA-262をベースに作られた、Javascriptオブジェクトの表記法のサブセットです。 JSONは、名前と値のペア、および、順序付きの値という2つのシンプルな構造に基づいて、構造化データを簡潔に表現することができます。 オブジェクト（名前と値のペアの集まり） JSONでオブジェクトを表現するには、メンバを「{」と「}」で囲みます。複数のメンバは「,」で区切られます。例えば、名前が「color」、値が「green」というメンバを持つオブジェク
この機能を実行するにはprototype.jsが必要です 構文 Ajax.Updater(container, url, options) 引数: container=更新対象のエレメントＩＤ, url=Ajaxで接続するＵＲＬ, options=オプション 「Ajaxで指定エレメントの内容を書き換える」サンプルコード <html> <head> <title>Ajax.Updater - Ajaxで指定エレメントの内容を書き換える</title> </head> <!--Ajaxで指定エレメントの内容を書き換えるのサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> function execute() { var a = new Aj
function backgroundLoad ( ids ) { for ( var i=0; i < ids.length; i++ ) { var a = getArticleWithCache(ids[i]); backgroundLoad(a.children); } } このbackgroundLoadはIDの配列を引数に取り、その各IDに対して上で定義したgetArticleWithCacheを呼び出します。これでIDに対応する記事のデータがキャッシュされます。そして読み込んだ記事の子記事のIDに対してbackgroundLoadを再帰的に呼び出すことで、ツリー全体をキャッシュすることができます。 ここまですべてうまくいっているように見えます。しかし、一度でもAjax開発を経験したことのある方ならば、これではうまくいかないということはすでにおわかりだと思います。これまでの例で
サーバ側のプログラムがXMLデータを返すのではなく、直接ユーザーへと出力するHTMLを返すことがある。 そのような場合に便利なのが、Ajax.Updaterオブジェクトを使った呼び出し方法です。 var myAjax = new Ajax.Updater( 'placeholder', // 差し込む要素 'http://localhost/test.php', // 呼び出し先のURL { method: 'post', // メソッド postBody: 'id=1', // ポストされるボディ部 } ); Ajax.Updater オブジェクトのコンストラクタの３番目のパラメータは、AJAX呼び出し時のオプションを示します。 {method: 'post', parameters: 'id=1'} という形(JSON書式)で記述します。 上記の例では、１番目の引数のURLに para
以下は、ボタンの文字列を送信する例ですが、encodeURIComponent でエンコードされたデータは、クライアントのキャラクタセットにかかわらず、utf-8 になります ( クライアントページのキャラクタセットは何でもかまいません ) 気をつけるのは、日本語又は記号を渡す時に encodeURIComponent を使用するのを忘れない という事です。 ( Google MAP のクライアントコードにもきっちり使われています ) ※ 内容の解らない入力データ等は必ずエンコードすれば良いです。仕様の決まったコードなら必要無いでしょう。 <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <SCRIPT language="javascript" type="text/
今回は Firebug の最も基本的な操作である、起動と終了です。これから先の学習で Ajax のプログラミングに Firebug を頻繁に使います。 Firebug をいろいろいじっているうちに、わけがわからなくなった時は、とりあえず一度終了して再起動すると元に戻せます。戻し方がわかれば安心して操作することができるので大事なことです。 Firebug はブラウザの一部として開いたり、別ウィンドウとして開くこともできます。Webブラウザの画面の変化を確認しながら実行するときは同じ画面が見やすいし、JavaScriptのプログラムを中心に見るときは、別ウィンドウの方が大きくて見やすいです。状況に応じて使いやすい方法で開けるようにしましょう。 ＊Firefox に Firebug をまだインストールしていない方は、先に Step4 をご覧ください。 【1】Firefox を起動します。 【2】
Ajax とは Asynchronous JavaScript + XML の略で、 Web サーバーとブラウザとの間で非同期通信を行う方法です。 Ajax の方法を利用することで、ページを切り替えることなくページの内容を書き換えることができるようになります。 JavaScript では Aax を用いた非同期通信には XMLHttpRequest オブジェクトを使用します。ここでは Ajax を使った非同期通信を行う方法について解説します。
AjaxのプログラムでjQueryのreadyを使ってみましょう。 jQueryとはJavaScriptライブラリの一種で、今やデファクトスタンダードと言われるくらい人気です。 前回はわざとJavaScriptのプログラムの中で、jQueryの機能を呼び出していました。 何故なら、最初はできるだけ元のプログラムを変更せずに、 最小限の修正だけで動くようにしたかったからです。 でもjQueryっぽい書き方というか、 本来ならjQueryのイベントやメソッドを使った書き方があります。 そこで今回は、前のプログラムを、jQueryを主体として書き換えてみます。 早速、やってみましょう。 【1】前回に作成したsample002jq フォルダをコピーして sample002jq-2 フォルダを作成します。 【2】今回は以下のようなファイルの構成になります。 ・test.js を少しだけ変更します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く