はじめに
「とりあえず動く簡単なAjaxの実装サンプルがあればいいなぁ〜」と思い、この記事を書きました。
各サンプルをコピーして、カスタマイズし、テストや学習に役立てていただけると幸いです。
サンプルのurl、「https://httpbin.org」についてはこちらの記事をご参考にしてください。
ただのJavaScriptのAjax実装サンプル
main_js.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ajaxテスト(js)</title>
</head>
<body>
<p>ajaxテスト(js)</p>
<input id="button-get" type="button" value="テスト(GET通信)">
<input id="button-post" type="button" value="テスト(POST通信)">
<script>
// テスト(GET通信)ボタンクリック時のイベント
document.getElementById("button-get").onclick = function () {
// XMLHttpRequestオブジェクトのインスタンスを生成
let xhr = new XMLHttpRequest();
// 通信を監視するイベントハンドラを設定
xhr.onreadystatechange = function () {
// 通信完了時
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 正常レスポンス
console.log(xhr.response);
} else {
console.log("通信エラー");
}
}
}
// レスポンスの形式を指定
xhr.responseType = "json"
// リクエストメソッドとリクエスト先を設定(クエリパラメータで渡したい値を指定)
xhr.open("GET", "https://httpbin.org/get?param1=p1¶m2=p2");
// リクエスト送信
xhr.send();
};
// テスト(POST通信)ボタンクリック時のイベント
document.getElementById("button-post").onclick = function () {
// XMLHttpRequestオブジェクトのインスタンスを生成
let xhr = new XMLHttpRequest();
// 通信を監視するイベントハンドラを設定
xhr.onreadystatechange = function () {
// 通信完了時
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 正常レスポンス
console.log(xhr.response);
} else {
console.log("通信エラー");
}
}
}
// レスポンスの形式を指定
xhr.responseType = "json";
// リクエストメソッドとリクエスト先を設定
xhr.open("POST", "http://httpbin.org/post");
// HTTPリクエストヘッダを設定
xhr.setRequestHeader("content-type", "application/json");
// リクエスト送信(渡したい値を引数で指定)
xhr.send('{"param1" : "p1", "param2" : "p2"}');
};
</script>
</body>
</html>
jQueryのAjax実装サンプル
main_jq.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ajaxテスト(jquery)</title>
</head>
<body>
<p>ajaxテスト(jquery)</p>
<input id="button-get" type="button" value="テスト(GET通信)">
<input id="button-post" type="button" value="テスト(POST通信)">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// テスト(GET通信)ボタンクリック時のイベント
$("#button-get").click(
function () {
$.ajax({
// 渡したいデータをurlのクエリパラメータで指定
url: "https://httpbin.org/get?param1=p1¶m2=p2",
type: "GET",
dataType: "json"
})
.done(function (data, testStatus, jqXHR) {
// 正常レスポンス
console.log(data);
})
.fail(function (jqXHR, textStatus, erorThrown) {
console.log("通信エラー");
});
}
);
// テスト(POST通信)ボタンクリック時のイベント
$("#button-post").click(
function () {
$.ajax({
url: "https://httpbin.org/post",
type: "POST",
dataType: "json",
// 渡したいデータを指定
data: {"param1" : "p1", "param2" : "p2"}
})
.done(function (data, testStatus, jqXHR) {
// 正常レスポンス
console.log(data);
})
.fail(function (jqXHR, textStatus, erorThrown) {
console.log("通信エラー");
});
}
);
</script>
</body>
</html>
axiosのAjax実装サンプル
※axiosについてはこちらをご参照ください。
main_ax.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ajaxテスト(axios)</title>
</head>
<body>
<p>ajaxテスト(axios)</p>
<input id="button-get" type="button" value="テスト(GET通信)">
<input id="button-post" type="button" value="テスト(POST通信)">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// テスト(GET通信)ボタンクリック時のイベント
document.getElementById("button-get").onclick = function () {
// 渡したいデータをurlのクエリパラメータで指定
axios.get("https://httpbin.org/get?param1=p1¶m2=p2")
.then(function (response) {
// 正常レスポンス
console.log(response.data);
})
.catch(function (error) {
console.log("通信エラー");
});
};
// テスト(POST通信)ボタンクリック時のイベント
document.getElementById("button-post").onclick = function () {
// 渡したいデータをurlのクエリパラメータで指定
axios.post("https://httpbin.org/post", {"param1" : "p1", "param2" : "p2"})
.then(function (response) {
// 正常レスポンス
console.log(response.data);
})
.catch(function (error) {
console.log("通信エラー");
});
};
</script>
</body>
</html>