Ajax

なぜAjaxを使うのですか?

ページが変更されるたびにすべてのコンテンツをダウンロードするのは効果的ではありません.Ajaxは、すべてのページをダウンロードする必要がなく、変更された部分に注目するだけで、Webページの一部を更新するのに役立つテクノロジーです.これにより、より高い可用性が得られ、サーバおよびWebブラウザを使用するユーザーの時間、リソース、お金、およびネットワークリソースが節約されます.これが私たちがAjaxを勉強している理由です.
Ajaxでは、動的にAjaxを使用して管理することもできます.index.htmlという基本構造を再使用して、変更可能な部分と変更できない部分を分離するだけです.これは巨大な生産力の向上をもたらす.

fetch API

Ajaxを実装するには様々な方法があるが、その中で最新の技術はfetch APIである.fetch APIの原理を知る必要はなく、使い方を知るだけでAjaxを十分に使えるので、使い方を熟知して原理を理解する順番で学ぶのも良いです.

fetch APIのリクエストと応答

1. fetch

fetch関数は、サーバに最初のパラメータとして渡されるデータを要求します.

  <input type="button" value="fetch" onclick="
    fetch('javascript')
   "> 

2. then

サーバは、適切なデータを取り出して応答するのに時間がかかる場合があります.その間、他のことをするために用意された機能はthenです.
例えば、fetch APIが応答終了時にcabllbackme関数を実行する場合、次のコードについて.

  <input type="button" value="fetch" onclick="
    function callbackme() {
	  console.log('response end');
    }
    fetch('html').then(callbackme);
   ">                                             

コードが次のように表示されている場合、console.ログ・コードが実行中で、Webブラウザが応答を受信した場合は、cabllbackme関数を実行します.これは、fetch APIの実行中に、次のコマンドが実行され、非同期で実行されることを意味します.

    function callbackme() {
      console.log('response end');
    }
    fetch('html').then(callbackme);
    console.log(1);
    console.log(2);
    console.log(3);

3. response

fetch APIの使用方法を確認すると、パラメータがthenのコールバック関数を使用すると、fetch APIの実行時にオブジェクトresponseが関数の最初のパラメータの値として使用されることがわかります.
responseという名前のオブジェクトデータには、fetchによって要求が発行されたときにWebサーバが応答した結果が含まれます.

  <input type="button" value="fetch" onclick="
    fetch('html').then(function(response) {
      console.log(response);
    });
    console.log(1);
    console.log(2);
  ">

上記のコードを実行してコンソールウィンドウのレスポンスオブジェクトを表示すると、レスポンスの複数のプロパティ値status:200を表示できます.
WebブラウザがWebサーバと通信すると、Webサーバが応答してファイルが正常に検索されると、応答時に200に通知される.つまり200は成功を意味する.失敗すると、404が投げ出される.404は、見つからないことを意味する.
これは次のコードと似ています.

  <input type="button" value="fetch" onclick="
    fetch('javascript').then(function(response) {
      if(response.status=='404') {
        alert('Not found')
      }
    });
  ">