TIL#39 AJAX

12765 ワード
JavaScript 非同期 TIL ajax XML テキストリンク

AJAX


Asynchronous JavaScript AndXml(非同期JavaScriptとXML)の略で、JavaScriptのライブラリです.これは、ブラウザが所有するXMLHttpRequestオブジェクトを使用して、ページ全体をリフレッシュせずにページの一部のみのデータをロードする方法です.
これは,JavaScriptを介してサーバにデータを要求することを意味する.AJAXというネットワーク技術を使用すると、クライアントはサーバにデータを要求し、結果を返すことができます.

非同期


非同期方式は,Webページを再ロードせずにデータをロードする方式であり,Ajaxを介してサーバに要求して停止するのではなく,プログラムが継続して実行されることを示す.

非同期のメリット


ページのロードには、リソース全体を再ロードする必要がありますが、画像、スクリプト、その他のコードなどを再要求すると、不要なリソースが浪費されますが、非同期方式を使用すると、必要な部分のみをロードおよび使用できるため、大きなメリットがあります.

AJAXの機能


AJAXというネットワーク技術を使用すると、クライアントはサーバにデータを要求し、結果を返すことができます.

  • クライアント
    サーバから情報を取得し,ユーザに表示して対話できるソフトウェアである.

  • サーバー
    ネットワーク上でアクセス可能なプログラムであって、特定の資料の管理またはアクセスを制御するプログラム.サーバは一般的にユーザーによって直接使用されません.

    • なぜAJAXを使うのか


    WEB画面で何かを歌ったり、データを閲覧したりするだけであれば、ページ全体のリフレッシュを避けるために使用されていると考えられます.(ページ全体を再ロードする必要はなく、必要なデータをロードするだけです.)
    基本的に、HTTPプロトコルはクライアントから要求を送信し、サーバ側で応答を受信すると接続が切断されます.だから画面の内容を更新するために、再び要求して、応答して、ページ全体を更新します.このようにすると、大きな資源の浪費と時間の浪費をもたらします.
    AJAXはXMLHttpRequestオブジェクトを介してサーバに要求し、HTMLページ全体ではなく一部のみを更新します.この場合、必要なJSONまたはXML形式のデータのみを受信して更新するので、対応するリソースと時間を節約できます.
    JSON式は人も機械も分かりやすく、容量も小さく、最近ではXMLの代わりにデータを転送するためによく使われています.

    さぎょうげんり


  • ユーザーが要求イベントを発行

  • 要求イベントが発生すると、イベントハンドラはJavaScriptを呼び出します.

  • JavaScriptは、XMLHttpRequestオブジェクトを使用してサーバにリクエストを送信します.
    ㄴこのときWebブラウザが要求を送信すると,サーバの応答を待たずに他のタスクを処理できる.

  • サーバはAjaxリクエストを処理し、受信したXMLHttpRequestオブジェクトが含まれます.

  • サーバは、処理結果をHTML、XMLまたはJSON形式のデータでWebブラウザに渡す.
    このとき伝達される回答は,すべての新しいページを送信するのではなく,必要なデータだけを伝達する.

  • サーバから送信されたデータ呼び出しを使用して、Webページの一部のみを更新するJavaScript.

  • その結果、一部のWebページだけが再ロードされて表示されます.

    • メリットとデメリット


  • 長所
  • Webページのスピードアップ
  • サーバの処理が完了するのを待たずに処理を行うことができる.
  • サーバ上でデータを転送するだけで、全体的な符号化量を削減できます.
  • は、既存のWeb上では実現不可能な様々なUIを可能にする.

  • 短所
  • はストレージ管理を行わない.
  • ページの通信がないため、セキュリティの問題があります.
  • 連続でデータを要求すると、サーバ負荷が増加する可能性があります.
  • XMLHttpRequestを介して通信する場合、進捗情報はユーザーに提供されません.
    • (要求が完了していない場合、ユーザーがページを離れたり、エラーが発生したりする可能性があります)
  • AJAXを使用できないブラウザについて質問があります.
  • HTTPクライアントの機能とサポートされるCharsetは限られています.
  • スクリプトで作成され、デバッグが容易ではありません.
  • と同じ-ソースポリシーのため、他のドメインと通信できません.(クロスドメイン問題)

    • AJAX例


    1.XMLHttpRequestの使用例

    <html>
 <head>
  <script type="text/javascript">
   var request = new XMLHttpRequest(); // XMLHttpRequest 생성
   request.open("GET", "//namu.wiki/raw/틀:틀%20모음/"); // 데이터를 GET Method로 요청
   request.onreadystatechange = function() {
    if ( request.readyState === 4 && request.status === 200 ) { // request가 끝났으며(4), 성공적(200)인 경우.
     document.getElementById("content").innerHTML = resquest.responseText; // #content 태그 내의 내용을 받아온 텍스트로 교체.
    }
   }
  </script>
 </head>
 <body>
  <div id="content"></div>
 </body>
</html>

    2.Fetch APIの使用例

    <html>
 <head>
  <script type="text/javascript">
   fetch("//namu.wiki/raw/틀:틀%20모음/") // fetch API로 데이터를 요청
    .then((response) => {
     if (response.ok) { // HTTP Status가 성공적인 (200 등) 경우
      return response.text(); // Response Body를 text로 꺼내옴
     } else { // 4xx/5xx 에러로 요청 실패
      return Promise.reject(`Error code ${response.status}`);
    }).then((text) => {
     document.getElementById("content").innerHTML = text;  // #content 태그 내의 내용을 받아온 텍스트로 교체.
    }).catch(() => { // 네트워크 문제일 경우만 reject됨
      console.warn('network problem');
    };
  </script>
 </head>
 <body>
  <div id="content"></div>
 </body>
</html>

    注意)XML


    XMLは、データを格納および転送するために作成され、データを格納する構造を記述する言語である.
    XMLは拡張可能なタグ言語の略であり、多くの応用分野でデータの格納と伝達の重要な役割を果たしている.
    データセット構成と過剰継ぎ手
    質問:オブジェクトと配列を条件に合成して新しいオブジェクトに戻す