jQueryを使ったAjax入門

JSON/JSONPとは?

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Ajaxを実装する上で利用することになるJSONやJSONPについて、それぞれがどういうものなのかについて簡単にご紹介致します。
講師:
04:20

字幕

このレッスンではAjax を実装する上で利用することになるJSON や JSONP についてそれぞれがどういうものなのかについて簡単にご紹介していきます。それでは見ていきましょう。まずは JSON の方からです。JSON とは JavaScript Object Notation の略となります。そして、様々な情報を格納したり受け渡しする為のデータ形式を表します。要するに、JSON というのは様々な情報やデータが格納された1つのデータの塊のようなものですね。そして、多くのプログラミング言語で利用可能となっています。そして、Ajax 利用時のレスポンスデータとしてよく利用されます。要するに、Ajax を利用してそして通信を発生させてそしてその通信の結果として戻ってくるデータがこの JSON のデータ形式になっているということです。それでは、この JSON のファイルを実際に見てみたいと思います。今こちらの画面に映っているのがJSON 形式のデータとなります。このような形式をしています。ご覧いただいて分かるように様々なデータがこのように格納されているのが分かりますね。では次に、JSONP というものについて見ていきたいと思います。 JSONP は JSON with padding の略となります。そして、この JSONP はデータ形式の名前ではなくむしろ手法の名前となっています。JSON と JSONP で名前が非常に似ているのでJSONP も1つのデータ形式のようなイメージを持ってしまいますがJSONP は、あくまで JSON がベースになっています。それでは次を見ていきましょう。この JSONP は、Ajax を使って別ドメインとのデータの通信時に利用します。先程ご紹介した JSON はもしその JSON 自体が他のドメインのサーバーに設置されていた場合実は Ajax を使ってそのままその JSON のデータを取得することが基本的にはできなくなっています。そういった他のサイトからデータを取得することを許可していればJSON でも大丈夫なのですがそういった設定がされていない場合JSON ではなくてこの JSONP というものを使って別のドメインとのデータのやり取りをAjax で行うといった形になります。そして、この JSONP はJSON の内容を関数の引数として呼び出す手法となっています。この部分が少し分かりにくいので実際にこの JSONP 形式のファイルを見てみたいと思います。 今画面に映っているのがJSONP 形式のファイルとなっています。こちらの部分ですね。こちらの部分は先程確認した JSON と同じデータ形式になっています。但し、違うところがこちらの部分にありますね。こちらの部分はJavaScript の関数となっていてそしてこの ( ) の中この ( ) の中は引数ですがこの引数の中に、この JSON のデータが格納されているといった状態になります。このような形、つまり JSONP 形式でファイルを用意することによってこのファイルを設置しているサーバーが自分のサイトとは別のドメインだったとしてもAjax を使ってこちらのデータを取得してくることが可能となります。それではスライドに戻りましょう。以上でレッスンは終了です。今回は Ajax を実装する上で利用することになる JSON やJSONP についてそれぞれがどういうものなのかについて簡単にご紹介いたしました。

jQueryを使ったAjax入門

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

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

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

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

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