jQuery を使用せずに Ajax 呼び出しを行う
このチュートリアルでは、外部ライブラリを必要とせずに JavaScript で AJAX 呼び出しを行う方法を説明します。 そこで、次のことを教えます。
XMLHttpRequestで AJAX 呼び出しを行う方法FetchAPI を使用して AJAX 呼び出しを行う方法
JavaScript で XMLHttpRequest を使用して Ajax 呼び出しを行う方法
XMLHttpRequest は、AJAX 呼び出しを可能にする JavaScript のオブジェクトです。 一連のメソッドのおかげでこれが可能になります。
これらの方法には次のものがあります。
XMLHTTPRequest.onreadystatechange()XMLHTTPRequest.readyStateXMLHTTPRequest.status()XMLHTTPRequest.open()XMLHTTPRequest.send()
これらのメソッドを正しく組み合わせると、AJAX 呼び出しを行うことができます。 また、オブジェクト名から、それらが何をするかがわかります。
たとえば、XMLHTTPRequest.send() は、準備ができたら AJAX 呼び出しを送信します。 以下は、AJAX 呼び出しに XMLHttpRequest を使用するための典型的なアルゴリズムです。
-
新しい
XMLHTTPRequestオブジェクトを作成します -
XMLHTTPRequest.onreadystatechange()に関数を付ける2.1 この関数は、
XMLHTTPRequest.readyStateがDONEを返すかどうかをチェックします
2.2XMLHTTPRequest.status()を確認し、それに応じて対処する -
AJAX 接続を開きます
3.1 これは、接続が
GETリクエストかPOSTリクエストかを指定する部分です。 -
AJAX 呼び出しを送信する
一方、達成しようとしているものによっては、アルゴリズムが長くなる場合があります。 ただし、次に詳しく説明する例では、アルゴリズムが目的を果たします。
ユーザーは、例の HTML ボタンをクリックして AJAX 呼び出しを開始できます。 この呼び出しは、<main> 要素の内容を置き換えます。
<head>
<meta charset="utf-8">
<title>Plain AJAX Request</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #1a1a1a;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="button_container">
<button type="button" onclick="load_ajax_button()">CLICK ME</button>
</main>
<script>
function load_ajax_button() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let button_container = document.getElementById("button_container")
button_container.innerHTML = this.responseText;
}
xhttp.open("GET", "ajax-button.html", true);
xhttp.send();
}
</script>
</body>
出力：
JavaScript で Fetch API を使用して Ajax 呼び出しを行う方法
Fetch API は、AJAX 呼び出しを可能にする最新の Web ブラウザーの組み込み機能です。 さらに、Fetch API は XMLHttpRequest の最新バージョンと考えることができます。
たとえば、以下のコードでは、HTML ボタンを押すたびに、Picsum API からランダムな画像を取得します。 一方、プロセスの仕組みは次のとおりです。
HTMLボタンをクリックして、PicsumAPI へのFetchリクエストを開始します。PicsumAPI レスポンスからurlプロパティを取得します。 これは、urlにランダムな画像のアドレスが含まれているためです。PicsumAPI からのアドレスを画像ソースとして使用します。- したがって、
HTMLボタンをクリックするたびに、新しいランダムな画像が取得されます。
<head>
<meta charset="utf-8">
<title>Fetch API</title>
<style>
main {
text-align: center;
margin: 0 auto;
max-width: 800px;
}
img {
max-width: 100%;
display: inline-block;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<main>
<h2>A Simple Fetch API Example</h2>
<div class="img-container">
<img src="" id="random_image" width="300" height="300">
</div>
<button>Click Me for a Random Image</button>
</main>
<script>
let button = document.querySelector('button');
button.addEventListener('click', function () {
fetch('https://picsum.photos/200/300')
.then((response) => {
return response;
})
.then((image_source) => {
random_image.src = image_source['url'];
});
}, false);
</script>
</body>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn