Webページで学ぶ
JavaScript 2013 第7回
tyage@KMC
7/2
こんばんは〜〜〜
もう、7月なんですね
先週やったこと
● jQueryでプロフィールページ作ってみたり
今日の予定
● Ajaxをしましょう
● ついでにHTTP通信についてもちょっとだけ
じゃあさっそく行ってみましょうか
JavaScriptで
HTTP通信がしたい
● ブラウザ上のJavaScriptにもHTTP通信機能が
備わっており、俗にAjaxと言われています
● ブラウザ上で非同期なHTTP通信を行うことがで
きて便利
HTTP通信?
● 僕達は、ブラウザとWebサーバーがHTTP通信
をすることでWebページを見ています
● 「http://ほげほげ〜〜」みたいなのはHTTP通
信するための宣言になってる
● Dev Toolsのネットワークタブを見てみよう!
よくある図
(´・ω・`)
 / つ/ ̄ ̄ ̄/   
 ̄ ̄\/___/
人間 ブラウザ KMCのWebサーバ
よくある図
(´・ω・`)
 / つ/ ̄ ̄ ̄/   
 ̄ ̄\/___/
人間 ブラウザ KMCのWebサーバ
URLに
http://kmc.gr.jp/
よくある図
(´・ω・`)
 / つ/ ̄ ̄ ̄/   
 ̄ ̄\/___/
人間 ブラウザ KMCのWebサーバ
URLに
http://kmc.gr.jp/
HTTPリクエストが
送られる
GET / HTTP/1.1
....
よくある図
(´・ω・`)
 / つ/ ̄ ̄ ̄/   
 ̄ ̄\/___/
人間 ブラウザ KMCのWebサーバ
URLに
http://kmc.gr.jp/
HTTPリクエストが
送られる
GET / HTTP/1.1
....
Responseが帰って
くる
HTTP/1.1 200 OK
...
<!DOCTYPE html>
<html>
...
よくある図
(´・ω・`)
 / つ/ ̄ ̄ ̄/   
 ̄ ̄\/___/
人間 ブラウザ KMCのWebサーバ
URLに
http://kmc.gr.jp/
HTTPリクエストが
送られる
GET / HTTP/1.1
....
Responseが帰って
くる
HTTP/1.1 200 OK
...
<!DOCTYPE html>
<html>
...
Responseを解析
して表示
よくある図
(´・ω・`)
 / つ/ ̄ ̄ ̄/   
 ̄ ̄\/___/
人間 ブラウザ KMCのWebサーバ
URLに
http://kmc.gr.jp/
HTTPリクエストが
送られる
GET / HTTP/1.1
....
Responseが帰って
くる
HTTP/1.1 200 OK
...
<!DOCTYPE html>
<html>
...
Responseを解析
して表示
ここでHTTP通信をしている
Ajax
● JavaScriptではXMLHttpRequestというオブ
ジェクトを使用すればHTTP通信ができます
● ただし、Same Origin Policyというセキュリティ上
の制約により、通信できない場合も
○ 同一ドメイン(正確にはオリジン)上での通信はOK
○ 異なるオリジンの場合は、サーバー側が許可していれば
通信できる
なんか書いてみよう
● XMLHttpRequest使ってもいいんですが、と面
倒くさいのでjQueryの機能を使いましょう
● http://api.jquery.com/category/ajax/
使用例
@pastak君が作った「MOCO'Sキッチンオリーブオ
イルAPI」を使用します
date=の後に日付を入れるとその日のMOCO'Sキッ
チンでのオリーブオイル使用量がわかる!
http://pastak.cosmio.
net/mocoDB/oliveAPI/getJson.php?
date=2013-01-15
JSON形式で提供されているのでgetJSONが使える
使用例
$.getJSON(
"http://pastak.cosmio.net/mocoDB/oliveAPI/
getJson.php?date=2013-01-15",
function(recipes) {
console.log(recipes);
}
);
補足
今回もjQueryを使っているので
<script src="jquery.js"></script>
としてjQueryのファイルを読み込みましょう
また、私達が編集するJavaScriptファイルでは以下のように記述
するとよいです
$(function() {
// ここにプログラムを書く
});
JavaScriptオブジェクト
さっきのスクリプトで帰って来たのはオブジェクト(キーを使って
値を取ってこれるもの)です
object.keyもしくはobject["key"]でプロパティを取得
recipes["2013-01-15"]でその日のレシピが取得できます
※recipes.2013-01-15はrecipes.2013 - 01 - 15となりエラー
JavaScriptオブジェクト
var obj = {
"2013-01-15": {
menu: "今日のご飯",
thumb: "サムネイルのURI"
}
};
obj["2013-01-15"]
=> {menu: "今日のご飯", thumb: "サムネイルのURI"}
JavaScriptオブジェクト
for ... in構文
var key;
for (key in obj["2013-01-15"]) {
console.log(key);
}
=>
menu
thumb
JavaScriptオブジェクト
for ... in構文
var key;
for (key in obj["2013-01-15"]) {
console.log(obj["2013-01-15"][key]);
}
=>
"今日のご飯"
"サムネイルのURI"
使用例
$.getJSON(
"http://pastak.cosmio.net/mocoDB/oliveAPI/getJson.php?date=2013-01-
15",
function(recipes) {
for (var key in recipes) {
var recipe = recipes[key];
$("h1").text(recipe.menu);
$("img").attr("src", recipe.thumb);
}
}
);
(HTML側にh1とimg要素を作っておこう)
お疲れ様でした
● 今回作ったものは以下へアップロードしましょう
○ https://www.kmc.gr.jp/~tyage/uploader/
● 次回は来週です

Webページで学ぶJavaScript2013 第7回