なんとなくjQueryでAjaxをつかってみる

なんとなく.js jQueryでajax 2015/ 4/ 9 なんとなく.言語 岡本秀高

普通ならここで 自己紹介だけど・・・

内輪だけだし、 いらんよねw

今回のゴール

Ajaxで取得したデータを並べる • ブラウザ上で簡単にコードを書く方法を知る • Ajaxで取得したデータをカードっぽく並べる • オープンデータを使ってみる 「ラ・フォル・ジュルネ びわ湖 2015」に関するオープンデータについて http://opendata.shiga.jp/lfjb2015/

• http://opendata.shiga.jp/lfjb2015/

今日の流れ • ブラウザ上でコードをテストする • Ajaxでの通信を試みる • 取得したデータを表示する • （jQuery以外でやってみる）

ブラウザ上で コードを試す

CODEPEN • ブラウザ上でHTML5のコードを書ける

CODEPEN • ブラウザ上でHTML5のコードを書ける • 編集内容をリアルタイムで確認可能

CODEPEN • ブラウザ上でHTML5のコードを書ける • 編集内容をリアルタイムで確認可能 • コード公開やクロスブラウザ対応も可能

CODEPEN • ブラウザ上でHTML5のコードを書ける • 編集内容をリアルタイムで確認可能 • コード公開やクロスブラウザ対応も可能 • 無料！

ACCESS! http://bit.ly/1yabhlU

• http://bit.ly/1yabhlU

「Save」ボタンが出ればOK

ちょっと 触ってみる

HTMLに文字列を入れると・・・

テキストが表示される

CSSを追加すると・・・

CSSが適用される

今回触るのは「JS」タブ

Ajaxで 通信する

jQueryでの 基本部分

jQueryでAjaxを使う基本 $.ajax({ }).done(function(data) { }).fail(function(data){ });

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');
});

OKって出ました？ failが出ました？ なにも出ませんでした？

なんとなく 解説

Ajaxの通信内容を決める（例） url: 'Ajaxで通信する相手のURL', type:’通信方法', dataType: '取得するデータタイプ', timeout:待機時間,

Ajaxの通信内容を決める（例） url: 'http://lfjb.biwako-hall.or.jp/eventsjsonld/', type:'GET', dataType: 'json', timeout:10000,

ざっくり意訳すると・・・ １、通信先は「http://lfjb.biwako-hall.or.jp/ events-jsonld/」というURL ２、通信方法はGET ３、JSONのデータを取りに行く ４、10000ミリ秒を越えたら通信中断

• http://lfjb.biwako-hall.or.jp/

doneとfail 通信に成功したらdone、 失敗したらfailの中にあるfunctionが動作する。

doneとfail 通信に成功したらdone、 失敗したらfailの中にあるfunctionが動作する。 function(data)のdata部分に Ajaxで得たデータが入る

success・error版もある $.ajax({ //Ajaxの通信内容 }).success(function(data) { //Ajaxの通信に成功した時のコード }).error(function(data){ //Ajaxの通信に失敗した時のコード });

success・error版もある $.ajax({ jQuery1.8以上では //Ajaxの通信内容 }).success(function(data) { 使わない！！ //Ajaxの通信に成功した時のコード }).error(function(data){ //Ajaxの通信に失敗した時のコード });

そもそも Ajaxとは？

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により名付けられた。

リンクを 踏まずに データを得る

GoogleMapもAjax 昔は地図をずらすのもリンクだった

はじめは なんとなくで オK

データを 表示する

Ajaxで取得したJSONは doneの中で使う

さっきのコードを・・・
$.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);

お題

こいつを 作る

ヒント • 必要なCSSはすでに用意されてます • CSSに合う形でHTMLを作れればOK！ • console.log(data)でJSONをチェック

console.log

console.log(data) • dataという変数の中身を確認できるコード • Chromeの開発ツールに表示される • JSで困ったらとりあえずconsole.log！

お疲れ様 でした m(_ _)m

おまけ

JSONP

XMLHttpRequest cannot load http://domain2.example . Origin http://domain1.example is not allowed by Access-Control-Allow-Origin.

• http://domain2.example
• http://domain1.example

別ドメインに Ajax通信は 原則できない

なぜ？

XSS

でも 使いたい

JSONP

これが・・・ { 'blog' : 'あと味', 'author' : 'jdg' }

こうなる { 'blog' : 'あと味', 'author' : 'jdg' } callback({ 'blog' : 'あと味', 'author' : 'jdg' });

これが・・・
$.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');
});

jQuery 以外のJS

React.js Facebookが開発したライブラリ

React.js • コンポーネント単位で再利用しやすい • Fluxで処理が一方通行だからわかりやすい • 高パフォーマンスを実現する仮想DOM

Angular.js Googleが開発したライブラリ

Angular.js • 非同期で色々できる（双方向データバインド • ng-appで適用範囲を選べる • 日本語ドキュメントが多い

Polymer WebComponents用ポリフィル

Polymer • WebComponentsを使って構築する • ComponentsをimportすればだいたいOK • 簡単なものならほぼNoJavaScript