Help us understand the problem. What is going on with this article?

XMLHttpRequestについて。 もっと言えば、setRequestHeader() について。

前提

XMLHttpRequestとは

JavaScriptでAjax(非同期通信)を行う原初の方法。
使いづらいため、素のまま使われることはほとんど無いが、
jQueryのajaxメソッドや、axiosライブラリはこの方法を利用して実行されている。

使い方

参考:【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ!

GET通信の場合

JavaScript
const インスタンス名 = new XMLHttpRequest();

インスタンス名.open( 'GET', 送信先 ); 
インスタンス名.send();

インスタンス名.onreadystatechange = function() {
  if( インスタンス名.readyState === 4 && インスタンス名.status === 200 ) {
    //エラーを出さずに通信が完了した時の処理。
    // ↓ 例 ↓
    console.log( インスタンス名.responseText );
  }
}

NOTE
「送信先」と書いた部分は、HTMLであれば<form action="○○○">に指定する値を記入する。
GET通信の場合、送信するパラメータも送信先と一緒に記述する。
例:✕✕✕.open('GET','/○○○.php?△△△=□□□');

POST通信の場合

JavaScript
const インスタンス名 = new XMLHttpRequest();

インスタンス名.open( 'POST', 送信先 );
インスタンス名.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
インスタンス名.send( 'パラメータ=値' );

インスタンス名.onreadystatechange = function() {
  if( インスタンス名.readyState === 4 && インスタンス名.status === 200 ) {
    //エラーを出さずに通信が完了した時の処理。例↓
    console.log( インスタンス名.responseText );
  }
}

NOTE
GET通信との違いは…
1. 送信するパラメータはsend()の引数に指定する。
2. open()send()の間にsetRequestHeader()を記述する。

解説

open()

通信方式(GETまたはPOST)と、リクエストの送信先を設定するメソッド。

send()

Ajax通信を開始するメソッド。

setRequestHeader()

HTTPリクエストヘッダを設定するメソッド。
(参考: HTTPリクエストヘッダとは

第一引数にヘッダ名、第二引数にヘッダの値を記入する。
HTTPリクエストヘッダにはたくさんの種類があるが、
今回の使い方ではcontent-typeの指定をしていれば問題ない。

content-type

送るデータの形式を指定する。

  application/x-www-form-urlencoded

  送信するデータを、テキスト形式に指定する。
  HTMLの<form>からデータを送信する時に使われる、デフォルトのデータ形式。
  <form>を使用しない場合でも、テキスト形式で送信するのであれば問題なく使える。

  charset=UTF-8

  送信するデータの文字コードを UTF-8 に指定する。

    テキスト形式以外で、よく使われる形式は…

    multipart/form-data

    バイナリ形式。画像やファイルなどを送信する場合に使う。

    application/json

    JSON形式。

responseText

レスポンスをテキスト形式で表すプロパティ。
レスポンスがJSON形式だったとしても文字列型として帰って来るので、
その場合はJSON.parse(インスタンス名.responseText)で変換しよう。
レスポンスをXML形式で扱いたい場合は responseXML を使う。

onreadystatechange / readyState / status

冒頭の参考リンクにて、詳しく説明されています。

おわり

Ajaxについて勉強中です。
setRequestHeader()で何を指定すればいいのか理解できず、
メンター様に質問したらわかりやすく教えてくださったので、知識を共有します。
ご意見やアドバイスなど、コメントお待ちしております!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away