スライド 1

AJAX勉強会
アリエル・ネットワーク株式会社
Copyright © 2001-2005 Ariel Networks, Inc.
•
•
•
•
•
•
•
•
Ajaxとは
Ajaxと通常のWebアクセスとの違い
Ajaxのメリット、デメリット
Ajaxを使う
Ajaxを使っているサイト
簡単な実装例
Ajaxを使う上での注意
Ajax対応ライブラリ
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxとは
•
Asynchronous JavaScript and XML
– 「Javascriptで」、サーバーと「非同期に」「XMLデータを」やり取りする
•
Ajax: A New Approach to Web Applications
– http://www.adaptivepath.com/publications/essays/archives/000385.php
– http://antipop.gs/docs/translations/ajax.html （日本語訳）
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxと通常のWebアクセスとの違い
•
通常のWebアクセス
– GETやPOSTによるHTTPリクエストをサーバーに投げる
– リクエストに応じてサーバーから返されるHTMLをブラウザに表示する
•
Ajax
– JavaScriptを使って適宜バックグラウンドでサーバーと通信する
– サーバーからXMLデータを取得し、ダイナミックHTMLで表示を更新する
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxと通常のWebアクセスとの違い
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxと通常のWebアクセスとの違い
•
従来のWebアクセス
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxと通常のWebアクセスとの違い
•
Ajaxの場合
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxのメリット、デメリット
•
メリット
– 柔軟な動作のRIA(Rich Internet Applicatoin)を実現できる
– 動作させるためにプラグインが必要ない
– 商用の開発環境が必要ない
•
デメリット
– ブラウザによって動作に微妙な違いがある
– ブラウザのローカルキャッシュがAjaxの動作に影響を与える場合がある
– Ajaxでアクセスできるのは、元ページと同じドメイン内のURLに限られる
– プログラムの中身がユーザーに丸見えになる（メリットでもある?）
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxを使っているサイト
•
•
•
•
•
Googleサジェスト
– http://www.google.co.jp/webhp?complete=1
Googleローカル
– http://maps.google.com/
AmazonのA9.com
– http://a9.com/
Banana republic
– http://www.bananarepublic.com/
Zimbra
– http://www.zimbra.com/
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxを使う
•
Ajaxを用いた実装とは、
– JavaScriptでXMLHttpRequestオブジェクトを利用
– ページ全体の読み込みとは非同期にサーバーと通信
– ダイナミックHTMLを利用してページの必要な部分だけを書き換える
•
XMLHttpRequestオブジェクト
– IE5.0以降 (1999年3月)
– Mozilla 1.0以降 (2002年6月)
•
昔からある技術を組み合わせて、Ajaxという名前を付けただけ
Copyright © 2001-2005 Ariel Networks, Inc.
簡単な実装例
var HttpRequest;
function hoge(url) {
if (this.XMLHttpRequest) {
HttpRequest = new XMLHttpRequest();
} else {
HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
HttpRequest.onreadystatechange = readyStateChangeHandler;
HttpRequest.open("GET", url, true);
HttpRequest.send(null);
}
function readyStateChangeHandler() {
if (HttpRequest.readyState == 4) {
if (HttpRequest.status == 200) {
var obj = document.getElementById(“fuga");
obj.innerHTML = HttpRequest.responseText;
}
}
}
Copyright © 2001-2005 Ariel Networks, Inc.
XMLHttpRequestオブジェクトのメソッド
メソッド
解説
abort()
リクエストの中止
getAllResponseHeaders()
レスポンスのヘッダをすべて取得
getResponseHeader("headerLabel")
レスポンスのヘッダ"headerLabel"の値を取得
open("method", "URL"[, asyncFlag[, "userName"[,
"password"]]])
リクエストの方法、URL、同期/非同期アクセス、ユー
ザ名、パスワードをセットする
send(content)
リクエストを送信する
setRequestHeader("label", "value")
リクエストのヘッダ"label/value"を指定する
Copyright © 2001-2005 Ariel Networks, Inc.
XMLHttpRequestオブジェクトのプロパティ
プロパティ
解説
onreadystatechange
ステータスが変わったときに呼ばれるイベントハンドラ
readyState
オブジェクトのステータス:
0 (UNINITIALIZED) オブジェクトは、作成されていますが、まだ、初期化されていません(open メソッド
は呼ばれていません)。
1 (LOADING) オブジェクトが作成されましたが、まだ、send メソッドは呼ばれていません。
2 (LOADED) send メソッドは呼ばれましたが、statusとヘッダはまだ届いていません。
3 (INTERACTIVE) いくつかのデータを受け取りました。この状態ではresponseBodyやresponseTextプロ
パティはエラーを返すでしょう。それは、statusとレスポンスヘッダがまだすべて届いていないからです。
4 (COMPLETED) すべてのデータを受け取りました。responseBody と responseText プロパティの完全な
データが利用可能です。
responseText
受け取ったデータの文字列
responseXML
受け取ったデータのXML
status
サーバから受け取ったステータスコード
404や200など
statusText
Statusコードに対応した文字列
404であれば"Not Found"とか、200であれば"OK"など
Copyright © 2001-2005 Ariel Networks, Inc.
簡単なデモ
Copyright © 2001-2005 Ariel Networks, Inc.
Ajaxを使う上での注意
•
•
•
•
アクセスするドメイン制限
– Ajaxでアクセスできるのは、同じドメイン内に限定される
文字コード
ブラウザのローカルキャッシュ
XMLデータの取り扱い
Copyright © 2001-2005 Ariel Networks, Inc.
文字コードについて
•
日本語を扱う場合
– Ajaxでそのまま日本語を送受信すると文字化けするブラウザがある
– Formなど
• ブラウザが自動的にURIエンコードしてくれる
– Ajax
• 明示的にURIエンコードする必要がある
•
Javascriptで使用できる方法
– escape() 古いメソッドで、ブラウザにより実装が異なる
– encodeURI()とencodeURIComponent() ECMAScriptの仕様に従ったメソッド
• どんな文字コードの文字列でもUTF-8にしてエンコードする
Copyright © 2001-2005 Ariel Networks, Inc.
ブラウザのローカルキャッシュ
•
Ajaxによるサーバーへのアクセスもブラウザのキャッシュが有効になる
– → 意図しない動作や、まったく動作していないように見えてしまう
•
•
ブラウザのキャッシュの設定を無効にする
アクセス時に毎回値が異なるパラメータを追加する
– url = url + "t=“ + (new Date()).getTime();
•
リクエストヘッダに細工をする
– xmlHttpRequest.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00
GMT");
Copyright © 2001-2005 Ariel Networks, Inc.
XMLデータの取り扱い
•
•
responseXMLはXMLオブジェクト
responseTextはテキストデータ
•
XMLデータをJavascriptで扱うにはDOM操作が必要
– 取り扱いにくい
responseXML <root>
<test1>hello1</test1>
<test2>hello2</test2>
</root>
alert(responeXML.firstChild.nodeValue);
•
JSON（JavaScript Object Notation）
var JSONObject = {
"test1": "hello1“,
"test2": "hello2“
};
alert(JSONObject.test1);
•
JKL.ParseXML
http://www.kawa.net/works/js/jkl/parsexml.html
Copyright © 2001-2005 Ariel Networks, Inc.
Ajax対応ライブラリ
•
•
•
prototype.js
– http://prototype.conio.net/
jslb_ajax.js
– http://jsgt.org/mt/archives/01/000409.html
Survey of AJAX/JavaScript Libraries
– http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries
Copyright © 2001-2005 Ariel Networks, Inc.
Q&A
Copyright © 2001-2005 Ariel Networks, Inc.

Download Report