Download - HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
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