XMLHttpRequest：GetとPostの違い: データベースエンジニアが行く

<< uncaught reference error: $ is not defined | TOP

2024年11月12日

XMLHttpRequest：GetとPostの違い

普段、XMLHttpRequestはGetで使用している。

しかし、Postで作成して欲しいと要望があったので困った。

参照先：https://so-zou.jp/web-app/tech/programming/javascript/ajax/post.htm

上のページを参考にして、以下を作成した。

注意）私の環境でしか動作しないと思います。

　function getPage() {
　　var pageURL="https://sample.com/test/login.php";
　　var xhr = new XMLHttpRequest();
　　xhr.open("POST", pageURL);
　　xhr.setRequestHeader('Authorization','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
　　xhr.setRequestHeader('Content-Type', 'application/json' );
　　xhr.onreadystatechange = function (e) {
　　　if (xhr.readyState === 4) {
　　　　if (xhr.status === 200) {
　　　　　const rt = xhr.responseText;
　　　　　const parsed = JSON.parse(rt);
　　　　　var result = parsed.status;
　　　　　if (result==-1) {
　　　　　　console.log(parsed.message);
　　　　　} else {
　　　　　　console.log(rt);
// 　　　　　console.log(parsed.data.lastName + parsed.data.firstName);
　　　　　}
　　　　} else {
　　　　　console.error("error");
　　　　　return;
　　　　}
　　　}
　　};
　　xhr.send(JSON.stringify({ lastName : 'Hanako', firstName: 'Yamada'}));
　}

GETとPOSTの違い

open()メソッドで「POST」と指定する。
　例： xhr.open("POST", pageURL);
setRequestHeader()メソッドでContent-Typeを指定する。
　例：xhr.setRequestHeader('Content-Type', 'application/json' );
send()メソッドの引数に送信するデータを含める。
　例：xhr.send(JSON.stringify({ lastName : 'Hanako', firstName: 'Yamada'}));

【このカテゴリーの最新記事】