Ajax通信ってそんなに使うことあるのかな？
って思いますが、使えたら使えたで便利なのです。
通常Webページの画面の内容を更新するには画面全体が再表示されますが、Ajaxを使うことで画面の一部だけを更新することが出来ます。
Google Map をページに埋め込んでいると、地図だけは動きますが他の部分は書き換わりませんよね。
また、住所入力フォームなどで郵便番号を入れてボタンをクリックすると住所がでてきませんか？
このような場所ではAjaxによる通信が行われて一部のデータだけを更新しています。
そんな便利なAjax通信が行えるようになりましょう。
実装例
クライアント ： 計算フォームを表示、Ajaxでサーバプログラムを呼び出す
サーバ ： Ajaxで呼び出される計算プログラムを置いておく
サーバ側
クライアントからPOSTされてきたデータを受け取り、処理を行った後にクライアントに返す
クライアントからPOSTされてきた、val1、val2の値を足してその結果を返しています。
<?php
// クライアントからのPOSTを受け取る
$val1 = $_POST[‘val1’];
$val2 = $_POST[‘val2’];
// 何らかの処理（サンプルなので加算するだけ）
$result = $val1 + $val2;
// 下記をレスポンスヘッダーに含める
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With");
// 処理結果($result)などクライアントに返す値を連想配列で設定し、json_encodeを通す。
print json_encode(array(‘result’ => $result));
?>
クライアント側
val1, val2 をnameに持つフォームを用意し、ボタンを１つ設置します。
ボタンのタイプは button にしておいてください。
submit にしてしまうと自画面に送信します。
当然のことながらサーバ側の処理は呼ばれません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#send").click(function(){
// 送信先、送信方法、送信データを設定する。
$.ajax({
url: "サーバPHPのURL",
type: "post",
data: {
'val1' : $("#val1").val(),
'val2' : $("#val2").val()
}
}),
.then(
function(data) {
// 通信が成功した場合
// 結果を取得して parseJSON でパーズする。
var result = $.parseJSON(data).result;
$("#result").text("結果 : " + result);
},
function (e, status) {
$("#result").text("エラー : " + status);
}
});
});
});
</script>
</head>
<body>
<form method="post">
<input id="val1" />
<input id="val2" />
<input id="send" type="button" value="処理" />
</form>
<div id="result"></div>
</body>
</html>
結果を受ける所を .then で記述しております。
第１引数に成功時のメソッドを、第２引数に失敗時のメソッドを渡します。
まとめ
上記では、通信の結果部分の記述に .then を使いましたが、以前は下記のように success を使った書き方をしていました。
$.ajax({
url: "サーバPHPのURL",
type: "post",
data: {
'val1' : $("#val").val(),
'val2' : $("#val2").val()
},
success: function(data) {
// 成功した場合、結果を取得して parseJSON でパーズする。
var result = $.parseJSON(data).result;
$("#result").text("結果 : " + result);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#result").text("エラー : " + textStatus);
}
});
どちらでも問題ないとは思いますが、古い書き方はサポートされなくなる可能性があるので、新しい書き方をしたほうがいいかもしれませんね。
コメントを残す