Ajax2

1
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Ajaxによるデータ連携
ここからはHTMLとPHPを連携させ、⼊入⼒力力されたメールアドレスに
メールを送るなどの⾼高度度な処理理を⾏行行っていきましょう。
その際にAjaxと呼ばれる⾮非同期通信技術を利利⽤用すると
ユーザーによって画⾯面の遷移がない、スムーズなシステムを
実現することができます。

2
Ajaxとは
l  Ajax(エイジャックス)とは
-  JavascirptとXMLを利利⽤用した⾮非同期通信の意味
-  Asynchronous(⾮非同期) JavaScript + XML の略略
-  JSがPHPからXMLという形式でデータを受け取る
-  現代ではXMLの他、JSON(ジェイソン) と呼ばれる
データ形式もよく利利⽤用される
サーバークライアント
ネットワークネットワーク
ソフトウェア
php等は
サーバーで実⾏行行される
JavaScriptは
ブラウザで実⾏行行される
結果をXML形式
で貰う！
復復習

3
XML(1/2)
l  XML
-  EXtensible Markup Languageの略略
ü extensible: 『拡張可能な』の意
ü HTMLはタグの意味があらかじめ決められているが、
（例例：h2、table、img）　　　　　　　　　　　　XMLは
タグを独⾃自に創ることができる
ü XMLはツリー構造で表せる
-  次のURLをブラウザで表⽰示してみよう！
-  http://bjin.me/api/?type=rand&count=5&format=xml
-  5⼈人の美⼥女女の情報をxml形式で下さいという意味
-  「美⼥女女画像検索索API」より
»  http://ma8.mashupaward.jp/apis/73

4
XML(2/2)
l  XMLの構造はツリー構造
-  左のXMLは右のツリーの様に表せる
-  categoryというタグの中⾝身が名前になっている
ü category = 名前とタグの意味を⾃自分で決められる
rss channel
title
link
description
・・・
item
id
category
thumb
・・・
item
id
category
thumb
・・・

5
l  JSON
-  JavaScript Object Notationの略略
ü XMLに⽐比べて⼈人間が理理解しやすいとされている形式
ü また、XMLと⽐比べるとデータ量量が少ないのも特徴です。
ü JSONはexcelのような表形式で表せる
-  次のURLをブラウザで表⽰示してみよう！
-  http://bjin.me/api/?type=rand&count=5&format=json
-  5⼈人の美⼥女女の情報をjson形式で下さいという意味
JSON(1/2)

6
JSON(2/2)
l  JSONの構造は表形式
-  { } が１つの⾏行行を表している
-  1⾏行行⽬目のcategoryの列列に「仲間由紀恵」というデータが⼊入っている
-  Excelで表すと以下のようなイメージ
ü JSONの⽅方が理理解しやすいと思うため、講座はJSONで進める

7
JSONデータの作成(1/2)
l  PHPでJSONデータを作成する
-  少し難しいですが、excelの表を作っていくイメージです
<?php
$result[] = array(
'id'=> 1,
'name' => "Jun Chiba",
'email' => "chiba@heart-quake.com"
);
$result[] = array(
'id'=> 2,
'name' => "Jiro Muroya",
'email' => "muroya@heart-quake.com"
);
header('Content-type: application/json');
echo json_encode($result);
?>
idの列列に1,
nameの列列に Jun Chiba
emailの列列に・・・
という意味になる。
※array(アレイ) = 配列列
1つのarrayがexcelの
1⾏行行を表すイメージ
$resultがexcelの表のイメージ
表をJSON形式に変換して
画⾯面に表⽰示せよ！

8
JSONデータの作成(2/2)
l  実⾏行行結果
-  先ほどと同様にJSON形式のデータが表⽰示された
-  excelで表すとこういうイメージ

9
JSONデータの受け取り(1/2)
l  JQueryでJSONを受け取る
-  受け取ったデータを表⽰示する (HTML側)
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready( function() {
$("button").click(function(){
$.getJSON(
"return_json.php",
function(json){
alert(”0人目の名前: ” + json[0][”name”]);
}
);
});
});
</script>
</head><body>
<button>情報取得！</button>以下省略
phpから取得できたJSONデータが
jsonに⼊入ってるから
1⾏行行⽬目 = プログラムでは0⾏行行⽬目
のnameの列列を表⽰示して！

10
JSONデータの受け取り(2/2)
l  実⾏行行結果
-  1⾏行行⽬目にはのnameの列列には「Jun Chiba」が⼊入っているため
(プログラミングでは0⾏行行⽬目と考える) Jun Chibaが表⽰示される

11
お疲れ様でした！！

Ajax2

More Related Content

Viewers also liked

Similar to Ajax2

More from Jun Chiba

Ajax2