[WEB]Ajax,非同期

10829 ワード
TIL テキストリンク

Ajaxとは?


✅ Asynchronous JavaScript And XML
✅非同期JavaScriptとXML
オブジェクトを使用してサーバと通信する
JavaScriptを使用すると、サーバとブラウザが非同期でデータを交換できます.
ページ全体をリフレッシュせずにページデータの一部をロードする方法
注:TCPSCHOOL.com，Ajaxベース・MDN Web Docs、Ajaxの起動

ㄴ一部のWebページのみ更新可能（非同期）


ㄴJSON、XML、HTML、テキストファイルなど多様な形式のデータ交換


2.非同期方式とは?


画像ソース:サツマイモ、[クリーンアップ用語]同期と非同期比較
非同期
  • ページ全体をリフレッシュすることなくデータをロードできる
  • ページ全体のリフレッシュ(再ロード)時にリソース全体を再ロードする必要があり、不要なリソース浪費を招く
  • 非同期方式の場合、XMLHttpRequest
  • Ajaxがサーバを要求すると、プログラムは続行される
  • リクエスト送信後、応答(結果)に関係なく:
  • 要求と結果が異なる=要求された箇所はすぐに結果が出ない
  • 時間がかかってもその時間内に他の作業ができる필요한 부분의 데이터만 불러와 사용 가능
    • 同期
  • リクエストと結果が同時に発生=リクエストの場合、リクエストにどれくらい時間がかかっても結果はリクエストの場所に現れる
  • 要求を出すと応答するが、以下の操作を行うべき
  • 実際のcpuは遅くならないが자원의 효율적 사용 가능
  • 非同期方式に比べてデザインは非常にシンプルで直感的だが시스템의 전체적 효율 저하 발생
    • 注:サツマイモ,[用語整理]同期方式と非同期方式の比較・学習は残って、動機と非同期の概念と区別・Surim'sdevelog、AJAXとは?

    3.Ajaxのメリットと限界


    Ajaxのメリット
    1.Webページ全体を再ロードする必要がなく、一部のWebページをリフレッシュする→Webページの速度を上げる
    2.サーバの処理完了を待たない
    3.Webページのロード後にサーバにデータ要求を送信できる
    4.Webページのロード後にサーバからデータを受信できる
    5.バックグラウンド領域からサーバにデータを送信可能
    6.サーバからデータを転送するだけで、全体的な符号化量を削減
    Ajaxの限界
    1.履歴が管理されていない
    2.XMLHttpRequestを介して通信を行う場合、要求が完了するまで、ユーザは進捗情報を取得できない可能性があるため、要求ページを離れる際にエラーが発生する可能性があります.
    3.ページがアクティブでない通信はセキュリティ上の問題を引き起こす可能性がある
    4.Ajaxクライアントを使用してサーバにデータを要求している결과가 주어질 때 까지 아무 것도 못하고 대기해야함サーバプッシュ型リアルタイムサービスが作成できない
    5.Ajaxでバイナリデータを送信または受信できない
    6.AjaxリクエストをAjaxスクリプトを含むサーバ以外のサーバに送信できません
    7.Ajax要求をクライアントのPCに送信できない*클라이언트 풀링 방식なに?
    クライアントプール(client pooling)とは、ユーザがサーバに必要な情報を要求して取得する方法を指す.
    これに対して、サーバプッシュ(Server Push)は、ユーザ要求なしにサーバが自動的に特定の情報を提供できることを意味する.
    最近多く使われているスマートフォンの各種アプリからのプッシュ通知は、サーバープッシュ方式の典型的な例だ.
    出典:TCPSCHOOL.com，Ajaxベース・Surim'sdevelog、AJAXとは?

    4.Ajaxプロセス


  • ajaxリクエストオブジェクトの作成*클라이언트 풀링 방식

  • 要求から応答への事前設定の検証と応答データ処理(応答が完了し、正常かどうか)const xhttp = new XMLHttpRequest();

  • 入力データストア変数の作成if (this.readyState == 4 && this.status == 200)

  • 非同期リクエスト構造の設定let data = this.responseText;／AjaxResを取得する.リクエストjsp

  • 実際の要求の実行xhttp.open("GET", "ajaxRes.jsp");

    • +) readyState


    +) status


    5.Ajax非同期Web開発コード

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ajax.html</title>
  </head>
  <body>
    <button id="btn1">클릭</button>  //해당 버튼을 클릭하면 비동기 방식으로 데이터 요청
    <div id="div1"></div>  //응답 받은 데이터 출력 위치

    <script>
      document.querySelector("#btn1").addEventListener("click", loadDoc);

      function loadDoc() {
        //ajax 요청 객체 생성
        const xhttp = new XMLHttpRequest();

        //요청~응답까지의 검증 및 응답 데이터 처리하는 사전 설정
        //요청 전 시점
        //요청 객체에서 응답 완료, 정상 응답 조건에 한해서만
        //응답된 데이터를 받아서 div1이라는 id tag에 데이터 출력
        xhttp.onreadystatechange = function () {
          //alert(this.readyState);   1~4까지 숫자 확인 가능, 상태가 변경될 때마다 자동 호출
          if (this.readyState == 4 && this.status == 200) {
            let data = this.responseText;
            alert(data);

            document.getElementById("div1").innerHTML = data;
          }
        };

        //GET 방식으로 ajaxRes.jsp에게 요청하는 구조
        //설정
        xhttp.open("GET", "ajaxRes.jsp");

        //실제 요청 수행
        xhttp.send();
      }
    </script>
  </body>
</html>

<!--
    로직

    1. 기능
    버튼 클릭 -> jsp에게 요청 -> jsp가 이름 응답 -> 응답된 이름을 html의 div tag에 출력

    2. 핵심
    html에서 jsp가 응답한 데이터를 동적으로 처리

-->
    unicode file
    WebpackでBabyコンセプトを使う