Ajax通信がFireFoxでのみ動作しない

前提・実現したいこと

AjaxでPHPファイルへPOST送信してDBを更新させて、再描画処理をしているのですが、
FireFoxでのみ動作しません。（Edge／Chromeは動作してます。）
なぜなのかググってみたのですが、HTML5より前ならmetaタグの記述漏れだったりとありますが、
今回はHTML5ですので、別の原因と思ってます。

恐れ入りますが、お力添えをお願いします。

※xmlHttpRequestはundefinedで返ってきております。

追記①：
成功するEdge/Chromeについては、「成功」のAlertが表示され、DBの更新もできます。
失敗するFirefoxについては、「失敗」のAlertが表示され、DBの更新もできていません。

追記②：
Firefoxでデバッグしてみて少し挙動が異なることがわかりました。
デバッグでブレイクポイントをajax通信前に置いて一旦停止させるとajax通信が成功することが判明しました。
ブレイクポイントを置かず（停止させずに）実行するとajax通信失敗になることがわかりました。
※原因が分かっておりません。

うまくいく場合 (Edge / Chrome) とダメな場合 (Firefox) を比較しました。
成功：
失敗：

該当のソースコード

※呼び出し元のPHP

PHP
1<?php
2	session_start();
3	ini_set('default_charset', 'UTF-8');
4?>
5<!DOCTYPE html>
6<html lang="ja">
7<head>
8	<meta charset="UTF-8">
9	<meta NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
10	<title>更新処理</title>
11	<link href="css/screen.css" rel="stylesheet">
12	<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
13	<link href="css/web-style-support.css" rel="stylesheet">
14	<script src="js/admin.js"></script>
15	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
16	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
17</head>
18<body>
19	<table width="1240px" align="left">
20		<tr>
21			<td>
22				<h3>更新処理テスト</h3>
23			</td>
24		</tr>
25	</table>
26	<table class="list_table" style="margin-top:0px">
27		<input id="btn_update" type="button" value="DB更新" />
28	</table>
29</body>
30</html>
31

※Ajax通信処理

Js
1$('#btn_update').on('click', function() {
2	$.ajax({
3		type: 'POST',
4		url: './update_db.php',
5		data: { },
6		dataType: 'json',
7		timeout: 5000,
8	})
9	.done(
10		// 通信成功時
11		function (data) {
12			if (0 < data.cnt) {
13				alert('成功');
14			}
15		}).fail(
16			function (XMLHttpRequest, textStatus, errorThrown) {
17				alert('失敗');
18		});
19	}

※POST送信を受け取るPHP

PHP
1<?php
2	session_start();
3
4	$dsn  = 'mysql:host=localhost;dbname=XXXXX;charset=utf8';
5	$pass = 'XXXXXXXXXX';
6	$user = 'XXXXX';
7	
8	$err = '';
9	try {
10		$dbh = new PDO($dsn, $user, $pass, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
11		
12		$sql = "UPDATE test_table SET update_date = now()";
13
14		$prepare = $dbh->prepare($sql);
15
16		// プリペアードステートメント実行
17		$prepare->execute();
18
19		$res = $prepare->rowCount();
20
21	} catch (PDOException $e) {
22		$msg = $e->getMessage();
23		// エラー
24		$err = $msg;
25	}
26	echo json_encode(['cnt' => $res, 'err' => $err]);
27?>

補足情報（FW/ツールのバージョンなど）

Linux
PHP 7.3
FireFox 89.0
Edge 91.0.864.41
Chrome 91.0.4472.101

Lhankor_Mhy

2021/06/12 02:09

ご提示の JavaScript は admin.js ですか？

entaro12345

2021/06/12 02:15 編集

Lhankor_Mhyさまはい、admin.jsです。そして、下のPHPのコードがupdate_db.phpとなっております。

退会済みユーザー

2021/06/12 02:21 編集

Fiddler などのキャプチャツールを使って要求・応答をキャプチャして、うまくいく場合 (Edge / Chrome) とダメな場合 (Firefox) を比較してみるとかしましたか？　やってなければやってみましょう。そこに解決のためのヒントが見つかるのではないかと思います。　既にやっているならその違いを質問欄を編集して書いてください。

entaro12345

2021/06/12 02:20

SurferOnWwwさまご指摘ありがとうございます。質問欄に追記いたします。

Lhankor_Mhy

2021/06/12 02:28

そうだとすると、jQuery読み込み前には動作しないように見えるのですが、そこはご提示いただいていない部分で上手くやっているのですか？

退会済みユーザー

2021/06/12 02:33

追記されたようですがそれは単なる結果ですよね？　先のコメントの「Fiddler などのキャプチャツールを使って要求・応答をキャプチャ」というところを理解されているでしょうか？　ブラウザから全く同じ要求が出て行っていれば応答が違うということはないはずなので、まずはそこを調べてはいかがということなのですが？　応答を見ても 200 と 500 の違いとか何か分かるかも。

entaro12345

2021/06/12 02:36

SurferOnWwwさま失礼いたしました。確認し、追記いたします。

m.ts10806

2021/06/12 03:07

指摘の通りjQuery読み込み前にjQueryの機能使われてるので等しく動作しないと思います。

entaro12345

2021/06/12 04:44

Lhankor_Mhyさま、m.ts10806 ご指摘ありがとうございます。 jQuery読込後にadmin.jsを読み込むようにしましたが、結果は変わらずでした。 SurferOnWwwさま要求・応答を確認したところ、Chrome/Firefoxともに200で問題ないことがわかりました。

退会済みユーザー

2021/06/12 04:51

先にもコメントしましたが、うまくいく場合 (Edge / Chrome) とダメな場合 (Firefox) を比較してみましたか？　そこにヒントはありませんでしたか？

entaro12345

2021/06/12 05:30

SurferOnWwwさまはい、比較してみたのですが、同じようです。キャプチャを貼り付けます。

entaro12345

2021/06/12 05:41

Firefoxでデバッグしてみて少し挙動が異なることがわかりました。デバッグでブレイクポイントをajax通信前に置いて一旦停止させるとajax通信が成功することが判明しました。

Lhankor_Mhy

2021/06/12 05:54

リクエストログですが、一番下のものでいいんですよね？よくわからないのですが、MIMEタイプはこれでいいんでしょうか……？

退会済みユーザー

2021/06/12 06:08

Fiddler の画像を貼ったようですが、それでは何にも分かりません。そういうのではなくて、［DB更新］ボタンをクリックしたときの応答・要求が Fiddler の右側のウィンドウに表示されるはずですがそれの違いを見てください。ところで、質問に書いてあった JavaScript は動かないのでは？　ホントにそれでやってます？

退会済みユーザー

2021/06/12 08:04

言葉では伝わらないみたいですので、Fiddler の画像を回答欄に貼っておきます。回答にはなってませんが回答欄でないと画像は貼れませんのでご了承を。

Lhankor_Mhy

2021/06/12 08:35

（回答欄でアップロードさえしてしまえば、実は回答を投稿しなくても画像URLは有効だったりします） https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ece6588f8f92f3d7475bc12f7383325c.png

退会済みユーザー

2021/06/13 06:17

Lhankor_Mhy さん＞情報をありがとうございます。次回トライしてみます。

退会済みユーザー

2021/06/13 06:21

質問者さん＞その後無言ですが、コメントへのフィードバックをしてください。ギブアップしたとか、質問とは別の方向に進むとか、自己解決したとかでここでの Q&A は不要になったということなら、それはそれで構いませんので、自分で回答欄にその旨書いてこのスレッドはクローズしてください。とにかく無言で放置は NG です。

entaro12345

2021/06/14 00:03

みなさま大変失礼いたしました。まだ解決には至っておりませんが、SurferOnWwwさまに張り付けていただいたようにブラウザによって異なるのか確認してみます。

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

回答2件

自己解決

みなさまにいろいろとアドバイス等をいただきありがとうございました。
今回は、Edgeがメインで補助としてChrome対応ができていればOKということになりましたので、
一旦解決とさせていただきます。
が、今後のことも考え引き続き調査は続けていこうと思います。

投稿2021/06/14 23:23

entaro12345

総合スコア75

質問のコメント欄の私の 2021/06/12 17:04 のコメントで「言葉では伝わらないみたいですので、Fiddler の画像を回答欄に貼っておきます」と書いた件です。

回答にはなってませんが回答欄でないと画像は貼れませんのでご了承を。

［DB更新］ボタンをクリックしたときの応答・要求を Fiddler で見たものです。JavaScript は質問者さんのものと同じ（そのままでは動かないところは直しましたが）、ブラウザは Chrome バージョン: 91.0.4472.101（Official Build）（64 ビット）です。Firefox 89.0 でも全く問題なく動きます。