Ajax Asynchronous Java Script and XML JavascriptXML Ajax

  • Slides: 20
Download presentation

Ajaxとは • Asynchronous Java. Script and XML – 「Javascriptで」、サーバーと「非同期に」「XMLデータを」やり取りする • Ajax: A New Approach

Ajaxとは • Asynchronous Java. Script 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アクセスとの違い 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アクセスとの違い • 従来のWebアクセス Copyright © 2001 -2005 Ariel Networks, Inc.

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

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

Ajaxを使っているサイト • • • Googleサジェスト – http: //www. google. co. jp/webhp? complete=1 Googleローカル –

Ajaxを使っているサイト • • • Googleサジェスト – http: //www. google. co. jp/webhp? complete=1 Googleローカル – http: //maps. google. com/ AmazonのA 9. com – http: //a 9. com/ Banana republic – http: //www. bananarepublic. com/ Zimbra – http: //www. zimbra. com/ Copyright © 2001 -2005 Ariel Networks, Inc.

簡単な実装例 var Http. Request; function hoge(url) { if (this. XMLHttp. Request) { Http. Request

簡単な実装例 var Http. Request; function hoge(url) { if (this. XMLHttp. Request) { Http. Request = new XMLHttp. Request(); } else { Http. Request = new Active. XObject("Microsoft. XMLHTTP"); } Http. Request. onreadystatechange = ready. State. Change. Handler; Http. Request. open("GET", url, true); Http. Request. send(null); } function ready. State. Change. Handler() { if (Http. Request. ready. State == 4) { if (Http. Request. status == 200) { var obj = document. get. Element. By. Id(“fuga"); obj. inner. HTML = Http. Request. response. Text; } } } Copyright © 2001 -2005 Ariel Networks, Inc.

XMLHttp. Requestオブジェクトのメソッド 解説 abort() リクエストの中止 get. All. Response. Headers() レスポンスのヘッダをすべて取得 get. Response. Header("header. Label")

XMLHttp. Requestオブジェクトのメソッド 解説 abort() リクエストの中止 get. All. Response. Headers() レスポンスのヘッダをすべて取得 get. Response. Header("header. Label") レスポンスのヘッダ"header. Label"の値を取得 open("method", "URL"[, async. Flag[, "user. Name"[, "password"]]]) リクエストの方法、URL、同期/非同期アクセス、ユー ザ名、パスワードをセットする send(content) リクエストを送信する set. Request. Header("label", "value") リクエストのヘッダ"label/value"を指定する Copyright © 2001 -2005 Ariel Networks, Inc.

簡単なデモ Copyright © 2001 -2005 Ariel Networks, Inc.

簡単なデモ Copyright © 2001 -2005 Ariel Networks, Inc.

XMLデータの取り扱い • • response. XMLはXMLオブジェクト response. Textはテキストデータ • XMLデータをJavascriptで扱うにはDOM操作が必要 – 取り扱いにくい response. XML <root>

XMLデータの取り扱い • • response. XMLはXMLオブジェクト response. Textはテキストデータ • XMLデータをJavascriptで扱うにはDOM操作が必要 – 取り扱いにくい response. XML <root> <test 1>hello 1</test 1> <test 2>hello 2</test 2> </root> alert(respone. XML. first. Child. node. Value); • JSON(Java. Script Object Notation) var JSONObject = { "test 1": "hello 1“, "test 2": "hello 2“ }; alert(JSONObject. test 1); • JKL. Parse. XML 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 –

Ajax対応ライブラリ • • • prototype. js – http: //prototype. conio. net/ jslb_ajax. js – http: //jsgt. org/mt/archives/01/000409. html Survey of AJAX/Java. Script Libraries – http: //wiki. osafoundation. org/bin/view/Projects/Ajax. Libraries Copyright © 2001 -2005 Ariel Networks, Inc.

Q&A Copyright © 2001 -2005 Ariel Networks, Inc.

Q&A Copyright © 2001 -2005 Ariel Networks, Inc.