jQueryを使ったAjax入門

Ajaxの実行とレスポンスデータの取得

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ったAjaxで「livedoorお天気WEBサービス」のAPIにアクセスするにあたり、実際にAjaxを実行して、レスポンスデータを取得する方法について解説致します。
講師:
03:12

字幕

このレッスンでは jQuery を使ったAjax で Livedoor お天気 Web サービスのAPI にアクセスするにあたり実際に Ajax を実行してレスポンスデータを取得する方法について解説していきます。まずはダウンロードしてきたこちらの頭が 04_05 から始まるフォルダーの中に入っているこれらの3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。さて、今回は実際にAjax でLivedoor お天気 Web サービスにリクエストを送信して、そしてその結果を取得してみたいと思います。今回はこちらの done の部分ですね。要するに Ajax のリクエストが成功した場合こちらの data という変数に対してその結果の Json が入ってきますのでそのデータをブラウザーのコンソールに表示させるようにconsole.log という命令を使って此方の変数 data の中身をコンソールに出力するようにしています。それでは実際にこれら3つのファイルをWeb サーバーに設置して実際にその動作を確認してみたいと思います。 これがそれらのファイルを Web サーバーに設置して、そしてその中のindex.html ファイルにブラウザーでアクセスしてる状態です。まずはコンソールを確認するためにブラウザーの開発ツールを起動しましょう。Firefox の場合はこちらのボタンをクリックして、そして「開発ツール」をクリック、そしてこちらの「Web コンソール」をクリックします。するとこの様な画面が表示されてきます。それでは実際に Ajax を使ってLivedoor お天気 Web サービスにリクエストを送信してみたいと思います。こちらのボタンをクリックします。するとこの様に「成功」というダイアログが表示されてそして OK ボタンを押すとこの様にコンソールの部分にその結果が表示されてきました。そしてこちらのオブジェクトをクリックするとこの様にその Json の中身を確認することができます。この Json の中身をクリックしていくとこの様に様々なデータが格納されているのがわかりますね。この Json のデータの中身ですが詳しくはこの Livedoor お天気 Web サービスの仕様書で確認することができます。それではそちらを確認してみましょう。 これがそのLivedoor お天気 Web サービスの仕様書のページになっていますがこのレスポンスデータの詳しい説明に関してはこちらのページの中のこの「レスポンスフィールド」以下の部分で具体的に説明がされています。これと照らし合わせながら実際に自分が利用したい情報にアクセスしていきます。以上でレッスンは終了です。今回は jQuery を使った Ajax でLivedoor お天気 Web サービスのAPI にアクセスするにあたり実際に Ajax を実行してレスポンスデータを取得する方法について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。