💬
HTTPリクエストの送り方２（XMLHttpRequest・Fetch）
概要
HTTPリクエストを送る方法のメモ。
JavaScriptからのAjaxリクエスト。
HTTPリクエスト（curlやform送信、pythonによる）の送り方は以下にも書いた。
記載した方法一覧
- JS（XMLHttpRequest）利用
- JS（Fetch）利用
1.XMLHttpRequestによるAjaxリクエスト
onloadイベントを利用してレスポンスをコンソールに表示する。
onload以外にも、XMLHttpRequestに関するイベントは下記サイトにわかりやすくまとめられている。
例
URL：★★にJSONボディとそれに対応するContent-Typeヘッダーを付与し、POSTリクエストするAjaxリクエスト
//XMLHttpRequestオブジェクトの作成
const xhr = new XMLHttpRequest();
//リクエスト先URLとJSONボディパラメータの作成（別に変数にしなくてもいいけど）
let url = "★★";
let body = JSON.stringify({test: "hoge"});
//URLとメソッドを指定
xhr.open("POST", url);
//ヘッダーを設定
xhr.setRequestHeader("Content-Type","application/json");
//レスポンスを受け取り表示する関数の設定
xhr.onload = () =>{
if(xhr.status===200){
console.log("[200 OK]", xhr.responseText);
} else{
console.log("[ERROR]", xhr.statusText);
}
}
//リクエスト送信
xhr.send(body);
2.FetchによるAjaxリクエスト
fetchではthenメソッドでチェーンさせていくことでレスポンスを処理する。
例
URL：★★にJSONボディとそれに対応するContent-Typeヘッダーを付与し、POSTリクエストするAjaxリクエスト
//メソッド、URL、JSONボディパラメータ、ヘッダーの作成
let method = "POST";
let url = "★★";
let body = JSON.stringify({test: "hoge"});
let headers = {"Content-Type": "application/json"};
//リクエストを送信
fetch(url, {method, headers, body})
//レスポンスを受け取った際の処理を設定
.then(response =>{
if(response.ok){
return response.text();
} else{
throw new Error();
}
})
.then(text => console.log(text))
.catch(error => console.error(error))
参考
詳解セキュリティコンテスト ~CTFで学ぶ脆弱性攻略の技術
Discussion