ajaxで、整形式になっていません。不明　と出て困ってます。

###前提・実現したいこと
いつも大変お世話になっております。

整形式になっていませんを出ないようにしたい。
XMLパースというのでしょうか？間違いを見つける事ができません。

どなたかヒントをいただけませんでしょうか？
何卒、よろしくお願いします。

＊同期については、データ登録の際の登録前チェックのため、
非同期だと困るので、とりあえずは・・・
非同期でも同期のようにタイミングを取る方法があるようですが、
難しいので、後々にしようと思ってます。

###発生している問題・エラーメッセージ
firefoxのデバッガには、

整形式になっていません。  （不明）
ユーザ体験に対して好ましくない影響があるため、メインスレッドでの同期 XMLHttpRequest は推奨されません。詳しくは http://xhr.spec.whatwg.org/ を参照してください。

###該当のソースコード

呼び出し元のjavascript
				    //２：ログインIDとして問題なければ、念のため、重複していないか、チェック。ajaxは、同期通信「async: false」
					var val = $("#id_loginid").val(); //入力した値を取得
			        $.ajax({
			        	type: "POST",
						url: "accchk.php",
						data: "account="+val,
						async: false,
						success: function(xml){
			            	$(xml).find("item").each(function(){
				                var check = $(this).find("check").text();
		                    	if( check == 1 ){
									alert('そのIDは使用済です。違うIDにしてください。');
									$("#id_rtn").val("ng");
									return false;
		                    	}
			               	});
			           	}
		        	});
		        	if(document.getElementById('id_rtn').value=='ng'){
			        	return false;
		        	}

accchk.php
<?php
 header("Content-Type: application/xml");
 echo '<?xml version="1.0" encoding="UTF-8" ?>' . "\n";
 
 //受け取った変数が使用済かどうかを確認
 //実際はDBなどへ問い合わせる事が多いと思う
省略
    if($stmt->rowCount() >= 1){
		$check = true; //使用済ならTRUE
    }else{
	    $check = false; //使ってなければFALSE
    }

	echo '<rss>'."\n"; 
	echo '  <item xml:space="preserve">'."\n"; 
	echo '      <check>'.$check.'</check>'."\n"; 
	echo '  </item>'."\n"; 
	echo '</rss>'."\n";
 ?>

###試したこと
課題に対してアプローチしたことを記載してください
" や ' や ? を、書き直したり、" にしてみたり・・・

追記
あと、javascriptは戻り値を1で判定してますが、
送るときは、ture、falseで返してます。
でも、他が原因かもしれませんが、1,0に変えると
うまいこと動かなかったので、ajaxって不思議って、、
私の思考に方が不思議かもしれませんが、、

しっかりチェック出来てないかもしれません。
家に帰ってもう一度試してみます。

追記２
戻り値を1,0にしても、true,falseにしても、
結果は同じでした。

###補足情報(言語/FW/ツール等のバージョンなど)
１回２回なら、動くのですが、何回もエラーだしていると
javascriptが動かなくなります。

行動規範の内容に同意します

回答2件

ベストアンサー

はじめまして。

おそらく、実現したいのは、ユーザの登録フォーム等で、
ユーザがIDを入力している時に裏側でajaxを使って登録済みなら「既に使われてます」のようなエラーを出してあげる事だと思います。

FireFoxが「ユーザに好ましくない体験」と言っているのは、
同期的にajaxを使って処理を行うとその間ユーザは何も操作が出来なくなるためです。
仮にkeyupイベントなどにこの処理を紐付けた場合、1文字入力する毎に何も出来なくなるというのはかなり辛く感じます。
(最初は良くても、サーバ側の処理が重くなり、チェックに時間がかかる場合などはそうです)

なので、ここでのチェックはあくまでも非同期で行い、最終的に使えるかどうかのチェックはフォームの送信先で行うと良いと思います。
(ajaxでチェックしてから、フォームがsubmitされるまでに同じIDで登録があったら弾けないですから)

ので、私だったらこうするという処理を書いてみたので良かったら参考にしてみてください。

意識して変えた点

通信はPOSTでなくGET(POSTはサーバ側のデータを更新する時に使う認識だからです
サーバ側の返り値はjson(jsと相性が良く扱いやすいので)
ajaxは非同期に(ユーザ体験を重視)

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>ユーザIDの入力チェック</title>
6  <style>
7  .red {
8    color: red;
9  }
10
11  .green {
12    color: green;
13  }
14  </style>
15</head>
16<body>
17  <input type="text" id="login_id">
18  <p id="result"></p>
19
20  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
21  <script>
22
23  $(function() {
24    // ユーザIDが入力されたら利用可能かチェック
25    $('#login_id').on('keyup', function() {
26      var loginId = $('#login_id').val();
27      $('#result').text('').removeClass();
28
29      $.ajax({
30        type: "GET",
31        url: "test.php",
32        data: {"loginId": loginId },
33        success: function(result) {
34          // resultには、利用済みならis_usedがtrueで返ってくる
35          var decodedResult = JSON.parse(result);
36
37          if (decodedResult.is_used) {
38            $('#result').text('そのユーザIDは既に利用済みです').addClass('red');
39          } else {
40            $('#result').text('そのユーザIDなら利用出来ます').addClass('green');
41          }
42        }
43      });
44    });
45  });
46
47 </script>
48</body>
49</html>

test.php
1<?php
2
3$loginId = isset($_GET['loginId']) ? $_GET['loginId'] : '';
4
5$result = false;
6
7if ($loginId === 'test') {
8    $result = true;
9}
10
11
12echo json_encode([
13    'is_used' => $result
14]);

投稿2016/11/30 15:22

coffee

総合スコア139

tsuru0508

2016/11/30 23:20

coffeeさん、ありがとうございます。また、サンプルソースもありがとうございます。丁度jsonを調べてたところです。私も最初、ボタン押して重複チェックをしていました。ただ、登録直前に変えられたら、意味ないなと、、、で、登録ボタン押した後、チェックをするようにしました。最初は非同期でしたが、エラーのタイミングが遅れてくるのが、気持ち悪く同期に変えた次第です。 hiddenでflag たてて、判断すればいいかも知れませんね。一度チャレンジしてみます。

tsuru0508

2016/12/01 23:19

coffeeさまおはようございます。本件ありがとうございます！無事エラーを出さずに動きました。同期、非同期の問題だけですが、いずれ非同期で処理する事にします。せっかく全部ポストせずに、ＤＢにアクセス出来るので、、、ご支援感謝いたします。ありがとうございました。

行動規範の内容に同意します