AjaxとJSON


Ajax


Ajaxは、JavaScriptを使用してサーバにデータを非同期で要求し、データを受信してWebページを動的に更新するプログラミング方式です.
Ajaxは、ブラウザが提供するWeb API XMLHttpRequestオブジェクトに基づいています.XMLHttpRequestはHTTP非同期通信の方法と流れを提供した.
1999年にマイクロソフトが開発したXMLHttpRequestはあまり注目されず、2005年にはグーグルのGoogle Mapsを通じて注目され始めた.Webブラウザでは、JavaScriptとAjaxベースのGoogle Mapsは、デスクトップアプリケーションよりもパフォーマンスが高く、画面切り替えがスムーズです.
以前のWebページは、サーバから完全なHTMLを受信することで、Webページ全体を再表示しました.そのため、画面を切り替えるときは、最初からWebページ全体を再レンダリングする必要があります.
この方法では、不要なデータ通信が発生し、変更する必要のない部分に最初からレンダリングされ、画面が点滅します.また、クライアントとサーバとの通信は同期されるため、サーバが応答する前に次の処理がブロックされる.
Ajaxの出現はこの伝統的なパターンを徹底的に変えた.
Ajaxは
Webページの変更に必要なデータは、
  • サーバから非同期で送信されます.
  • では、変更する必要のない部分はレンダリングされず、必要な部分だけがレンダリングされます.
  • は、高速なパフォーマンスとスムーズな画面切り替えを提供します.
  • 従来の方法と比較して、このAjax方法は以下の利点を有する.
  • は、サーバからの必須データのみを受信するため、不要なデータ通信は発生しない.
  • 変更する必要のない部分は再レンダリングされません.そのため、画面が点滅することはありません.
  • クライアントとサーバとの通信は非同期であり、ブロックは発生しません.
  • しかし、Ajaxは唯一の利点ではありません.Ajaxを使用した通信は追跡が困難ですが、サーバが連続して要求すると大量の要求を受け取る可能性があるという欠点があります.

    JSON


    JSONは、クライアントとサーバとの間でHTTP通信を行うテキストデータ形式である.JavaScriptの言語独立データフォーマットに依存せず、ほとんどのプログラミング言語で使用できます.
    JSONは、JavaScriptのオブジェクト文字に似たキーと値からなる純粋なテキストです.
    {
      "name": "Lee",
      "age": 20,
      "alive": true,
      "hobby": ["traveling", "tennis"]
    }
    JSONのキーは二重引用符で囲まれている必要があり、値はオブジェクト文字と同じ記号を使用できます.文字列は二重引用符で囲まなければなりません.
    JavaScriptはJSONです.シリアル化および逆シリアル化は、stringify()、JSONおよびparse()によって提供される.
    const obj = {
       name: "Lee",
       age: 20,
       alive: true,
       hobby: ["traveling", "tennis"]
    };
    
    const json = JSON.stringify(obj);
    console.log(typeof json, json);
    // string {"name":"Lee","age":20,"alive":true,"hobby":["traveling","tennis"]}
    
    const parsed = JSON.parse(json);
    console.log(typeof parsed, parsed);
    // object {name:"Lee",age:20,alive:true,hobby:["traveling","tennis"]}

    XMLHttpRequest


    ブラウザは、「アドレス」ウィンドウまたはHTMLの「フォーム」および「aタグ」を使用して、HTTPリクエスト転送機能を提供します.JavaScriptを使用してHTTPリクエストを送信するには、XMLHttpRequestオブジェクトを使用します.
    Web APIとしてのXMLHttpRequestは、HTTPリクエストの送信およびHTTP応答の受信のための様々な方法およびプログラムを提供する.
    XMLHttpRequestオブジェクトは、コンストラクション関数を呼び出すことによって作成されます.このオブジェクトは、ブラウザが提供するWeb APIであるため、ブラウザ環境でのみ正常に動作します.
    ソース
  • モダンjavascript deepdave,李雄模,Wekibooks