こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

【X】九保すこひ＠フリーランスエンジニア

さてさて、この前「axios不要！fetch()でAjax通信する方法」という記事で新しいAjax送信の方法をご紹介しました。

この記事で少し書いたのですが、私の場合$.ajax()を使っていたのが結構前のことなのでとても懐かったです。

そして、その瞬間ふとやってみたいことが頭に浮かんできました。

それは・・・

Ajax送信の移り変わりを見たい

です。

正直なところ、古い書き方を紹介して何になるんだというご意見もあるでしょうが、ぜひ今回の記事を読んで年配のエンジニアさんに聞いてみてください。

あなた「いやー、昔のAjaxって書き方めんどうだったんですよね」

と。

きっと、「おっ、知ってるのか！？」と人間関係がスムーズになる（かもしれません）

また、過去を知ることで現在、そして未来を知ることに繋がると思います。
ぜひ予備知識として楽しんでください。

「私が存在を知った
逆順で紹介していきます」

目次 [非表示]

1 fetch()を使ったAjax送信
- 1.1 GETの場合
- 1.2 POSTの場合
2 axiosを使ったAjax送信
- 2.1 GETの場合
- 2.2 POSTの場合
3 jQueryを使ったAjax送信
4 初期のAjax送信
- 4.1 GETの場合
- 4.2 POSTの場合
5 おわりに

fetch()を使ったAjax送信

fetch()は比較的新しい機能でライブラリを読み込まなくても使えるのがメリットです。

ただ、「axios不要！fetch()でAjax通信する方法」でも書いたように少しクセがあるので、もし使えるならaxiosがおすすめです。

GETの場合

const url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url)
    .then(response => response.json()) //  この辺が少しクセあり
    .then(data => {

        console.log(data);

    })
    .catch(error => {

        console.log(error);

    });

POSTの場合

const url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
    name: '山田太郎',
    email: 'taro@example.com',
    password: 'secret'
};
fetch(url, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'}, //  ここも少しクセあり
    body: JSON.stringify(params)
})
.then(response => response.json())
.then(data => {

    console.log(data);

})
.catch(error => {

    console.log(error);

});

axiosを使ったAjax送信

axiosは、Laravelでも採用されている人気のあるAjax送信パッケージです。GET、POSTともにシンプルに記述できます。

なお、バージョン0.19.2を使った例です。

GETの場合

const url = 'https://jsonplaceholder.typicode.com/posts';
axios.get(url)
    .then(response => { //  とてもシンプル

        console.log(response.data);

    })
    .catch(error => {

        console.log(error);

    });

POSTの場合

const url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
    name: '山田太郎',
    email: 'taro@example.com',
    password: 'secret'
};
axios.post(url, params) //  パラメータ指定もシンプル
    .then(response => {

        console.log(response.data);

    })
    .catch(error => {

        console.log(error);

    });

jQueryを使ったAjax送信

jQueryの場合、$.ajax()を使った例もありますが、より可読性が高い書き方をチョイスしました。axiosと同じくシンプルに書くことができます。

バージョンは、3.4.1です。

GETの場合

const url = 'https://jsonplaceholder.typicode.com/posts';
$.get(url)
    .done(data => { //  とてもシンプル

        console.log(data);

    })
    .fail(error => {

        console.log(error);

    });

POSTの場合

const url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
    name: '山田太郎',
    email: 'taro@example.com',
    password: 'secret'
};
$.post(url, params) //  パラメータ指定もシンプル
    .done(data => {

        console.log(data);

    })
    .fail(error => {

        console.log(error);

    });

jQueryのちなみに

ちなみに次のようなslimバージョンを使うと上手くいきません。
slimバージョンにはAjax機能がついていないからです。

//  Ajax機能はついていない
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

そのため、jQueryでAjax送信するにはminバージョンを使ってください。

//  Ajax機能が使えます
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

初期のAjax送信

そして最後のAjax送信です。おそらくここ数年でこの書き方をしたことがある人は少ないんじゃないでしょうか。私の場合も10年以上は使っていないと思います。

なお、今回紹介するものは、当時開発者を悩ませていたIE6のことは考慮していません。つまり、if()文を使ってもっと複雑なコードを書いていたということになります。

また、できるだけ当時のコードを復元するためにvarとfunction(){ ... }を使っています。

GETの場合

//  GETはそこまで複雑じゃないです
var url = 'https://jsonplaceholder.typicode.com/posts';
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {

    if(xhr.status === 200) {

        var data = JSON.parse(xhr.responseText);
        console.log(data);

    }

};
xhr.send();

POSTの場合

//  とにかくコードが多かったです
var url = 'https://jsonplaceholder.typicode.com/posts';
var params = {
    name: '山田太郎',
    email: 'taro@example.com',
    password: 'secret'
};
var queries = [];

for(var key in params) {

    var query = key +'='+ encodeURIComponent(params[key]);
    queries.push(query);

}

var queryString = queries.join('&');

var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {

    if(xhr.status === 200) {

        var data = JSON.parse(xhr.responseText);
        console.log(data);

    }

};
xhr.send(queryString);