Copyright © Ariel Networks, Inc. AJAX 勉強会 アリエル・ネットワーク株式会社

Copyright © Ariel Networks, Inc. Ajax とは Ajax と通常の Web アクセスとの違い Ajax のメリット、デメリット Ajax を使う Ajax を使っているサイト 簡単な実装例 Ajax を使う上での注意 Ajax 対応ライブラリ

Copyright © Ariel Networks, Inc. Ajax とは Asynchronous JavaScript and XML – 「 Javascript で」、サーバーと「非同期に」「 XML データを」やり取りする Ajax: A New Approach to Web Applications – – （日本語訳）

Copyright © Ariel Networks, Inc. Ajax と通常の Web アクセスとの違い 通常の Web アクセス –GET や POST による HTTP リクエストをサーバーに投げる – リクエストに応じてサーバーから返される HTML をブラウザに表示する Ajax –JavaScript を使って適宜バックグラウンドでサーバーと通信する – サーバーから XML データを取得し、ダイナミック HTML で表示を更新する

Copyright © Ariel Networks, Inc. Ajax と通常の Web アクセスとの違い

Copyright © Ariel Networks, Inc. Ajax と通常の Web アクセスとの違い 従来の Web アクセス

Copyright © Ariel Networks, Inc. Ajax と通常の Web アクセスとの違い Ajax の場合

Copyright © Ariel Networks, Inc. Ajax のメリット、デメリット メリット – 柔軟な動作の RIA(Rich Internet Applicatoin) を実現できる – 動作させるためにプラグインが必要ない – 商用の開発環境が必要ない デメリット – ブラウザによって動作に微妙な違いがある – ブラウザのローカルキャッシュが Ajax の動作に影響を与える場合がある –Ajax でアクセスできるのは、元ページと同じドメイン内の URL に限られる – プログラムの中身がユーザーに丸見えになる （メリットでもある ? ）

Copyright © Ariel Networks, Inc. Ajax を使っているサイト Google サジェスト – Google ローカル – Amazon の A9.com – Banana republic – Zimbra –

Copyright © Ariel Networks, Inc. Ajax を使う Ajax を用いた実装とは、 –JavaScript で XMLHttpRequest オブジェクトを利用 – ページ全体の読み込みとは非同期にサーバーと通信 – ダイナミック HTML を利用してページの必要な部分だけを書き換える XMLHttpRequest オブジェクト –IE5.0 以降 (1999 年 3 月 ) –Mozilla 1.0 以降 (2002 年 6 月 ) 昔からある技術を組み合わせて、 Ajax という名前を付けただけ

Copyright © 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 © Ariel Networks, Inc. XMLHttpRequest オブジェクトのメソッド メソッド解説 abort() リクエストの中止 getAllResponseHeaders() レスポンスのヘッダをすべて取得 getResponseHeader("headerLabel") レスポンスのヘッダ "headerLabel" の値を取得 open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) リクエストの方法、 URL 、同期 / 非同期アクセス、 ユーザ名、パスワードをセットする send(content) リクエストを送信する setRequestHeader("label", "value") リクエストのヘッダ "label/value" を指定する

Copyright © 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 © Ariel Networks, Inc. 簡単なデモ

Copyright © Ariel Networks, Inc. Ajax を使う上での注意 アクセスするドメイン制限 –Ajax でアクセスできるのは、同じドメイン内に限定される 文字コード ブラウザのローカルキャッシュ XML データの取り扱い

Copyright © Ariel Networks, Inc. 文字コードについて 日本語を扱う場合 –Ajax でそのまま日本語を送受信すると文字化けするブラウザがある –Form など ブラウザが自動的に URI エンコードしてくれる –Ajax 明示的に URI エンコードする必要がある Javascript で使用できる方法 –escape() 古いメソッドで、ブラウザにより実装が異なる –encodeURI() と encodeURIComponent() ECMAScript の仕様に従ったメソッド どんな文字コードの文字列でも UTF-8 にしてエンコードする

Copyright © Ariel Networks, Inc. ブラウザのローカルキャッシュ Ajax によるサーバーへのアクセスもブラウザのキャッシュが有効になる –→ 意図しない動作や、まったく動作していないように見えてしまう ブラウザのキャッシュの設定を無効にする アクセス時に毎回値が異なるパラメータを追加する –url = url + "t=“ + (new Date()).getTime(); リクエストヘッダに細工をする –xmlHttpRequest.setRequestHeader("If-Modified-Since", "Thu, 01 Jun :00:00 GMT");

Copyright © Ariel Networks, Inc. XML データの取り扱い responseXML は XML オブジェクト responseText はテキストデータ XML データを Javascript で扱うには DOM 操作が必要 – 取り扱いにくい responseXML alert(responeXML.firstChild.nodeValue); JSON （ JavaScript Object Notation ） var JSONObject = { "test1": "hello1“, "test2": "hello2“ }; alert(JSONObject.test1); JKL.ParseXML hello1 hello2

Copyright © Ariel Networks, Inc. Ajax 対応ライブラリ prototype.js – jslb_ajax.js – Survey of AJAX/JavaScript Libraries –

Copyright © Ariel Networks, Inc. Q&A