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;
}
}
});
});
サーバ側処理
１週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能
