Ajaxの基本 - cluchのブログ

Ajaxとは

「Asynchronous SavaScript + XML」の略称で、
JavaScriptから、非同期に通信を行って、
XMLデータを取得し、その内容を取り扱うものです。

jQueryを使う利点

Ajaxはブラウザによって、
「XMLHttpRequestオブジェクト」の実装方法が異なります。
jQueryはその違いを吸収してくれます。

HTMLを表示してみる

使用するAPI

click(fn)

要素がマウスなどのポインティングデバイスで
クリックされた場合に呼び出されます。

jQuery.ajax(options)

HTTP通信でページを読み込みます。
＜＜ options ＞＞

- url / string
  - Ajaxリクエストを送信するURLを指定します。
  - 省略時は呼び出し元のページに送信します。
- dataType / string
  - サーバから返されるデータの型を指定します。
  - 省略した場合は、jQueryがMIMEタイプなどを見ながら自動的に判別します。
  - xml,html,script,json,jsonp,textが指定可能です。
- cache / boolean
  - 通信結果をキャッシュかを指定します。
  - falseを設定すると、ブラウザによってリクエストされたページを強制的にキャッシュしないようにします。
  - 初期値は通常はtrueですが、dataTypeがscriptの場合にはfalseになります。
- success / function
  - AJAX通信が成功した場合に呼び出されるAjax Eventです。
  - この関数は、下記の2つを引数に受け取ります。
    1. data
      - サーバが返すデータをdataTYpeに沿ってフォーマットされた値が格納されています。
    2. textStatus
      - 通信の結果により、「"success", "notmodified", "error", "timeout", "abort", "parsererror"」のいずれかが指定されます。
- error / function
  - 通信に失敗した際に呼び出されるAjax Eventです。
  - この関数は、下記の3つを引数に受け取ります。
    1. XMLHttpRequestオブジェクト
    2. エラー内容
    3. 補足的な例外オブジェクト

ソース

index.html

<input type="button" id="bt" value="クリック">
<div id="add"></div>

ajaxSample.html

<p>この文章はajaxSample.htmlから取得しました。</p>

.js

$(function(){
    $("#bt").click(function() {
        $.ajax({
            url: "ajaxSample.html",
            dataType: "html",
            cache: false,
            success: function(data, textStatus){
                $("#add").html(data);
            },
            error: function(xhr, textStatus, errorThrown) {
                alert('Error!' + textStatus + ' ' + errorThrown);
            }
        });
    });
});