JavaScript で URL からデータを取得

この記事では、URL から Web ページにデータをロードし、それに応じてそのデータに対してさらに操作を実行するのに役立つさまざまな JavaScript 関数を学習して使用します。

JavaScript で URL からデータを取得

JavaScript には、URL を使用してデータをロードするための複数の組み込み関数と外部関数があります。その URL は、サーバー側で作成された関数の API 要求を呼び出し、要求に応答するためのデータを返します。

別のメソッドタイプでリクエストを送信することもできますが、この記事では、サーバー側からクライアント側にデータを取得するために主に使用される GET メソッドについて説明します。以下にリストされている JavaScript で GET リクエストを行う方法は複数あります。

1. Fetch メソッド
2. XMLHttp リクエスト

fetch() メソッド

fetch() メソッドは、JavaScript でネットワーク要求を行うための高度な方法であり、最新のブラウザーがそれをサポートしています。fetch() メソッドを使用して、Web ページを更新せずにサーバーに要求を送信することにより、サーバーからデータをロードできます。

async await メソッドを fetch リクエストとともに使用して、promise をコンパクトに作成できます。すべての高度なブラウザで、Async 機能がサポートされています。

基本構文：

let requestRsponse = fetch(url, [params])

<script>
async function funcRequest(url){
 await fetch(url)
    .then((response) => {
      return response.json(); // data into json
    })
    .then((data) => {
      // Here we can use the response Data
    }).
    .catch(function(error) {
      console.log(error);
    });
}
   const url = 'URL of file';
   funcRequest(url);

</script>

上記の JavaScript ソースでは、async await 関数 funcRequest() を宣言しました。これは、引数として URL を取得し、await キーワードで fetch メソッドを使用し、コールバック関数 then()を定義します。応答を JSON データに変換します。

エラーが発生した場合は、ログにエラーを表示するために、console.log() で catch メソッドを使用しました。最後に、URL を保存して、funcRequest(url); に渡しました。

XMLHTTP リクエスト

これは、Web ブラウザと Web サーバー間でデータを転送するオブジェクト形式の API です。XMLHttpRequest は、主に AJAX（非同期 JavaScript および XML）プログラミングで使用されます。

これはプログラミング言語ではありませんが、AJAX は、クライアント側で非同期 Web アプリケーションを開発するためにいくつかの Web テクノロジーを使用する一連の Web 開発手法です。

GET の基本構文：

<script>
my_variable = new XMLHttpRequest(); // object
my_variable.onload = function() {

 // Here, we can use the response Data

}
my_variable.open("GET", "MY_FILE_URL");

my_variable.send();

</script>

上記の JavaScript ソースでは、XMLHttpRequest オブジェクトを作成してから、リクエストのロード中にコールバック関数を定義しました。open 関数を使用し、リクエストメソッドタイプと URL を引数として渡し、XMLHttpRequest() の send() メソッドを呼び出しました。