動的Webページの表示

初期のWebはフォームタグのデータをサーバに送信し、サーバは新しいページを送信します.すべての新しいページがロードされたため、ページの点滅現象が発生しました.
現代のWebでは、appのような可用性(高速ロード)のために、必要な部分を部分的に更新するだけで、部分的にページにログインする技術が必要です.
そこで動的Webページの概念が現れた.
動的Webページとは、XMLを使用してサーバと自由に通信し、JavaScriptのDOMを使用して無停止で動作するWebです.

サーバとの自由な通信
XMLHttpRequest(XHR)

点滅なしシームレス操作
JavaScriptを使用したDOM

AJAX(非同期JavaScriptとXML)とは?

JavaScriptライブラリに非同期で通信し、クライアントとサーバの間でデータを交換できるWebアプリケーションを作成するWeb開発技術です.
Webページの一部だけを変更したい場合は、個別のapiリクエストを送信してデータに応答できます.

初期XMLHttpRequestサーバ通信

XMLHttpRequest APIを利用してXMLデータを交換すると,次のコードのようにコードが複雑で可読性が悪く,サーバの動作状態を把握することが困難である.

let xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3000/messages');

//요청의 상태 변화를 추적한다.
xhr.onreadystatechange = function() {
 if(xhr.readyState !== 4) return;
  //readyState 4: 완료
  
  if(xhr.status === 200) {
    //status 200: 성공
    console.log(xhr.responseText); //서버로부터 온 응답
  } else {
   	console.log('에러: ' + xhr.status);  //요청 도중 에러 발생 
  }
}
xhr.send(); //요청 전송

jQueryによるサーバ通信

jQueryライブラリを用いてコードを簡潔かつ明確に記述しようとする.

$.get('http://localhost:3000/messages', function(response) {
  	//response : 서버로부터 온 응답
};

fetch APIによるサーバ通信

fetch APIは、より直感的で可読性の高いAPIです.
fetch APIがES 6規格となると,追加の導入は不要となる.

	//요청할 서버 url을 입력
fetch('http://localhost:3000/messages')
.then(function(response) {
	return response.json();
})
.then(function(json) {
  	//json 형태로 전달받은 서버로부터의 응답
})

現代Web上のサーバ通信ストリーム

ブラウザが最初に起動した場合はindexです.フロントサーバにhtmlファイルを要求します.フロントエンドサーバはreactionによって作成されたインデックスです.htmlファイルに返信します.
データのみがfetchを介してバックエンドサーバにapiリクエストを送信します.
サーバはjsonデータのみを応答として送信します.

fetch APIの概要

let obj = {}
	   //데이터를 받아올 url
fetch('http://localhost:5000/data/latestNews') 
.then(response => response.json())  //응답온 것을 json으로 받는다. resend라는 객체안에 json()이란 메서드가 구현이 되어 있음
.then(json1 => { 
  console.log('json1', json1);
  obj.news = json1.data  
})
.catch(err => throw(err))  //에러 처리

Headersインタフェース

Headers()ジェネレータを使用して、タイトルオブジェクトを作成できます.

let content = "Hello World";
let myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");