JQueryでAjax 藤田＠ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス.

Presentation on theme: "JQueryでAjax 藤田＠ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス."— Presentation transcript:

1 jQueryでAjax 藤田＠ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス

2 Ajaxとは AjaxとはWebブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとデータのやり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態 従来は、Webブラウザを使ったWebアプリケーションでは、データをサーバに通知して処理結果を得るにはページ全体をロードしなおさなければならなかった 参照元：

3 早速jQueyで実装を ＨＴＭＬファイル(index1.html) PHPファイル（index1.php）
<script src="jquery min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $.get(“index1.php”, function(data){ alert(“データ: ” + data “を読み込みました。”); }); }); </script> PHPファイル（index1.php） <?php echo "hogehoge"; ?>

4 早速jQueyで実装を ページ読み込んだ後に、このように表示されます。

5 解説 ① Getメソッドで実行 ② 実行、または読み込むサーバのファイル
$.get(“index1.php”, function(data){ alert(“データ: ” + data “を読み込みました。”); }); ① ② ③ ①　Getメソッドで実行 ②　実行、または読み込むサーバのファイル ③　サーバのファイルを読み込んだ後に実行するjavascript処理。dataはサーバのファイルが出力した文字列。

6 実用的なのを ＨＴＭＬファイル(index2.html) PHPファイル(index2.php)
<script src="jquery min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $.getJSON(“index2.php", function(json){ alert(json[0].name) }); } ); }); </script> PHPファイル(index2.php) <?php echo <<< DOC_END [ {"name":"oec", "com":"dogrun"}, {"name":"hebishima", "com":"ziro"} ] DOC_END; ?>

7 実用的なのを ページ読み込んだ後に、このように表示されます。

8 解説 ① Getメソッドで実行し、json形式として値を取得 ② 実行、または読み込むサーバのファイル
$.getJSON(“index2.php", function(json){ alert(json[0].name)}); } ); ① ② ③ ①　Getメソッドで実行し、json形式として値を取得 ②　実行、または読み込むサーバのファイル ③　サーバのファイルを読み込んだ後に実行するjavascript処理。jsonはサーバのファイルが出力した文字列をjson形式に変換した値。

9 jsonって何ぞ？ JavaScript Object Notationの略称 名前と値のペア，および，配列という2つのシンプルな構造
　名前と値のペア，および，配列という2つのシンプルな構造 氏名：大石 会社：ドッグラン 名前と値のペア {"name":"oec", "com":"dogrun"} ペア ペア カンマ 配列 [ {"name":"oec", "com":"dogrun"}, {"name":"hebishima", "com":"ziro"} ] 括弧で囲むことで、配列として 扱えるようになる。 レコードの区切りはこちらでも カンマを使用する。

10 他にどんなAjax関数があるの？ ■引数のちょっとした説明 url --- AjaxでアクセスするページのURL
ajax(options) プロはこっちを使うらしいです。次で説明します。 load( url, data, callback ) urlのページを読み込みこむ。 “url #id > セレクタ”のような指定が可能。 get( url, data, callback ) 前述したとおりです。 getJSON( url, data, callback ) getScript( url, callback ) javaScriptファイルを読み込んで実行する。 post( url, data, callback, type ) Postでページデータを取得する。Typeは送信するデータ形式を指定する。(JSON,XMLなど) ■引数のちょっとした説明 　url　 AjaxでアクセスするページのURL 　data ローカルから送信するデータ。キーと値の組み合わせをjson形式 で指定。 callback　 Ajax通信が成功された際に実行されるjavaScript関数

11 ajax(option) なぜプロ仕様なのか？
　なぜプロ仕様なのか？ 　$.getや$.postは実装の容易さと引き換えにエラー時のコールバック関数の指定が出来ない。 　$.ajaxはオプションでerror を指定することで、エラー時の処理を指定することができる。 　認証が必要なURLにアクセスする場合に、username、passwordの指定ができる。 　AJAXによりリクエストが送信される直前に実行する処理を指定することができる。Falseを返せば、リクエスト送信をキャンセルすることが可能。 詳しくはこちら

12 更に実用的なのを ＨＴＭＬファイル(index3.html - jQuery部)
<script src="jquery min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ajax_go").click(function(){ $.get("index3.php", function(json){ $("#output table").remove(); $("#output").append('<table border=1>'); for(var i=0; i<json.length; i++){ if($("#select option:selected").val() == json[i].name || $("#select option:selected").val() == ""){ $("#output table").append("<tr><td>" + json[i].name + "</td><td>" + json[i].com + "</td></tr>"); } }, "json"); }); </script> ・・・　ajax_go　ボタンが押されたら ・・・　ajaxのgetでindex3.phpのjsonデータを取得 ・・・　div=outputタグ内のテーブルを削除 ・・・　div=outputタグ内にテーブルを挿入 ・・・　jsonデータの配列分ループを行う ・・・　セレクトボックスで選択した値が空、またはループ中のjsonのnameが一致したら 　　　jsonのnameとcomの2列の情報をテーブル行として出力。

13 更に実用的なのを ＨＴＭＬファイル(index3.html - body部) セレクトボックス ボタン テーブル出力部
<select id="select" > <option value="">全部</option> <option value="oec">大石さん</option> <option value="hebishima">蛇島さん</option> </select> <input type="button" id="ajax_go" name="ajax_go" value="AJAX実行" /> <div id="output" /> </body> セレクトボックス ボタン テーブル出力部

14 更に実用的なのを PHPファイル(index3.php) <?php echo <<< DOC_END [
{"name":"oec", "com":"dogrun"}, {"name":"hebishima", "com":"ziro"}, {"name":"fujita", "com":"justplayer"} ] DOC_END; ?>

15 更に実用的なのを セレクトボックスを選択し、実行ボタンを押すと対象者のデータがテーブルに表示されます。

16 まとめ 　今回はPHPファイル側は決まったデータを出力していただけですが、実運用ではDBからレコードを取得して、それをjsonやXML形式に変換して出力するような処理になるかと思います。 　今回はやりませんでしたが、ローカル側からget値やpost値を送信することも可能です。PHPであれば$_POST[‘hoge’]等で受け取って、それを元に値を返したりDBに登録したりする処理も可能です。 　大石さん、頑張ってください。 ご清聴、ありがとうございました。

17 おまけ Sencha Touch と jQueryMobileについて ｊQuery mobileデモ ：
Sencha Touchデモ　： Sencha Touchの 嬉しいニュース　　　　：