Download as PDF, PPTX
![こう書き換えてみよう
$.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');
});](https://image.slidesharecdn.com/js-150410063033-conversion-gate01/85/jQuery-Ajax-49-320.jpg)
![コードの意味をざっくりと
for (var i = data.length - 1; i >= 0; i--) {
//dataの長さから、iがゼロになるまで繰り返す
$(‘#ajax’).append(data[i]["schema:name"]);
//dataのi番目にある「schema:name」を表示
}](https://image.slidesharecdn.com/js-150410063033-conversion-gate01/85/jQuery-Ajax-51-320.jpg)
![HTMLタグも書ける
for (var i = data.length - 1; i >= 0; i--) {
var html = “<p>” + data[i][“schema:name”] + “</p>”;
$(‘#ajax').append(html);
}](https://image.slidesharecdn.com/js-150410063033-conversion-gate01/85/jQuery-Ajax-52-320.jpg)
![がっつり書いてみる
var html = "<ul>";
for (var i = data.length - 1; i >= 0; i--) {
html += "<li>" + data[i]["schema:name"] + "</li>";
}
html += "</ul>";
$(‘#ajax').append(html);](https://image.slidesharecdn.com/js-150410063033-conversion-gate01/85/jQuery-Ajax-53-320.jpg)
![LODを使ったサイトとプラグインを作ってみた話[WordBenchOsaka]](https://cdn.slidesharecdn.com/ss_thumbnails/wordbentchosaka33-140920001750-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
なんとなくjQueryでAjaxをつかってみる
- 1. なんとなく.js jQueryでajax 2015/ 4/ 9なんとなく.言語 岡本秀高
- 2.
- 3.
- 4.
- 6. Ajaxで取得したデータを並べる • ブラウザ上で簡単にコードを書く方法を知る • Ajaxで取得したデータをカードっぽく並べる •オープンデータを使ってみる 「ラ・フォル・ジュルネ びわ湖 2015」に関するオープンデータについて http://opendata.shiga.jp/lfjb2015/
- 7. 今日の流れ • ブラウザ上でコードをテストする • Ajaxでの通信を試みる •取得したデータを表示する • （jQuery以外でやってみる）
- 8.
- 10.
- 11.
- 12. CODEPEN • ブラウザ上でHTML5のコードを書ける • 編集内容をリアルタイムで確認可能 •コード公開やクロスブラウザ対応も可能
- 13. CODEPEN • ブラウザ上でHTML5のコードを書ける • 編集内容をリアルタイムで確認可能 •コード公開やクロスブラウザ対応も可能 • 無料！
- 14.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. とりあえず書いてみよう $.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.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 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.
- 45.
- 46.
- 47.
- 48. さっきのコードを・・・ $.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. こう書き換えてみよう $.ajax({ //省略 }).done(function(data) { for (vari = data.length - 1; i >= 0; i--) { $('#ajax').append(data[i]["schema:name"]); } }).fail(function(data) { $('#ajax').append('fail'); });
- 50.
- 51. コードの意味をざっくりと for (var i= data.length - 1; i >= 0; i--) { //dataの長さから、iがゼロになるまで繰り返す $(‘#ajax’).append(data[i]["schema:name"]); //dataのi番目にある「schema:name」を表示 }
- 52. HTMLタグも書ける for (var i= data.length - 1; i >= 0; i--) { var html = “<p>” + data[i][“schema:name”] + “</p>”; $(‘#ajax').append(html); }
- 53. がっつり書いてみる 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.
- 58. console.log(data) • dataという変数の中身を確認できるコード • Chromeの開発ツールに表示される •JSで困ったらとりあえずconsole.log！
- 60.
- 61.
- 62.
- 63. XMLHttpRequest cannot load http://domain2.example . Origin http://domain1.example isnot allowed by Access-Control-Allow-Origin.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. これが・・・ { 'blog' :'あと味', 'author' : 'jdg' }
- 70. こうなる { 'blog' :'あと味', 'author' : 'jdg' } callback({ 'blog' : 'あと味', 'author' : 'jdg' });
- 71. これが・・・ $.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. こうなる $.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.
- 74.
- 77. React.js • コンポーネント単位で再利用しやすい • Fluxで処理が一方通行だからわかりやすい •高パフォーマンスを実現する仮想DOM
- 78.
- 81.
- 82.
- 84. Polymer • WebComponentsを使って構築する • ComponentsをimportすればだいたいOK •簡単なものならほぼNoJavaScript