Download - なんとなくjQueryでAjaxをつかってみる
Ajaxで取得したデータを並べる
• ブラウザ上で簡単にコードを書く方法を知る
• Ajaxで取得したデータをカードっぽく並べる
• オープンデータを使ってみる 「ラ・フォル・ジュルネ びわ湖 2015」に関するオープンデータについて
http://opendata.shiga.jp/lfjb2015/
jQueryでAjaxを使う基本
$.ajax({
//Ajaxの通信内容
}).done(function(data) {
//Ajaxの通信に成功した時のコード
}).fail(function(data){
//Ajaxの通信に失敗した時のコード
});
とりあえず書いてみよう$.ajax({
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
Ajaxの通信内容を決める(例)
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
ざっくり意訳すると・・・
1、通信先は「http://lfjb.biwako-hall.or.jp/
events-jsonld/」というURL
2、通信方法はGET
3、JSONのデータを取りに行く
4、10000ミリ秒を越えたら通信中断
success・error版もある
$.ajax({
//Ajaxの通信内容
}).success(function(data) {
//Ajaxの通信に成功した時のコード
}).error(function(data){
//Ajaxの通信に失敗した時のコード
});
success・error版もある
$.ajax({
//Ajaxの通信内容
}).success(function(data) {
//Ajaxの通信に成功した時のコード
}).error(function(data){
//Ajaxの通信に失敗した時のコード
});
jQuery1.8以上では 使わない!!
Ajaxとは(Wikipediaより)
Ajaxは、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。
XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。
Ajaxとは(Wikipediaより)
Ajaxは、 ウェブブラウザ内で 非同期通信とインターフェイスの構築 などを行う技術の総称。
XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。
さっきのコードを・・・$.ajax({
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
こう書き換えてみよう$.ajax({
//省略
}).done(function(data) {
for (var i = data.length - 1; i >= 0; i--) {
$('#ajax').append(data[i]["schema:name"]);
}
}).fail(function(data) {
$('#ajax').append('fail');
});
コードの意味をざっくりと
for (var i = data.length - 1; i >= 0; i--) {
//dataの長さから、iがゼロになるまで繰り返す
$(‘#ajax’).append(data[i]["schema:name"]);
//dataのi番目にある「schema:name」を表示
}
HTMLタグも書ける
for (var i = data.length - 1; i >= 0; i--) {
var html = “<p>” + data[i][“schema:name”] + “</p>”;
$(‘#ajax').append(html);
}
がっつり書いてみる
var html = "<ul>";
for (var i = data.length - 1; i >= 0; i--) {
html += "<li>" + data[i]["schema:name"] + "</li>";
}
html += "</ul>";
$(‘#ajax').append(html);
XMLHttpRequest cannot load
http://domain2.example .
Origin http://domain1.example
is not allowed by Access-Control-Allow-Origin.
これが・・・$.ajax({
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
こうなる$.ajax({
url: ‘http://lfjb.biwako-hall.or.jp/events-jsonld/?jsonp=?',
type:'GET',
dataType: ‘jsonp', jsonp:’callback’
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});