XMLHttpRequest から jQuery.ajax への乗り換え

Question

こんにちは。

TypeScriptでXMLHttpRequestを使っているのですが、jQuery.ajaxの方が書きやすそうなので
乗り換えようとしています。が、その書き換え方で苦しんでしまっています。
jQueryは3.5です。

↓これ(正常動作を確認済み)を

/*
** XMLHttpRequest版
*/
function _login(key: string, accountId: string, password: string): void {
	const httpRequest = new XMLHttpRequest();

	httpRequest.open("POST", "https://xxxxx/xxx/xxxxx");
	httpRequest.setRequestHeader("Content-Type", "application/json");
	httpRequest.setRequestHeader("XXXXX", key);

	httpRequest.onreadystatechange = (): void => {
		const readyState = httpRequest.readyState;
		if (readyState === XMLHttpRequest.DONE) {
			const status = httpRequest.status;
			if (status === 201) { //Created
				const sessionJson = JSON.parse(httpRequest.responseText);
				nextStep(accountId, sessionJson.token as string);
			}
		}
	}
	httpRequest.send(`{"accountId":"${accountId}","password":"${password}"}`);
}

↓こんな感じに書き換えて見たのですが400(Bad Request)になってしまいます。

/*
** jQuery.ajax版
*/
function login(key: string, accountId: string, password: string): void {
	$.ajax("https://xxxxx/xxx/xxxxx", {
		type: "POST",
		contentType: "application/json",
		headers: {
			'XXXXX': key
		},
		data: {
			accountId: accountId,
			password: password
		},
		dataType: "json"
	})
	.done((response: any) => {
		const sessionJson = JSON.parse(response);
		nextStep(accountId, sessionJson.token as string);
	})
	.fail(() => {
		console.log("err!"); //400 BadRequest
	});
}

Bad Requestが返るということはAPIを叩く事は出来ている。が叩き方が悪いのだと思っています。
正しく叩くにはどう書けは良いのでしょうか。

JQueryAjaxSettingsのどれがヘッダでどれがボディに当たるのかがわからなくて
検索したり、試行錯誤したり、といった状態です。

よろしくおねがいします。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あとfailにもコールバック引数沢山あるのでそれぞれ確認してください。
https://api.jquery.com/jquery.ajax/
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.

[alan0223]

コードの書き方ありがとうございます。
fail見直してみます。このページは結構読んだのですが、また読み直します。

[Lhankor_Mhy]

両者のリクエストヘッダに違いはありますか？

[Lhankor_Mhy]

上記のリクエストヘッダの件、自分の環境で試してみたところ、
jQueryでは、X-Requested-With が追加されていました。

ドキュメントを見たところ、
> The header X-Requested-With: XMLHttpRequest is always added, but its default XMLHttpRequest value can be changed here.
https://api.jquery.com/jQuery.ajax/
とのこと。

このヘッダをサーバでチェックしている可能性はありませんか？

[Lhankor_Mhy]

あと、Accept ヘッダの内容も異なりました。

[alan0223]

>両者のリクエストヘッダに違いはありますか？
無いつもりで書いているのですが、実際には違うのかもしれません。
JQueryAjaxSettingsのどれがヘッダでどれがボディに当たるのかがわからなくて
検索したり、試行錯誤したり、といった状態です。

[Lhankor_Mhy]

> 無いつもりで書いているのですが、実際には違うのかもしれません。

では、ご確認された方がいいと思います。
もって回った言い方をして申し訳ありません。「両者のリクエストヘッダに違いはありますか？」とは「両者のリクエストヘッダに違いがあるかどうかを調べて、ここに提示してください」という意味です。
開発者ツールの使い方はわかりますか？

繰り返しになりますが、当方で試したところ上記の通りの違いがありますので、それが原因かどうかをサーバ側管理者に照会することが問題解決につながるのではないか、と考えています。

[Lhankor_Mhy]

「400(Bad Request)になってしまいます」という話はどうなったんだろう？

[alan0223]

解消しました。

Answer 1

TypeScriptでXMLHttpRequestを使っているのですが、jQuery.ajaxの方が書きやすそうなので

乗り換えようとしています。が、その書き換え方で苦しんでしまっています。

それなら書き換える必要自体ないかと思うのですが、どうなのでしょうか？

Comments

[alan0223]

未完成、発展途上のコードで、これからまだ大きくなる予定なので、
小さなうちにより良い仕方にしておこうという趣旨の変更です。

[maisumakun]

jQueryを使うことが、必ずしも「より良い」とは限りません。

Answer 2

とつぜんひらめいてできました。もうちょっとだったんですねー。
.doneの第一引数は最初からJSONでパース不要でした。

/*
** jQuery.ajax版
*/
function login(key: string, accountId: string, password: string): void {
	$.ajax("https://xxxxx/xxx/xxxxx", {
		type: "POST",
		headers: {
			contentType: "application/json",
			"XXXXX": key
		},
		data: {
			accountId: accountId,
			password: password
		},
		dataType: "json"
	})
	.done((json: any) => {
		nextStep(accountId, json.token as string);
	})
	.fail(() => {
		console.log("err!");
	});
}