今回は jQuery で用意されている when 関数を使って Ajax の逐次処理を行う方法について説明します。
先ずは Ajax でよくある勘違いに付いてですが Ajax の処理が終わった時点で行いたい処理を記述する以下の様な場合です。 以下のソースは Ajax の終了後 test1() が処理されることを期待しています。
しかし実際には、この場合 $.ajax(); の処理が行われた直後に test1() が実行されて、その後で testajax() が実行されるはずです。 $.ajax(); で実行される url はネットを通して行われるため通信に時間が掛かります。 通信が終了後、結果として done で宣言された関数の中の testajax() が実行されます。
$.ajax(); はあくまで関数宣言であり、最初は非同期通信の発火を行うだけです。 非同期通信の結果としての関数を done や fail で宣言します。
■$.ajax の終了処理の勘違い
<script type="text/javascript">
// Ajax処理
$.ajax({
type: "POST",
url: "hoge.php"
}).done(function(data){
// 正常処理
testajax();
});
// 次の処理
test1();
</script>
上記の様に $.ajax(); の後に記述した処理を、本当に $.ajax(); の処理の終了後に行いたい場合に使うのが when です。
when の使い方ですが、以下の様な感じで when の中に Ajax 処理を行い when の done で行いたい処理を記述します。
<whenの例> $.when( // ajax 等の処理 $.ajax({ type: "POST", url: "hoge.php" }).done(function(data){ // 正常処理 }).fail(function() { // 取得エラー }), // 次の処理 test1() ).done(function(){ // 後処理 }); <when の中の処理> ・複数の関数を呼出す場合は 「,」(カンマ)で区切ること。 <メソッド> ・done(function(data){}：when の中の処理が終了した場合に呼ばれる関数宣言。
上では Ajax 処理としていますが、別に Ajax にこだわらなくても、通常の関数処理でもOKです。 それでは Ajax ではない簡単な例を以下に示します。
■when の使い方HTMLファイル
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//when関数
function goWhen() {
$.when(
console.log("test-1"),
console.log("test-2")
).done(function(){
// 後処理
console.log("test-end");
});
return false;
}
</script>
</head>
<body>
<h2>test jquery when</h2>
<button onclick="goWhen();">test when</button>
</body>
</html>
「test when」ボタンを押下するとコンソール画面に "test-1" "test-2" "test-end" の文字列が順次表示されるはずです。
それでは、以下の Ajax のページの処理に when を適用してみます。
⇒JavaScript jQueryでAjaxを使いPHPからデータを取得する方法
■when を適用：Ajaxを使いPHPからデータを取得するHTMLファイル
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Ajax関数
function getData() {
$.when(
// マスタデータの取得
$.ajax({
type: "POST"
, url: "./ajax1.php"
, data: { id: $("#id").val() }
}).done(function(res){
// ajaxがOK
$("#msg").text(JSON.parse(res));
}).fail(function() {
// 取得エラー
alert('取得エラー');
}).always(function() {
// 後処理(処理することが在れば)
})
).done(function(){
alert("ajax-end");
});
return false;
}
</script>
</head>
<body>
<h2>test ajax json</h2>
ID:<input type="text" id="id" size="10" maxlength="10" /><br />
<p id="msg">テストメッセージ</p>
<button onclick="getData();">Ajax</button>
</body>
</html>
このソースで「Ajax」ボタンを押下した場合 $.ajax(); の処理が正常に行われれば メッセージ領域へのデータ表示の後にアラートで「ajax-end」の表示がされるはずです。
■外部PHPファイル ajax1.php
<?php
// 処理モードの取得
$id = -1;
if (isset($_POST["id"]) == true && $_POST["id"] != "") {
$id = intval($_POST["id"]);
}
// マスタ風の仮のデータ
$arrData = array(
0 => "@@@@@@"
,1 => "AAAAAA"
,2 => "BBBB"
,3 => "CCCCCCCC"
);
$strRet = "";
if (0 <= $id && $id <= 3) {
$strRet = $arrData[$id];
}
// 結果を返す
echo(json_encode($strRet));
コメント