Created
September 11, 2012 06:06
-
-
Save s-hiroshi/3696337 to your computer and use it in GitHub Desktop.
JavaScript > Ajax > base sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ajax sample used jQuery</title> | |
| <style> | |
| #response { | |
| margin: 1em 0; | |
| padding: .5em; | |
| background: #C6DDAA; | |
| } | |
| #error { | |
| margin: 1em 0; | |
| padding: .5em; | |
| background: #EDA39A; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> | |
| <script type="text/javascript" src="utility.js"></script> | |
| <script type="text/javascript" src="ajax.js"></script> | |
| <script> | |
| jQuery(function($) { | |
| // 送信ボタンクリック | |
| $('#send').click(function() { | |
| // POSTデータ | |
| var data = { | |
| 'element1': $('input[name="element1"]').val(), | |
| 'element2': $('input[name="element2"]').val() | |
| }; | |
| var url = './ajax.php'; | |
| var encodedata = Utility.getEncodedUri(data); | |
| var ajax = Utility.namespace('ajax'); | |
| $response = $('#response'); | |
| // 接続処理 | |
| try { | |
| if (ajax && ajax.request) { | |
| ajax.request(url, { | |
| success: function(xhr) { | |
| if (response && typeof response.innerHTML != 'undefined') { | |
| response.innerHTML = xhr.responseText; | |
| } else { | |
| $('#error').innerHTML = 'Ajaxエラー'; | |
| } | |
| }, | |
| data: encodedata, | |
| method: 'POST' | |
| }); | |
| } else { | |
| $('#error').innerHTML = 'Ajaxエラー'; | |
| } | |
| } catch (e) { | |
| $('#error').innerHTML = 'Ajaxエラー'; | |
| } | |
| }); | |
| // ページリロード抑制 | |
| $('form').submit(function() { | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| </head> | |
| <body> | |
| <h3>Ajaxを使ったフォームデータ送信サンプル</h3> | |
| <form action="#"> | |
| <input type="text" name="element1"> | |
| <input type="text" name="element2"> | |
| <input id="send" type="submit" value="送信"> | |
| </form> | |
| <div id="response"></div> | |
| <div id="error"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Christian Johansen (著), 長尾高弘 (翻訳) 『テスト駆動JavaScript』 ASCII | |
| // 本を参考にして下記サイトで配布されているスクリプトを変更。 | |
| // http://tddjs.com/ | |
| jQuery(function($) { | |
| // ajaxオブジェクト | |
| (function() { | |
| // ajaxオブジェクトを取得。 | |
| var ajax = Utility.namespace('ajax'); | |
| // クロスブラウザ対策 | |
| var xhrType = [ | |
| function() { | |
| return new ActiveXObject('Microsoft.XMLHTTP'); | |
| }, function() { | |
| return new XMLHttpRequest(); | |
| } | |
| ]; | |
| // 機能検出でクロスブラウザに対応する | |
| // option[i]()でXMLHttpRequestの生成に成功したらajax.createに設定 | |
| var i, l, xhr; | |
| for (i = 0, l = xhrType.length; i < l; i++) { | |
| try { | |
| xhr = xhrType[i](); | |
| ajax.create = xhrType[i]; | |
| break; | |
| } catch(e) { | |
| // nothing | |
| } | |
| } | |
| // onreadystatechangeの成功処理(レスポンスコード200) | |
| function requestComplete(transport, options) { | |
| if (transport.status == 200) { | |
| options.success(transport); | |
| } | |
| } | |
| /** | |
| * リクエスト・レスポンズ処理用の公開メソッド | |
| * | |
| * @param {String} url 送信先アドレス | |
| * @param {Object} options リクエストオブジェクト | |
| * リクエストオブジェクトは下記のプロパティを持つオブジェクト。 | |
| * success 成功時のハンドラ、 | |
| * data ポストデータ(key1=value1&key2=value2...をパーセントエンコードした文字列)。 | |
| * method フォームのmethod。POSTのみ。 | |
| */ | |
| function request(url, options) { | |
| if (typeof url != 'string') { | |
| throw new TypeError('URL should be string'); | |
| } | |
| if (options.method !== 'POST') { | |
| throw new TypeError('method is only post'); | |
| } | |
| var transport = ajax.create(); | |
| transport.open(options.method, url, true); | |
| transport.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | |
| transport.setRequestHeader('Content-Length', options.data.length); | |
| transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); | |
| // onreadystatechangeにイベントハンドラ登録 | |
| transport.onreadystatechange = function() { | |
| if (transport.readyState === 4) { | |
| requestComplete(transport, options); | |
| } | |
| }; | |
| // リクエスト実行 | |
| transport.send(options.data); | |
| } | |
| ajax.request = request; | |
| }()); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $value1 = $_POST["element1"]; | |
| $value2 = $_POST["element2"]; | |
| header("Content-Type: text/html; charset=UTF-8"); | |
| echo htmlspecialchars($value1 . $value2); | |
| ?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * ユーティリティー | |
| * <p>Christian Johansen(著),長尾高弘(翻訳)『テスト駆動JavaScript』ASCII | |
| * 下記サイトで配布されているスクリプトを利用。</p> | |
| * <p>http://tddjs.com/</p> | |
| */ | |
| function Utility() {} | |
| /** | |
| * 引数で渡されたオブジェクトに名前空間を設定関数を設定する | |
| */ | |
| Utility.namespace = function() { | |
| var object = this; | |
| return function(name) { | |
| if (typeof object[name] == "undefined") { | |
| object[name] = {}; | |
| } | |
| return object[name]; | |
| }; | |
| }(); | |
| /** | |
| * 引数パーセントエンコードして文字列として返す。 | |
| * <pre> | |
| * 引数のオブジェクト | |
| * { | |
| * key1: value1, | |
| * key2: value2 | |
| * } | |
| * 戻り値の文字列 | |
| * encodedKey1=encodedValue1&encodedkey2=encodedValue12 | |
| * encodedKeyはkeyをパーセントエンコードした文字列 | |
| * | |
| * @param {Object} obj ポストデータのクエリ | |
| * @return {String} ポストデータをパーセントエンコードした文字列 | |
| */ | |
| Utility.getEncodedUri = function(obj) { | |
| var params = [], | |
| key, | |
| value, | |
| param; | |
| for (key in obj) { | |
| value = obj[key]; | |
| // パーセントエンコーディングの半角スペース%20を+へ置換 | |
| param = encodeURIComponent(key).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+'); | |
| params.push(param); | |
| } | |
| return params.join('&'); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment