フロントエンド - JavaScript/jQuery - ajax通信

[fr-sato]

■目的

jQueryでのAPIやajax通信について学びます。

■課題1

以下について調べて下さい。

• JSON
• XML
• API

  ■課題2

事前に以下の値のjSONファイルを作成し公開領域に設置して下さい。

id	name	kana
1	Java	ジャバ
2	Ruby	ルビー
3	Python	パイソン
4	Perl	パール
5	PHP	ピーエイチピー

jQueryのajax通信を用いてJSONファイルを読み込み、その内容をHTMLで表形式で出力して下さい。
また、ページ下部に「もっと見る」ボタンを設置し、ボタンが押されたら再度上記処理を実行するようにイベント処理をして下さい。

[fr-itaya]

本課題は計6時間で行います。開始時刻および中断は追ってコメントします。

---

内訳

• 課題1：1.5時間
• 課題2：4.5時間

[fr-itaya]

17：10開始、夜礼までの1時間半弱、課題1に取りかかります。

[fr-itaya]

■課題1

• Ajaxとは
  • Asyncronous JavaScript +HTMLの略。読みはエイジャックス。
  • JavaScriptでサーバーと通信しつつページの一部を書き換える手法。
• JSON
  • JavaScript Object Notationの略で、データ記述言語のひとつ。
  • JavaScriptの記法で、ハッシュや配列などプログラミング言語から扱いやすいデータ構造を記述できる。
  • Webサービスでは、下記の利点からAjax通信におけるデータフォーマットとして活用されている。
  • ブラウザでJavaScriptを実行出来る為相性が良い
  • XML(後述)と比べてデータ表現の冗長性が低い
• XML
  • EXtensible Markup Languageの略。
  • 文書やデータの意味や構造を記述するためのマークアップ言語。
  • マークアップ言語：「タグ」と呼ばれる特定の文字列で地の文に情報の意味や構造、装飾を埋め込んでいく書式をとる言語
  • XMLはユーザーが独自のタグを指定できることから、マークアップ言語を作成するためのメタ言語とも呼ばれる。
• API
  • Application Programming Interfaceの略。
  • アプリケーションが、自ら持つ機能の一部を外部アプリケーションから簡単に利用できるようにするインターフェース(機能の呼び出し手順や記述方法等を定めた仕様)のこと。
  • APIが提供されている機能は独自に開発する必要がないため、プログラムの開発を効率的に行える。
  • DOMはXMLをプログラムで利用する為のAPIのひとつ。

[fr-itaya]

12：00開始、課題2に着手します。

[fr-sasaki]

課題1OKです！

[fr-sato]

ソースとブラウザ確認しました、OKです。お疲れ様でした。