«
»

2012.08.10

javascriptとjQueryでAjaxをするまとめ

概念がなかなか納得できないので簡単にまとめておきます。
Ajaxの考え方とシンプルなコード。


より深い理解をしたい方は偉大な参考元を見るとよいです。→偉大な参考元

ajaxってなんだ

Ajax(Asynchronous JavaScript + XML)をかいつまむと、
javascriptを使った非同期通信(=ページ遷移しない通信)のこと。

ページを遷移しないのに次々にデータが現れたりしてなんだかカッコイイ

ajaxの基本的な流れ

XMLHttpRequest(非同期通信)オブジェクトを生成

(XMLHttpRequestオブジェクトの)open メソッドを実行(HTTPメソッド、URLの指定etc)

(XMLHttpRequestオブジェクトの)send メソッドを実行

サーバーで処理

onreadystatechange イベント(ie以外ではコールバックなonloadも使えるらしい)

readyState プロパティ(送受信状態をあらわす値、4で受信完了。onloadなら不要。)

statusプロパティ(200が正常)

あとはresponseTextやresponseXMLを焼くなり煮るなり。

※しかしまあ毎度この流れを全部把握しなければいけないわけではない。
定型のコードを書いていくことになるでしょう。

javascriptでAjax

「ボタンを押すとAjaxでテキストを読み込んで表示」というのをやってみます。

ソースコード
JAVASCRIPT:
  1. <script language="JavaScript">
  2. <!--
  3. //XMLHttpRequest オブジェクト生成
  4. function createXMLHttpRequest(){
  5.         if(window.XMLHttpRequest){return new XMLHttpRequest()}
  6.         if(window.ActiveXObject){
  7.                 try{return new ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(e){}
  8.                 try{return new ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(e){}
  9.                 try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}
  10.  
  11.         }
  12.         return false;
  13. };
  14.  
  15. //Ajaxを使ってファイルをリクエストする関数です。ボタンなどで実行。
  16. function requestFile(method , fileName){
  17.     var xhr = createXMLHttpRequest()//XMLHttpRequest オブジェクト生成
  18.     xhr.onreadystatechange = function() { //(送受信状態が変った時に起動するイベント)
  19.       if (xhr.readyState == 4) { // DONE readyState値は4で受信完了
  20.         if (xhr.status == 200) { // OK ステータス正常
  21.           callback(xhr);    //コールバック関数を実行
  22.         } else {    //stats200以外の場合
  23.           alert("status = " + xhr.status); //ステータスを表示
  24.         }
  25.       }
  26.     }
  27.     xhr.open(method , fileName); //openメソッドの実行
  28.     xhr.send()//sendメソッドの実行
  29. }
  30.  
  31. //正常にAjax通信が行われた時に実行するコールバック関数
  32. function callback(xhr){
  33.     res  = xhr.responseText;
  34.     alert(res)
  35. }
  36.  
  37. //-->
  38. </script>

HTML:
  1.   <input type="button" id="send" value= "GET TEXT" onclick = "requestFile('GET', 'test.txt')"><br>
  2. </form>
  3.  
  4. (test.txt)
  5. これはAjaxで読み込まれたテキストです。

コールバック関数と、リクエストURLだけ気を使って、
XMLHttpRequest オブジェクト生成、Ajaxリクエスト関数などは使いまわせばよいでしょう。

同じことをjQueryでやると

ソースコード
JAVASCRIPT:
  1. <script src="http://www.google.com/jsapi"></script>
  2. <script>google.load("jquery", "1.3.2");</script>
  3. <script language="JavaScript">
  4. <!--
  5. $(document).ready(function() {
  6.     $("#send").click(function(){
  7.         $.get("test.txt", function(status){
  8.             callback(status);
  9.         });  
  10.     });
  11. });
  12.  
  13. function callback(status){
  14.     alert(status);
  15. }
  16. //-->
  17. </script>

超簡単。jQueryスモイ!!

偉大な参考元

○LINK:Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About( http://allabout.co.jp/gm/gc/24097/#1
○LINK:今からでも遅くない Ajax基本のキ - 第4回 基本的なAjaxアプリケーションを作成してみよう(後編):ITpro( http://itpro.nikkeibp.co.jp/article/COLUMN/20060607/240192/
○LINK:XMLHttpRequest - Wikipedia( http://ja.wikipedia.org/wiki/XMLHttpRequest

Comment & Trackback

Trackback are closed.

No comments.

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。