url で指定したリソースを Ajaxで読み込み、obj に流し込みます。

$("#result").load("test.php");

url には、URL に続いて、セレクタを指定することも可能です。この場合、対象の URI から、指定したセレクタにマッチした要素のみを取り出します。

$("#result").load("test.php #section2");

data にはフォームデータを指定します。引数を文字列で渡した場合は GET メソッド、オブジェクト形式で渡した場合は POST メソッドで HTTP通信を行います。

$("#result").load("test.php", "t1=AAA&t2=BBB&t3=CCC");             // GET method
$("#result").load("test.php", { t1:"AAA", t2:"BBB", t3:"CCC" });   // POST method

complete には、Ajax通信完了時のコールバック関数を指定します。data には取得した文字列、textStatus には success, error などの状態文字列、xhr には XMLHttpRequest オブジェクトが渡されます。xhr.status は HTTP のステータスコード、xhr.statusText にはその意味が格納されています。

$("#result").load("test.php", function(data, status, xhr) {
    $("#log").append("status = " + status + "<br>");                   // error
    $("#log").append("xhr.status = " + xhr.status + "<br>");           // 404
    $("#log").append("xhr.statusText = " + xhr.statusText + "<br>");   // Not Found
});

load() と類似の動作を行いますが、obj への流し込みを行わないこと、data の指定方式に関わらず GET メソッドを用いることなどが異なります。パラメータの詳細は load() を参照してください。

$.get("test.php", function(data, status, xhr) {
    if (status == "success") {
        $("#result").html(data);
    }
});

get() メソッドは、jqXHR オブジェクトを返します。これに対して下記の様なコールバック関数を指定することができます。

$.get("test.php", function(data, status, xhr) { $("#result").html(data); })
    .done(function(data, status, jqxhr) { $("#log").append("Done<br>"); })
    .fail(function(jqxhr, status, error) { $("#log").append("Failed<br>"); });

$.get(options) の形式は、パラメータリストを下記の様に渡します。

$.get({
  url: "test.php",
  method: "POST"
})
.done(function(data) { console.log(data); });

$.get() と類似の動作を行いますが、data の指定方式に関わらず POST メソッドを用いる点が異なります。

$.post("test.php", { t1:"AAA", t2:"BBB" }, function(data, status, xhr) {
    if (status == "success") {
        $("#result").html(data);
    }
});

$.get() と類似の動作を行いますが、data を JSON の値として受け取る点が異なります。

$.getJSON("test.php", { t1:"AAA", t2:"BBB" }, function(data, status, xhr) {
    $.each(data, function(key, val)) {
        $("#log").append("Data: " + key + " = " + val + "<br>");
    });
});

$.get() と類似の動作を行いますが、JavaScript ファイルを読み込み、実行する点が異なります。

$.getScript("test.js", function(script, status, xhr) {
    if (status == "error") {
        alert("Script loading error!");
    }
});

Ajax を用いて url を非同期に読み込みます。$.ajax() は jqXHR オブジェクトを返却します。このオブジェクトの done() メソッドでコールバック関数を指定することでデータを受け取ります。失敗した場合のコールバック関数は fail() メソッドで指定します。status には、"success", "notmodified", "error", "timeout", "abort", "parseerror" のいずれかの文字が設定されています。

$.ajax({
    url: "test.php",
    type: "POST",
    timeout: 10000
}).done(function(data, status, xhr) {
    $("#result").html(data);
}).fail(function(xhr, status, error) {
    $("#log").append("xhr.status = " + xhr.status + "<br>");          // 例: 404
    $("#log").append("xhr.statusText = " + xhr.statusText + "<br>");  // 例: Not Found
    $("#log").append("status = " + status + "<br>");                  // 例: error
    $("#log").append("error = " + error + "<br>");                    // 例: Not Found
});

options には、下記のパラメータを指定することができます。$.ajaxSetup() を用いてあらかじめ設定しておくこともできます。

jQuery 1.0 では、結果やエラーを受け取るコールバック関数を下記の様に記述していました。

$.ajax({
    url: "test.php",
    success: function(data, status, xhr) {
        // 通信成功時の処理
    },
    error: function(xhr, status, error) {
        // 通信失敗時の処理
    },
    complete: function(xhr, status) {
        // 通信完了時の処理
    },

jQuery 1.5 では、下記の様に変更されましたが、この記法は jQuery 1.8 で非推奨となりました。

$.ajax({
    url: "test.php"
}).success(function(data, status, xhr) {
    // 通信成功時の処理
}).error(function(xhr, status, error) {
    // 通信失敗時の処理
}).complete(function(xhr, status) {
    // 通信完了時の処理
});

jQuery 1.8 以降では下記の様に記述します。always() の引数は、status が "success" の場合は always(data, status, xhr) となりますが、"success" 以外の場合は always(xhr, status, error) となるので注意が必要です。

$.ajax({
    url: "test.php"
}).done(function(data, status, xhr) {
    // 通信成功時の処理
}).fail(function(xhr, status, error) {
    // 通信失敗時の処理
}).always(function(arg1, status, arg2) {
    // 通信完了時の処理
});

もしくは、then() を用いて下記の様に記述します。

$.ajax({
    url: "test.php"
}).then(
    function(data, status, xhr) {
        // 通信成功時の処理
    },
    function(xhr, status, error) {
        // 通信失敗時の処理
    }
);

$.ajax() を呼び出す際の options の値をあらかじめ設定しておきます。

$.ajaxSetup({
    timeout: 10000,
    type: "POST"
});
$.ajax({
    url: "../getdata.php",
    data: { "id": 345 },
}).done(function(data) { ... });

$.ajax() が呼ばれる際に毎回実行されるフィルタ関数を設定します。options には $.ajaxSetup() や $.ajax() で設定されたオプションや規定値のオプションが含まれます。origOptions には $.ajax() で設定したオプションのみが含まれます。

$.ajaxPrefilter(function(options, origOptions, xhr) {
    for (var key in options) {
        $("pre#log").append(key + "=" + options[key] + "\n");
    }
});

dataTypes を指定した場合、指定したデータタイプの場合のみ、フィルタ関数が呼ばれます。

$.ajaxPrefilter("json script", function(options, origOptions, xhr) {
    :
});

$.ajax() が内部で呼び出す送信関数(send())、中断関数(abort())を置き換えます。$.ajaxPrefilter() や converter などよりも、より高度な処理の変更を行いたい場合に実装します。

$.ajaxTransport("text", function(options, origOptions, xhr) {
    return {
        send: function(headers, completeCallback) {
            // 送信処理
        },
        abort: function() {
            // 中断処理
        }
    };
});

Ajax処理開始時(Start)、送信開始時(Send)、通信成功時(Success)、通信失敗時(Error)、通信完了時(Complete)、Ajax処理停止時(Stop)にグローバルに呼び出されるイベントハンドラを指定します。

$(document).ajaxStart(function() {
    $("#log").append("==== Start\n");
});
$(documentg).ajaxSend(function(e, xhr, options, error) {
    $("#log").append("==== Send\n");
});
$(documentg).ajaxSuccess(function(e, xhr, options) {
    $("#log").append("==== Success\n");
});
$(documentg).ajaxError(function(e, xhr, options) {
    $("#log").append("==== Error\n");
});
$(documentg).ajaxComplete(function(e, xhr, options) {
    $("#log").append("==== Complete\n");
});
$(documentg).ajaxStop(function() {
    $("#log").append("==== Stop\n");
});

フォームデータを単一の文字列にシリアライズします。フォームに入力された値を Ajax でサーバに引き渡す際などに有用です。

var str = $("form#form1").serialize();

例えば、下記のフォームに対して上記のスクリプトを実行したとします。

<form id="form1">
    <input type="text" name="t1" value="AAA">
    <input type="text" name="t2" value="BBB">
    <input type="text" name="t3" value="CCC">
</form>

serialize() の戻り値 str は下記の文字列が設定されます。

t1=AAA&t2=BBB&t3=CCC

フォームデータを名前と値の配列で取得します。

var data = $("form#form1").serializeArray();

例えば、上記の serialize() のサンプルにあるフォームに対して serializeArray() を実行すると、下記の構造の配列が返されます。

[
    { name: "t1", value: "AAA" },
    { name: "t2", value: "BBB" },
    { name: "t3", value: "CCC" }
]

URLクエリや Ajax通信のために、オブジェクトをシリアライズ化します。

var obj = {
    a: "AAA",
    b: {
       c: "CCC"
    },
    d: [ "DD1", "DD2" ]
};

str1 = $.param(obj);                       a=AAA&b%5Bc%5D=CCC&d%5B%5D=DD1&d%5B%5D=DD2
str2 = decodeURIComponent($.param(obj));   a=AAA&b[c]=CCC&d[]=DD1&d[]=DD2