Zenn
💬

HTTPリクエストの送り方２（XMLHttpRequest・Fetch）

2023/03/03に公開
#
fetch
#
Ajax
#
xmlhttprequest
#
httpリクエスト
tech

概要

HTTPリクエストを送る方法のメモ。
JavaScriptからのAjaxリクエスト。
HTTPリクエスト（curlやform送信、pythonによる）の送り方は以下にも書いた。
https://zenn.dev/n_nishino/articles/d21a61df114fdd

記載した方法一覧

  • JS（XMLHttpRequest）利用
  • JS（Fetch）利用

1.XMLHttpRequestによるAjaxリクエスト

onloadイベントを利用してレスポンスをコンソールに表示する。
onload以外にも、XMLHttpRequestに関するイベントは下記サイトにわかりやすくまとめられている。
https://qiita.com/ShinyaKato/items/64b6726c361f5377b0f3

例

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で学ぶ脆弱性攻略の技術
https://amzn.to/3lEAcgY

Discussion