Ajaxがおかしいんです

質問

Javascript初級者です。

Ajaxを使ってデータの重複チェックを行おうとしました。
ところがAjaxがヘンな動きをするんです。
以下のコードなんですが、上の登録処理の中で、function doubleCheck を呼んで
います。
問題は２つあって、ひとつは実際に重複していてもしていなくても「true」を
返してくることです。
console.log("res=========" + res)　には「yes」とか「no」とか重複有り無しで
異なりますが、ちゃんとそれぞれセットするにも関わらず、
if(!doubleCheck()　では必ず「false」が戻ってきてしまいます。

もう一つおかしい点は、重複検索（これはＰＨＰでやってます）の最中にもかかわらず、
「true」が返ってきて
"重複があったので登録できません。"
お、出てしまうことです。

それで調査するために console.logその２を入れてみました（※※※のところ）。
ところがこの console 何も吐き出しません。

ということは　doubleCheck()　の最後の if文にたどり着いていない、または
途中でエラーになっているのかもしれません。

私の書いた Ajax のコードがおかしいんでしょうか。

どなたか御指導下さい。
よろしくお願いします。

// 追加登録処理
function doActionAdd(){

if(dataCheck()){

// customerId が 空白か否かのチェック
if($('#customerId').val() == ""){

if(window.confirm("追加登録していいですか？")){

if(!doubleCheck()){
window.alert("重複はありませんでした");

}else{
window.alert("重複があったので登録できません。");

}
　（以下略）

function doubleCheck(){
var yomi = $('#customerYomi').val();
var res = '';

// 重複チェック
$.ajax({
type: "POST",
url: "../customer/CustomerDoubleCheck.php",
data: {"customerYomi":yomi},
dataType: 'text',

// ajax通信が成功したときの処理
success: function(request){

console.log("request=========" + request);
var json = JSON.parse(request);
console.log(json[0].result );

res = json[0].result;
console.log("res=========" + res);

},

error: function(XMLHttpRequest, textStatus, errorThrown){
$('div#jobStatus').text("重複チェック検索ができませんでした。");
return false;
}
});

console.log("resその２=========" + res);　//※※※

if(res == "yes"){
// 重複していたので「false」を返す。
return false;

}else{
// 重複していなかったので「true」を返す。
return true;
}

}

回答No.2

fujillin · ベストアンサー

ご提示の無い部分がどうなっているのか不明なのと、インデントがないので、私が読み間違えているかもしれませんが…

＞ひとつは実際に重複していてもしていなくても「true」を返してくることです。
phpからの送信を受信するまでにタイムラグがありますが、ajaxは非同期通信ですので、スクリプト側はそれを待たずに処理を続けます。
（受信後の処理はcallbackで処理されます）
このあたりの順序を再確認してください。
ご提示の、doubleCheck()では送信後に続けてif(res == "yes")を判定しているので、resの値は「''」ですから結果としてほぼ確実にtrueを返します。

＞もう一つおかしい点は、重複検索（これはＰＨＰでやってます）の最中にもかかわらず、「true」が返ってきて
上にも書きましたが、非同期通信なので処理はphpの返信を待ちません。
返信を待って処理を続けたいのであれば、同期通信を利用なさればよろしいでしょう。
（多分jQueryと推測して）送信時に async:false を指定すれば同期通信になるはずです。
http://api.jquery.com/jQuery.ajax/

＞console.logその２を入れてみました。ところがこの console 何も吐き出しません
何も吐き出さないのが真実なら、ご推測のように途中でエラーになっている可能性がありますが、それは上記の「trueが返される」と矛盾していませんか？
「何も吐き出されない」のではなく、「resその２=========」が出力されているのではないかと推測します。
（res=''の状態なので、この結果となる）

といったあたりではないかと、想像しますが…

お礼

とても早い回答ありがとうございました。

非同期通信ではこういったことに十分注意しなければいけないんですね。

asyncオプションの使い方をもう少し具体的に教えて頂けないでしょうか。

よろしくお願いたします。

回答No.3

fujillin

ANo2です。

＞asyncオプションの使い方をもう少し具体的に教えて頂けないでしょうか。
スマホからなので、簡単に。
回答に付けてあるリンク先をご覧ください。
jQueryのオフィシャルサイトのドキュメンテーションですので、一番確かな説明と言えるでしょう。
（私はあまりよくは知らないので、いい加減な説明しかできません。）

お礼

度々の回答ありがとうございました。

教えて頂いたサイトを見て勉強します。

ただサイトは英語なので・・
中学でもっと英語勉強しておけばよかった・・

回答No.1

mtaka2

Ajaxの仕組みを理解されていないようです。
AjaxのAはAsyncronous=非同期のこと。

HTTP によるデータ取得にはある程度時間がかかりますが、
通常のAjax処理では「まずデータ取得のリクエストを出す」「リクエストを出したら、続きの処理を実行する」「データ取得が出来たら、改めて受取処理を実行する」という流れになります。
success: に指定した関数部分が、この受取処理です。

というわけで、$.ajax を呼び出した直後の時点では、データの取得はまだできていません。取得出来ていない状況のまま続きを実行することになり、変数 res の内容をチェックしていますが、そのチェックを行っている時点ではまだsuccess指定の関数は呼び出されておらず、変数resへの代入はできていないのです。

ですので、doubleCheck の呼び出し以降の
---
if(!doubleCheck()){
window.alert("重複はありませんでした");

}else{
window.alert("重複があったので登録できません。");

}
　（以下略）
---
これらの記述は、$.ajax の complete で処理を指定するのが、正しい Ajax の書き方です。

その対応にはそれなりなコード書き換えが必要になりますが、
手軽な方法としては、$.ajax のパラメータに「async:false」を指定するという方法もあります。
その場合、$.ajax 呼び出しは、データ取得が終わってから続きを実行することになりますので、
それだけで質問者さんのコードでそのままで動くでしょう。その代わり、非同期実行しませんので反応が悪くなるなどの弊害が出る場合があります。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

お礼

素早い回答ありがとうございました。

そうですね、Ajaxがよくわかっていないようです。
「非同期」というのは文字ではわかっていても、実際はよく理解できて
いなかったんだと思います。

今までAjaxを使っていた時は気づかなかったんですけど、
というかAjaxに渡した直後に分岐処理をすることがりませんでした。

今回のことを是非習得したいと思いますので、よろしくお願いします。

それで、ひとつは「completeの処理」、もう一つは asyncオプションの
使い方をもう少し具体的に教えて頂けないでしょうか。

度々のお願いで恐縮ですが、よろしくお願いします。