HTML5など 勉強会 Vol. 5 S.2: 入門JavaScript [非同期通信]

2011/11/29 @ 某社

System Management HeadquatersGeorge Harada

提 供

勉強会スタッフ（ボランティア）

システム統括本部

いきなりですが

実際にやってみる-- 社内URL --

上記のURLに"Google Chrome" でアクセスして、

会社のメールアドレスを入力

今回の内容

ページ遷移せずに、コンテンツを非同期に読み込み、ページを書き換える技術

実際に扱うデータは、「XML」だけでなく「JSON」や単なる「テキスト」であることも多い。

非同期処理の利点: UX向上

Ajax Asynchronous JavaScript + XML

非同期通信を実現する、事実上の標準手法var xhr = new XMLHttpRequest;// method GETxhr.open('GET', 'http://www.w3.org/dummy.php?param=abc');xhr.send(null);// method POSTxhr.open('POST', 'http://www.w3.org/dummy.php');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  xhr.send('param=abc');// event handlerxhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert(xhr.responseText); } }};

XHR: XMLHttpRequest

readyState 意味

0 open() が呼び出される前

1 send() が呼び出される前

2 サーバからのレスポンスが返ってくる前

3 サーバからのレスポンスを受信中

4 サーバからのレスポンスを受信完了

sample-- 社内URL --

※社内ネットワークからのみ認証無しで利用可能

文書やデータの意味や構造を記述するためのマークアップ言語の一つhttp://twitter.com/statuses/public_timeline.xml統一的な記法を用いながら独自の意味や構造を持ったマークアップ言語を作成することができるため、ソフトウェア間の通信・情報交換に用いるデータ形式や、様々な種類のデータを保存するためのファイルフォーマットなどの定義に使われている。

XML Extensible Markup Language

JavaScriptにおけるオブジェクトの表記法を応用したデータ形式http://twitter.com/statuses/public_timeline.jsonJavaScriptでの扱いが簡単なため、WebアプリやAjaxなどでプログラム間のデータ交換フォーマットとして多用されている。// JSON形式の文字列(json_string) を JavaScriptのオブジェクト(obj) に変換するvar obj = JSON.parse(json_string);

// JavaScriptのオブジェクト(obj) を JSON形式の文字列(json_string) に変換するvar json_string = JSON.stringify(obj);

JSON JavaScript Object Notation

・オリジンとは��プロトコル + ドメイン + ポート番号

・クロスオリジンとは��異なるオリジンに対する通信セキュリティの観点から、原則として同じオリジンの場合のみ、通信や処理が許可される。 → 「同一オリジンポリシー」「Ajax」の他、「Cookie」や「localStorage」など、多くに適用。

クロスオリジン Cross-Origin

・現在 一般的な手法��JSONP

・比較的 新しい手法��XMLHttpRequest Level 2

クロスオリジン通信

sampleJSONP: -- 社内URL -- XHR2: -- 社内URL --

※社内ネットワークからのみ認証無しで利用可能

JSONだけでなく、（JSONを使う）命令の実行までをAPIレスポンスで行う手法http://twitter.com/statuses/public_timeline.json?callback=func

script要素は、src属性に別ドメイン（クロスオリジン）のJavaScriptファイルを指定しても読み込めることを利用する。var elem = document.createElement('script');elem.charset = 'UTF-8';elem.src = 'http://twitter.com/statuses/public_timeline.json?callback=func';document.querySelector('head').appendChild(elem);

JSONP JSON with Padding

W3C が仕様策定中の XHR Level 2ではクロスオリジン通信が可能http://www.w3.org/TR/XMLHttpRequest2/クライアント側のJSは、原則として XHR Level 1 と同じでOK。APIサーバ側で、クロスオリジン通信の許可を設定する。// 通信を許可する場合、「アクセス元のオリジン」をレスポンスヘッダで返すheader('Access-Control-Allow-Origin: http://www.w3.org');

// カスタムヘッダを許可する場合、「許可するヘッダ名」をレスポンスヘッダで返すheader('Access-Control-Allow-Headers: X-CUSTOM-HEADER');

XMLHttpRequest Level 2

クロスオリジン通信を行って、異なるドメインからデータを取得・提供する事は、セキュリティリスクを伴う可能性がある

■信頼できるドメインとだけ通信する （通信を許可する）

■かつて安全だったドメインが、今も安全という保証はない

■むやみやたらにクロスオリジン通信をしない

セキュリティ

これですべてのコンテンツ終了

勉強会スタッフ絶賛募集中です

また次回お会いしましょう

tthhaannkkss !!

Special Thanks toOperationOperationOperationOperationOperation

OA Support 情報システム室順不同 敬称略

参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541

JavaScript- http://www.amazon.co.jp/パーフェクトJavaScript-PERFECT-4-井上-誠一郎/dp/477414813X- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541

Zen-Coding- http://code.google.com/p/zen-coding/- http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn- http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn