jQuery Ajax

概要

Asynchronous JavaScript + XML
非同期通信
JavaScriptを使用し、ページ全体の再ロードを行わずにXMLデータだけをやり取りする技術

$.get(url, params, callback, type);
$.post(url, params, callback, type)
$ajax(url, options);

load()

$(～).load(url, data, complete(data, textStatus, xhr));
urlで指定したリソースをAjaxで読み込み、要素に格納
$(～).load("http://test.html");

↑urlにパラメーターを渡す
$(～).load("http://test.html", "prm1=aaa&prm2=bbb");
$(～).load("http://test.html", { prm1:"aaa", prm2:"bbb"});

↑読み込み完了後コールバック関数を指定
$(～).load("http://test.html", {prm1:"a", prm2:"b"}, 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等
});

get()

load()と違い戻り値がない。
$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
　　if (status == "success") {
　　　　$(#result).html(data);
　　}
});

$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
　　if (status == "success") {
　　　　$(#result).html(data);
　　}
}).done(function(data, status, xhr){
　　$("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
　　$("#log").append("failed<br/>");
});

post()

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
　　if (status == "success") {
　　　　$(#result).html(data);
　　}
});

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
　　if (status == "success") {
　　　　$(#result).html(data);
　　}
}).done(function(data, status, xhr){
　　$("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
　　$("#log").append("failed<br/>");
});

getJSON()

dataがJSON形式で返ってくる
$.getJSON("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
　　$.each(data, function(key, val){
　　　　$("#log").append("Data:" + key + "=" + val + "<br/>");
　　});
})

汎用

非同期通信

$(document).ready(function(){
　$('#add_cart').click(function(){

　　/**
　　* Ajax通信メソッド
　　* @param type　: HTTP通信の種類
　　* @param url　 : リクエスト送信先のURL
　　* @param data　: サーバに送信する値
　　*/
　　$.ajax(
　　{
　　　type: "POST",　GETも可
　　　dataType: "json",　TEXT、HTML等も可
　　　contentType: 'application/json',　他タイプも可
　　　url: "http://test.com/",
　　　data:
　　　{
　　　　"id":5,
　　　},
　　　success: function(data)
　　　{
　　　　alert(data.count);
　　　},
　　　error: function(XMLHttpRequest,textStatus,errorThrown)
　　　{
　　　　alert('処理できませんでした');
　　　},
　　});
　　return false;
　});
});

同期通信

$(document).ready(function(){
　　function test(){
　　　　/**
　　　　* Ajax通信メソッド
　　　　* @param type　: HTTP通信の種類
　　　　* @param url　 : リクエスト送信先のURL
　　　　* @param data　: サーバに送信する値
　　　　* @param async　: 非同期通信
　　　　*/
　　　　return $.ajax(
　　　　{
　　　　　type: "POST",　GETも可
　　　　　dataType: "json",　TEXT、HTML等も可
　　　　　contentType: 'application/json',　他タイプも可
　　　　　url: "http://test.com/",
　　　　　data:
　　　　　{
　　　　　　"id":5,
　　　　　},
　　　　　async: false
　　　　}).responseText;
　　　});
　　}
　　
　　$('#add_cart').click(function(){
　　
　　　var result = test();
　　
　　　if (result != 0) {
　　　　var ret = window.confirm('カートには同商品を登録ずみです。追加しますか？');
　　　　if (ret) {
　　　　　return true;
　　　　}else{
　　　　　return false;
　　　　}
　　　}
　　});
});

サーバ側処理