jQueryを使ったAjax入門

リクエストパラメータの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ったAjaxで「livedoorお天気WEBサービス」のAPIにアクセスするにあたり、そのリクエストパラメータの作成方法について解説致します。
講師:
05:00

字幕

このレッスンではJQuery を使った Ajax で「Livedoor お天気 Web サービス」のAPI にアクセスするにあたりそのリクエストパラメーターの作成方法について解説していきます。まずはダウンロードしてきたこちらの頭が 04_04 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そして、これがそれらのファイルを開いた状態です。今回はこちらの index.js ファイルをメインに解説を進めていきたいと思います。さて、今回はLivedoor お天気 Web サービスのAPI にアクセスするにあたってリクエストパラメーターを作成していくのですがまずは先に、Livedoor お天気 Web サービスの仕様書をもう一度確認してみましょう。これが、Livedoor お天気Web サービスの仕様書ですね。リクエストパラメーターを作成するにあたってはこちらの部分をまずは確認しておきます。まず、パラメーターにセットできる内容はこちらの「city」ですね。要するに、お天気情報を取得したい都市をこちらの city というパラメーターで設定します。これを設定することによって自分の好きな都市のお天気情報を取得できるということになります。 さて、こちらの city というパラメーターに設定する値ですが地域別に定義された ID 番号を指定します。そして、その ID 番号はこちらのリンクからダウンロードできるxml ファイルの中を確認することによって自分が取得したいエリアに対応するID を調べることができます。それでは一度こちらをダウンロードして取得できる xml ファイルの中身を確認してみましょう。これが、その xml ファイルとなっています。こちらのファイルの中にこのようにずらっとエリアと ID がこのように並んでいます。こちらがエリアで、こちらがその ID ですね。今回は東京のエリアを設定してみたいと思うのでこちらのファイルの中から東京を捜します。それが、ずうっと下に行ったところこちらの部分ですね。こちらの部分に東京があります。そして、東京の ID はというとこちらにありますね。東京の ID がこちら130010 となっていますので今回は city のパラメーターにこちらの 130010 をセットします。それでは先程の「Livedoor お天気Web サービス」のサイトに戻ります。次に、こちらの部分を確認してみます。こちらの部分では、そのパラメーターの使い方が書いていますね。 このように、基本の URL の末尾にID を足すと書いています。それがこちらの部分ですね。このように URL の末尾にそのパラメーターを足して送信することを「GET 送信」と言います。これとは逆に「POST 送信」というものがあるのですがPOST 送信の場合はこのように URL にパラメーターを付加させずに目に見えない形でパラメーターを送信するといった手法になります。今回は GET 送信となりますので覚えておきましょう。それでは index.js ファイルに戻ります。index.js ファイルに戻ってきました。先程確認した Livedoor お天気 Webサービスの仕様に基づいてリクエストパラメーターを作成していきましょう。注目して頂きたい部分はこちらの部分となります。まずは変数を1つ作っていきます。そして = で繋いでオブジェクト形式で値を作ります。そしてそのオブジェクトの中にはまずパラメーター名を設定します。文字列で city ですね。そしてその後に数値で先程確認した東京のエリア ID をセットしてあげています。これでオブジェクトで作成したリクエストパラメーターがこちらの変数に格納されてきます。 そしてこちらの部分こちらの部分で実際に Ajax の設定項目にこちらのリクエストパラメーターをセットしてあげています。Ajax の data という設定項目に対して先程の変数を指定してあげています。そしてこちらの type の部分では先程確認したように GET と書いてあげます。これでこの city のリクエストパラメーターをGET 送信で Ajax でリクエストすることができるようになります。以上でレッスンは終了です。今回は jQuery を使った Ajax でLivedoor お天気 Web サービスのAPI にアクセスするにあたりそのリクエストパラメーターの作成方法について解説いたしました。

jQueryを使ったAjax入門

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

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

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

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

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