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

137 Views

April 10, 15

スライド概要

なんとなく.言語 第一回

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

今回のゴール

6.

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

7.

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

8.

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

10.

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

11.

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

12.

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

13.

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

14.

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

17.

「Save」ボタンが出ればOK

18.

ちょっと 触ってみる

19.

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

20.

テキストが表示される

21.

CSSを追加すると・・・

22.

CSSが適用される

23.

今回触るのは「JS」タブ

24.

Ajaxで 通信する

25.

jQueryでの 基本部分

26.

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

27.

jQueryでAjaxを使う基本 $.ajax({ //Ajaxの通信内容 }).done(function(data) { //Ajaxの通信に成功した時のコード }).fail(function(data){ //Ajaxの通信に失敗した時のコード });

28.

とりあえず 動かそう

29.
[beta]
とりあえず書いてみよう
$.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');
});

30.

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

31.

なんとなく 解説

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

そもそも Ajaxとは?

40.

Ajaxとは(Wikipediaより) Ajaxは、ウェブブラウザ内で非同期通信とインターフェイスの構築 などを行う技術の総称。 XMLHttpRequest(HTTP通信を行うためのJavaScript組み込み クラス)による非同期通信を利用し、通信結果に応じてダイナミッ クHTMLで動的にページの一部を書き換えるというアプローチを取 る。 AjaxはAsynchronous JavaScript + XML の略で、2005年2月18 日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。

41.

なるほど、 わからん

42.

Ajaxとは(Wikipediaより) Ajaxは、 ウェブブラウザ内で 非同期通信とインターフェイスの構築 などを行う技術の総称。 XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通 信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。 AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテ クトであるJesse James Garrettにより名付けられた。

43.

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

44.

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

45.

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

46.

データを 表示する

47.

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

48.
[beta]
さっきのコードを・・・
$.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');
});

49.
[beta]
こう書き換えてみよう
$.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');
});

50.

なんか出てきた

51.
[beta]
コードの意味をざっくりと
for (var i = data.length - 1; i >= 0; i--) {

//dataの長さから、iがゼロになるまで繰り返す
$(‘#ajax’).append(data[i]["schema:name"]);

//dataのi番目にある「schema:name」を表示
}

52.
[beta]
HTMLタグも書ける
for (var i = data.length - 1; i >= 0; i--) {
var html = “<p>” + data[i][“schema:name”] + “</p>”;
$(‘#ajax').append(html);
}

53.
[beta]
がっつり書いてみる
var html = "<ul>";
for (var i = data.length - 1; i >= 0; i--) {
html += "<li>" + data[i]["schema:name"] + "</li>";
}
html += "</ul>";
$(‘#ajax').append(html);

54.

お題

55.

こいつを 作る

56.

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

57.

console.log

58.

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

60.

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

61.

おまけ

62.

JSONP

63.

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

64.

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

65.

なぜ?

66.

XSS

67.

でも 使いたい

68.

JSONP

69.

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

70.

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

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

72.
[beta]
こうなる
$.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');
});

73.

jQuery 以外のJS

74.

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

77.

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

78.

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

81.

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

82.

Polymer WebComponents用ポリフィル

84.

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