Post on 05-Jul-2015
Webページで学ぶJavaScript 2013 第7回
tyage@KMC7/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);} =>menuthumb
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/
● 次回は来週です