More Related Content
Similar to HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
Similar to HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信] (20)
More from George Harada (12)
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
- 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 サーバからのレスポンスを受信完了
- 11. ・オリジンとは
��プロトコル + ドメイン + ポート番号
・クロスオリジンとは
��異なるオリジンに対する通信
セキュリティの観点から、原則として同じオリジンの場合のみ、
通信や処理が許可される。 → 「同一オリジンポリシー」
「Ajax」の他、「Cookie」や「localStorage」など、多くに適用。
クロスオリジン Cross-Origin
- 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
- 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