Ajax通信とJSON

会社が作成したスプリング起動プロジェクトを見ると、ほとんどのリクエストはAjaxで実現されています.アカデミアではレビューなどの一部ページ更新のために使用される程度ですが、Ajaxリクエストは非同期転送の特徴であるため、Ajaxリクエストはより多くの場合に使用されるようです.
また、同じソースポリシーがあることなどが分からないため、Ajaxリクエストを他のサーバに送信し、バカみたいにcsrf設定に触れてみました.これを機にAjaxの勉強を再整理しました.

非同期通信とは?

同期転送は、リクエストと応答が同時に発生する方法です.비동기식 전송とは、要求と応答が同時に発生しないことを意味し、応答がなくても他の要求を送信し、応答を待つことができる可能な方法である.
非同期通信の利点は,結果をすぐに知ることはできないが,複数の通信を処理する際にタスク間の順序を考慮する必要がないことである.同期転送の欠点は、要求が送信されると、応答が受信されるまで他のタスクを処理できないため、同期転送よりも非同期転送がリソースを効率的に使用できることである.
.

Ajax(Asynchronous Javascript And XML)通信とは?

Ajaxとは、その名の通りサーバとクライアントとの間でJavaScriptを使用して非同期にデータを交換する通信のこと.Ajaxで交換できるデータはXMLのほか、JSON、text、html、csvなど様々なフォーマットがあります.ここでAjax名にXMLを使用しなければならないのは、Ajaxが出現した初期にXMLのみを使用してデータを交換したためである.
Ajax通信では、ページ全体をリフレッシュせずに一部を更新するだけで、時間とリソースを節約できます.たとえば、コメントを更新するには、ページ全体にリダイレクトするよりも、コメント部分だけを更新します.言い換えれば、これは、ユーザがより豊富なUI体験を得ることができることを意味する.
しかし、非同期通信の特性により不適切な使用が行われると、デバッグなどの履歴管理が困難になる可能性があります.また、複数のリクエストが同時に送信され、応答がないため、サーバの負荷が増加する可能性があります.
最も重要なのは、Ajaxを使用する際にCross Domainの問題も考慮することです.

ChromeからAjaxにリクエストを送信すると、次のエラーメッセージが表示されます.

  No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '****' is therefore not allowed access.

これは、JavaScriptのSame-Originポリシールールに従って、XMLHttpReqeust転送時に同じソース(Same Origin)のページにしかアクセスできないためです.ここで、同じソースとは、同じプロトコル、ホスト名、ポートの3つの条件を満たすページです.
したがって、Ajaxリクエストは他のドメインに送信できません.この問題を解決するために、Webブラウザから他のドメインへのリクエスト、個別のプラグインのインストール、またはJSONPでのリクエストを許可するように設定できます.
(ここでJSONPとは、css、jsファイルなどの要素が通常Same-Origin Policyの影響を受けないため、jsonと同じリソースフォーマットに変換され、GET方式でAPIが要求されることを意味する.)
このやり方は実際には近便なので,ここでは詳しくは言わない.
要するに、今日のWeb&Appアプリケーションの構造は過去に比べて複雑になり、多くのドメインにわたってリクエストや応答が頻繁に行われるため、W 3 CはCORS(Cross-Origin Resource Sharing)の新しい政策を提案した.
これは、サーバが外部要求を許可する設定を設定している場合、Ajax要求は他のドメインでも可能であることを意味します.通常、レスポンスヘッダを使用して次の要素を追加します.

 Access-Control-Allow-Origin:*
 Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS
 Access-Control-Max-Age:3600
 Access-Control-Allow-Headers:Origin.Accept.X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers.Authorization 

(詳細については、Springでの処理を参照)
.

実装Ajax(Vanila Javascript)

jqueryを使う方式があちこちにあるので、ここではVanilla Javascriptで実現したコードを整理!

function ajaxTest(){
    let ajaxRequest = new XMLHttpRequest(); //Ajax Request 객체 생성
    let jsonData = {
        key : "value"
    }
    
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState === ajaxRequest.DONE){
            if(ajaxRequest.status === 200 || ajaxRequest.status ===201){
                //응답코드가 200,201인 경우에는 성공 로직 처리를 명시
            }else{
                //400,500번대 에러가 났다면 에러 로직 처리를 명시
            }
        }
    };
    
    ajaxRequest.open('POST','/url'); //요청 보낼 url와 메소드 명시
    ajaxRequest.setRequestHeader('Content-Type','application/json'); //헤더 설정
    ajaxRequest.send(JSON.stringify(jsonData)); //여기서는 데이터를 문자열로 전송 
}

Vanila Javascript実装の簡単なAjaxリクエストの例.まずXMLHttpRequestオブジェクトを生成し、次いでonreadystatechangeを実装し、応答コードに従って必要な論理を条件文に実装する.
その後、要求を送信する前に、.statusのパラメータを入力し、必要な要求方式とurlを入力し、メッセージ本体に含めるデータをパラメータとしてopenを宣言すればよい.
(リクエストヘッダを設定したい場合は、send()を使用してください.)
上記の例では、jsonDataを直接宣言してメッセージ本体に含めるが、setRequestHeaderタグを使用する場合は、<form/>オブジェクトを作成し、次のように送信することができる.

  let formData = new FormData();
  formData.append('key','value');
  ....
  ajaxRequest.send(formData); //formData 전송

.

JSONとは？

最後に、Ajaxとともに使用されているJSON形式について説明します.まず、JavaScriptでAjaxリクエストが生成したオブジェクトの名前がFormDataであることから、XMLHttpRequestは実際には表面的にW 3 Cの標準データフォーマットであることがわかる.
XMLは寸法言語のフォーマットに従うため、<>タグを使用しますが、HTMLとは異なり、データの格納と転送にのみ使用されます.ただし、タグが含まれているため、他のデータフォーマットに比べてデータのサイズが比較的大きい.
従って、容量が大きいという欠点を補うために、比較的軽量なXML(Extensible Markup Language)フォーマットが用いられている.JSONはその名の通りJavaScriptオブジェクトの表示形式に従うため、「Key」:「Value」のフォーマットに従い、より軽く、伝送速度が速いという利点があります.

  {
      "Countries":[
          {
              "Country":"Korea",
              "Capital":"Seoul"
          },
          {
              "Country":"Japan",
              "Capital":"Tokyo"
          },
          {
              "Country":"China",
              "Capital":"Beijing"
          }
      ]
  }

JSONはnull、number、string、arry、object、booleanなどのフォーマットを使用してもよいし、[]で秩序配列を宣言してもよい.ただし、コメントがサポートされておらず、括弧などの小さな構文エラーが正しく閉じられていないため、JSON全体のエラーになる可能性がありますので注意してください.
JSON形式は簡単にJavaScriptオブジェクト(逆シーケンス化)に変換できます.JavaScriptのほか、Javaなどの他のプログラミング言語でJSONを作成することもできます.これはJSONがJavaScriptオブジェクトの形式に従うだけで、特定の言語の構文に依存しないことを意味します.

ほとんどの言語では、javaのJSONのようなJSON形式のデータを処理できるライブラリが提供されています.Javaの場合は、GSONライブラリのGSONを介してListやMapなどのオブジェクトをJSON形式のデータに変換することができます.