JavaScript で URL から JSON を取得する
Anika Tabassum Era
2023年10月12日
JSON 形式は特定の URL から取得されます。データは複数の形式にすることができ、人間とコンピューターにとって最も読みやすい形式の 1つです。
ここでは、URL から JSON を取得して JavaScript で使用する 3つの方法について説明します。
jQuery を使用して URL から JSON を取得する
通常、jQuery.getJSON(url, data, success) は、URL から JSON を取得するための署名メソッドです。この場合、URL はデータの正確な場所を保証する文字列であり、data はサーバーに送信される単なるオブジェクトです。そして、リクエストが成功した場合、ステータスは成功を介して取得されます。このプロセスの簡単なコードデモンストレーションがあります。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.6.4.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="display"></div>
<script>
$.getJSON('https://jsonplaceholder.typicode.com/todos/1', function(data){
var display = `User_ID: ${data.userId}<br>
ID: ${data.id}<br>
Title: ${data.title}<br>
Completion_Status: ${data.completed}`
$(".display").html(display);
});
</script>
</body>
</html>
出力：
Fetch API メソッドによる URL からの JSON
この場合、fetch メソッドはデータサーバーを割り当てるために単に URL を取得し、JSON データを確実に返します。
コードスニペット：
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(result => result.json())
.then((output) => {
console.log('Output: ', output);
})
.catch(err => console.error(err));
出力：
JSON FromURL に XMLHttpRequest を使用する
ここでは、最初に XMLHttpRequest のインスタンスを持つ関数で URL を取得します。open メソッドを使用して初期化リクエストを準備し、後で responseType を使用してレスポンスタイプを定義します。最後に、onload メソッドがリクエストに応答し、出力をプレビューします。
コードスニペット：
var getJSON = function(url, callback) {
var xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.open('GET', url, true);
xmlhttprequest.responseType = 'json';
xmlhttprequest.onload = function() {
var status = xmlhttprequest.status;
if (status == 200) {
callback(null, xmlhttprequest.response);
} else {
callback(status, xmlhttprequest.response);
}
};
xmlhttprequest.send();
};
getJSON('https://jsonplaceholder.typicode.com/todos/1', function(err, data) {
if (err != null) {
console.error(err);
} else {
var display = `User_ID: ${data.userId}
ID: ${data.id}
Title: ${data.title}
Completion_Status: ${data.completed}`;
}
console.log(display);
});
出力：
