AjaxとJSON
5136 ワード
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ページの変更に必要なデータは、
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であるため、ブラウザ環境でのみ正常に動作します.
ソース
Reference
この問題について(AjaxとJSON), 我々は、より多くの情報をここで見つけました https://velog.io/@dbstjrwnekd/Ajax와-JSONテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol