Webページで学ぶJavaScript2013 第7回

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サーバ

よくある図
(´・ω・｀)
　/ つ/￣￣￣/ 　　
￣￣＼/＿＿＿/
URLに
http://kmc.gr.jp/

よくある図
(´・ω・｀)
　/ つ/￣￣￣/ 　　
￣￣＼/＿＿＿/
URLに
http://kmc.gr.jp/
HTTPリクエストが
送られる
GET / HTTP/1.1
....

よくある図
(´・ω・｀)
　/ つ/￣￣￣/ 　　
￣￣＼/＿＿＿/
URLに
http://kmc.gr.jp/
送られる
GET / HTTP/1.1
....
Responseが帰って
くる
HTTP/1.1 200 OK
...
<!DOCTYPE html>
<html>
...

よくある図
(´・ω・｀)
　/ つ/￣￣￣/ 　　
￣￣＼/＿＿＿/
URLに
http://kmc.gr.jp/
送られる
GET / HTTP/1.1
....
くる
HTTP/1.1 200 OK
...
<!DOCTYPE html>
<html>
...
Responseを解析
して表示

よくある図
(´・ω・｀)
　/ つ/￣￣￣/ 　　
￣￣＼/＿＿＿/
URLに
http://kmc.gr.jp/
送られる
GET / HTTP/1.1
....
くる
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となりエラー

var obj = {
"2013-01-15": {
menu: "今日のご飯",
thumb: "サムネイルのURI"
}
};
obj["2013-01-15"]
=> {menu: "今日のご飯", thumb: "サムネイルのURI"}

for ... in構文
var key;
for (key in obj["2013-01-15"]) {
console.log(key);
}
=>
menu
thumb

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回

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Webページで学ぶJavaScript2013 第7回

Ähnlich wie Webページで学ぶJavaScript2013 第7回 (20)

Mehr von 京大マイコンクラブ

Mehr von 京大マイコンクラブ (20)