1. HTML5など
勉強会 Vol. 5
S.2: 入門JavaScript [非同期通信]
2011/11/29 @ 某社
System Management Headquaters
George Harada

2. 提 供
勉強会スタッフ
（ボランティア）
システム統括本部

3. いきなりですが

4. 実際にやってみる
-- 社内URL --
上記のURLに
"Google Chrome" でアクセスして、
会社のメールアドレスを入力

5. 今回の内容

6. ページ遷移せずに、コンテンツを非同期
に読み込み、ページを書き換える技術
実際に扱うデータは、「XML」だけでなく
「JSON」や単なる「テキスト」であることも多い。
非同期処理の利点: UX向上
Ajax Asynchronous JavaScript + XML

7. 非同期通信を実現する、事実上の標準手法
var xhr = new XMLHttpRequest;
// method GET
xhr.open('GET', 'http://www.w3.org/dummy.php?param=abc');
xhr.send(null);
// method POST
xhr.open('POST', 'http://www.w3.org/dummy.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param=abc');
// event handler
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
};
XHR: XMLHttpRequest
readyState 意味
0 open() が呼び出される前
1 send() が呼び出される前
2 サーバからのレスポンスが返ってくる前
3 サーバからのレスポンスを受信中
4 サーバからのレスポンスを受信完了

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

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

10. JavaScriptにおけるオブジェクトの
表記法を応用したデータ形式
http://twitter.com/statuses/public_timeline.json
JavaScriptでの扱いが簡単なため、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

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

12. ・現在 一般的な手法
��JSONP
・比較的 新しい手法
��XMLHttpRequest Level 2
クロスオリジン通信

13. sample
JSONP: -- 社内URL --
XHR2: -- 社内URL --
※社内ネットワークからのみ認証無しで利用可能

14. 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

15. 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

16. クロスオリジン通信を行って、異なる
ドメインからデータを取得・提供する事は、
セキュリティリスクを伴う可能性がある
■信頼できるドメインとだけ通信する （通信を許可する）
■かつて安全だったドメインが、今も安全という保証はない
■むやみやたらにクロスオリジン通信をしない
セキュリティ

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

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

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

20. tthhaannkkss !!

21. Special Thanks to
Operation
Operation
Operation
Operation
Operation
OA Support 情報システム室
順不同 敬称略

22. 参考文献等
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