九保すこひです（フリーランスのITコンサルタント、エンジニア）
さてさて、この前「axios不要！fetch()でAjax通信する方法」という記事で新しいAjax送信の方法をご紹介しました。
この記事で少し書いたのですが、私の場合$.ajax()を使っていたのが結構前のことなのでとても懐かったです。
そして、その瞬間ふとやってみたいことが頭に浮かんできました。
それは・・・
Ajax送信の移り変わりを見たい❗
です。
正直なところ、古い書き方を紹介して何になるんだというご意見もあるでしょうが、ぜひ今回の記事を読んで年配のエンジニアさんに聞いてみてください。
あなた「いやー、昔のAjaxって書き方めんどうだったんですよね❓❓」
と。
きっと、「おっ、知ってるのか！？」と人間関係がスムーズになる（かもしれません😂）
また、過去を知ることで現在、そして未来を知ることに繋がると思います。
ぜひ予備知識として楽しんでください。
「私が存在を知った
逆順で紹介していきます」
目次
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);
おわりに
ということで、今回はAjax送信するコードを比較してみました。
個人的によく使った印象があるのがjQueryで、現在よく使っているのはaxiosです。
そして、まだjQueryどころか、prototype.jsと呼ばれるライブラリが主流だった頃はよく最後に紹介した長いコードを書いていたものでした。
ちなみにprototype.jsがどうなっているか見に行ってみると、まだ存在はしていましたが、2015年9月22日を最後に更新されてませんでした。（2020.4.13現在）
ということで、プログラムのテクノロジーが日々進化していることを実感していただけると嬉しいです。
ではでは〜❗
「もう昔の書き方はしたくないです😂」
