Learn Http Requests & Responses for Test Engineer
•
2 likes•905 views
この講座の目的 WebアプリケーションにおけるHTTP通信周辺の機能と役割を理解し、 それらに起因する（orしない）問題切り分けを可能にすること この講座のゴール HTTPの基本概念の理解 HTML/CSS/JavaScriptとブラウザ HTTPサーバーとアプリケーションサーバーの役割の理解 HTTP Cookie, HTTP ヘッダー,リクエストメソッドの概念理解 SSL（https）についての概念理解 Ajax, 非同期通信とJSONの理解 講座の理解に要求される技術レベル http://~~といわれて、どこに記述されているものかわかっている APサーバー, HTTPサーバーという単語を聞いたことがあり、 おそらくそれを使ったであろうサービスを開発・テストした自覚がある
More Related Content
What's hot
Viewers also liked
Viewers also liked (16)
Similar to Learn Http Requests & Responses for Test Engineer
Similar to Learn Http Requests & Responses for Test Engineer (20)
Learn Http Requests & Responses for Test Engineer
- 2. はじめに この講座の目的 ● Webアプリケーションにおける HTTP通信周辺の機能と役割を理解し、 それらに起因する（orしない）問題切り分けを可能にすること この講座のゴール ● HTTPの基本概念の理解 ● HTML/CSS/JavaScriptとブラウザ ● HTTPサーバーとアプリケーションサーバーの役割の理解 ● HTTP Cookie, HTTP ヘッダー,リクエストメソッドの概念理解 ● SSL（https）についての概念理解 ● Ajax, 非同期通信とJSONの理解 講座の理解に要求される技術レベル ● http://~~といわれて、どこに記述されているものかわかっている ● APサーバー, HTTPサーバーという単語を聞いたことがあり、 おそらくそれを使ったであろうサービスを開発・テストした自覚がある
- 3. ここまで理解しているとこんなケースで役立ちます ● 特定のブラウザで動かない ● クリックしたけど反応がない ● 文字化けする ● 文字化けが再現しない ● Internal Server Errorとか出てますけど ● 予定一括が動かない ● JavaScriptエラーが発生する
- 5. HTTPとは 要約 ● HTTPは情報をやりとりするためのルールである。 ● HTTPはリクエストメソッドやエラーコード、ヘッダーなど を持つことで、単純なデータのやり取り以上のことができる ● 具体的には、データに種類をつけてそれを要求することで、 欲しい種類のデータをやりとりすることが出来る RFC 2616の概要より ハイパーテキスト転送プロトコル(HTTP) は、分散・共同体ハイパーメディア情報システムのアプリケーションレベルプロトコルである。このプロトコルは、リクエス トメソッド、エラーコード、ヘッダ等の拡張を経て、ネームサーバや分散オブジェクト管理システム等、ハイパーテキストのために使う以上に多くの作業のために用 いる事ができる、一般的でステートレスなプロトコルである。HTTP の特徴として、データ表現のタイプ付け、及びネゴシエーションがあり、これによって転送され るデータの独立性が確立されるようなシステムが構築できる。
- 7. HTTPのもう少し具体的なイメージ 日本語のページを送りますね 日本語でみてます スマホで見ています！ スマホ用のページを送ります データ送るから必要な結果 ください！ 送信先が見つかりませんでした
- 9. まとめ ● サーバーとクライアントのやりとりをやりとりするルールがHTTP ● HTTPでは通信の種類や自身の情報（言語やブラウザ情報などなど）を 指定することができる ● クライアントは、送られてきたデータを元に処理を行う
- 11. HTML Hyper Text Markup Language の略。 すごい版テキストをつくるマークアップ言語。 基本的なブラウザの表示内容や構造を扱います。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>こんにちは世界</h1> <p>これがHMTLです</p> </body> </html>
- 12. CSS Cascading Style Sheet の略。 多段的に適用出来るスタイル。 HTMLに対してレイアウトや色など、装飾を行う役割を果たします。 HTMLにも一部装飾の機能がありますが、それを分離してCSSに持たせようというのが 基本的な思想です。 h1 { color : red; } p { padding : 20px; } #hoge p { padding : 30px; }
- 17. HTTPサーバーの役割 HTTPサーバーは、リクエストされた内容を返すときに、一緒にレスポンスコードというも のも返します。通常3桁の数字で、代表的なものとしては以下のようなものがあります。 この4つくらいは覚えておいて損はないでしょう ● 200 : OK （要求されたものがあったので送ります。) ● 304 : not modified （あったけど更新されてないから送りません） ● 404 : not found （ファイルが見つかりません） ● 500 : Internal Server Error （アプリケーションがリクエストを処理できません）
- 18. HTTPで指定していることの細かい内容 さきほどは HTTPでは通信の種類や自身の情報（言語やブラウザ情報などなど）を 指定することができる と書きました。これについてもう少し詳しくみていきます。 具体的には ● HTTPヘッダー ● リクエストメソッド ● HTTP Cookie について説明していきます。
- 19. HTTPヘッダーについて HTTPヘッダーにはリクエストヘッダーとレスポンスヘッダーがあります。 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:ja,en-US;q=0.8,en;q=0.6 Connection:keep-alive Cookie:JSESSIONID.277bd7cd=cf082a4aa199a341aeb166d1449e6b0f; screenResolution=1920x1080; PLAY_SESSION=717aac686ee3eb6e4de0e2a9423a4ac0fea8179e-%00username%3Amoriyama_t%40worksap.co.jp%00%00___AT% 3A01e109cace32485819c49eddc96900d247796eeb%00 Host:shurosvr14:9010 Referer:http://shurosvr14:9010/ User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 e.g:モチベーション爆発日報に Chromeからリクエストを送ったヘッダーはこうなります。
- 20. リクエストヘッダーとして付加される内容 コンテンツの種類 : HTMLなのかjavascriptなのかといった情報 文字コード ：要求している文字コード 言語 ：日本語、フランス語 ブラウザの情報 ：レンダリングエンジンやバージョン リクエストメソッド ：GET, POST クッキー情報 ：キャッシュされた情報 お作法的なものもありますが、以下の様な内容を送っています。
- 26. 非同期通信とは 概念的説明 1 ネットワーク クライアント サーバー 通信を送って返ってくるまで はなにもできない！ 非同期通信の前に同期通信とはなにかを説明します。 通常のHTTP通信は同期通信ですが、リクエストを送信するとレスポンスが返ってくる （≒ページが再描画される）までは処理を継続できません。 （たとえ送信ボタンを押してから別の入力項目を操作しても、ページが再描画されると反映されてませんよね） これがリクエストとレスポンスが同期している状態です。
- 27. 非同期通信とは 概念的説明 2 ネットワーク クライアント サーバー 通信を送っても操作できる よ！ 非同期通信ではその逆で、リクエストを飛ばしてもレスポンスを待つことなく 処理を行うことができます。 といってもピンとこないので例を出してみます。
- 30. 非同期通信の意味的説明 画面遷移を行うことなく、一部のコンテンツのみの更新や、サーバーへのデータ反映 を行うことが出来ます。 これにより、ユーザーが意識しないまま処理を行ったり、ページ遷移を減らすことでスト レスを軽減したり、高速に処理ができるようになります。 たとえば以下のようなものは非同期通信を利用することで高いUXを実現しています。 ● 自動セーブ機能 ● ページ送り（一部を描画することでコンテンツ量を減らし高速化） ● 次のページの先読み（予め裏でコンテンツをロードしておく）
- 31. Ajaxについて Asynchronous JavaScript + XMLの略です。 HTTPの非同期通信は多くの場合Ajaxによって行われています。 ちなみに別にXMLじゃなくてもいいです。 要するに、JavaScriptを利用して非同期通信を行うしくみのことを指しています。
- 34. ここまで理解しました。何がわかる？ ● クリックしたけど反応がない =>ブラウザはちゃんとサーバーにリクエストを送信出来てるかな？ => HTTPサーバーはきちんと受け取ってる？レスポンスコードは？ Access.logをみてみよう => JavaScriptは返却結果をきちんと描画できてるかな？
- 35. ここまで理解しました。何がわかる？ ● 文字化けする ● 文字化けが再現しない => ブラウザは文字コードをどう”解釈”してる？ => リクエストとレスポンスの文字コード指定はどうなっているかな？ => どの通信で文字化けしてる？全部？非同期だけ？ => 他のブラウザだとどうなるかな？
- 36. ここまで理解しました。何がわかる？ ● Internal Server Errorとか出てますけど => これはサーバーがリクエストを処理出来ない状態だなぁ。 サーバーが異常終了してしまっているのかな？
- 37. ここまで理解しました。何がわかる？ ● ボタンを教えてもレスポンスが動かない =>どの処理だろう？非同期通信かな？ => Ajaxリクエストはきちんと飛んでいるかな？ => レスポンスは帰ってきてるかな？ 開発者ツールで見てみよう。
- 38. ここまで理解しました。何がわかる？ ● JavaScriptエラーが発生する => ブラウザの解釈に違いはあるかな？ => 取得したJavaScriptはきちんと更新されてる？304が返ってきてない？
- 40. 参考文献 Webを支える技術 -HTTP、URI、HTML、 そしてREST (WEB+DB PRESS plus) 技術評論社 (2010/4/8) Studying HTTP http://www.studyinghttp.net/ いまさら聞けない、“Ajax”とは何なのか？ (1/3) - ＠IT http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html 3 Minutes Networking http://www5e.biglobe.ne.jp/%257eaji/3min/