Ajax

세상은 넓고 공부할 것은 많다..🤓 요즘 너무 체감이 잘되네😵📚

Ajax

Ajax를 익히기 전 알아야 할 통신의 기본내용

HTTP	(Hyper Text Transfer Protocol) 웹 브라우저와 웹 서버가 HTML로 작성된 웹 페이지나 동영상, 음성 파일 등을 주고받기 위한 프로토콜
HTTPS	(Hyper Text Transfer Protocol) HTTP를 TLS(Transport Layer Security)로 암호화하여 보안성을 확보한 것을 가르킴 (참고-TLS : http://www.ktword.co.kr/abbr_view.php?m_temp1=1957 )
HTTP 통신	클라이언트가 서버에 요청메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 서버는 응답 메시지를 반환한 후 초기상태로 돌아간다. 이때 서버는 클라이언트 상태를 저장하지 않음
Request To a Server	GET : 웹 서버에 페이지를 요청한다. 요청할 때 필요한 데이터는 URL에 덧붙여 보내며 텍스트 데이터만 전송할 수 있다, (웹 페이지에서는 대부분의 통신에 GET메서드를 사용) POST : 서버의 데이터를 갱신하거나 보내는 데이터의 양이 많을때, 비밀번호 등의 개인 정보를 보낼때(폼 등을 사용해서 데이터를 전송할 때)
Response To a Server	onreadystatechange : readyState값이 바뀔 때마다 호출되는 이벤트 처리기 readyState : XMLHttpRequest객체가 제공하는 프로퍼티
동기/비동기	Synchronous(동기) : 동기는 말 그대로 동시에 일어난다는 뜻. 요청과 그 결과가 동시에 일어난다는 약속. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다. 요청과 결과가 한 자리에서 동시에 일어남/ A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다. 장점 : 설계가 간단하고 직관적 단점 : 결과를 볼 때까지 아무것도 못하고 대기해야함 Asynchronours(비동기) : 자바스크립트가 서버에 요청을 보내는 중에도 폼에 입력하거나 마우스를 클릭하는 등 페이지 조작을 할 수 있다. 서버작업이 끝나면 페이지에서 바뀐 부분만 자바스크립트로 업데이트 한다. 이때 서버가 하는 작업을 기다릴 필요없이 다른 작업을 할 수 있는 것이 비동기식. 장점 : 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업이 가능해 자원의 효율적인 사용이 가능 단점 : 설계가 동기보다 복잡함
비동기 활용	Ajax web api 요청 / 암호화,복호화 / 파일읽기 / 작업예약
CORS	(Cross-origin resource sharing, CORS) 서로 다른 도메인의 리소스 요청을 보내고 받기 위해서는 웹 프론트앤드와 서버에서 특정한 작업을 해주어야한다. 프론트앤드의 경우에는 RequestHEader에 CORS 관련 옵션을 넣어준다. 서버의 경우에는 Response Header에 해당하는 프론트의 요청을 허용한다는 내용을 넣어준다. Header에 무엇을 넣어야 할지는 정해져 있다.

AJAX

AJAX	AJAX = Asynchronous JavaScript And XML
설명	Ajax란 XMLHttpRequest라는 자바스크립트의 객체를 이용하여 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다. 서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정도를 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 '비동기성'이다. 이러한 비동기성을 통해 사용사의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다. (XML을 사용하는 경우는 매우 드물고 주로 JSON과 텍스트 데이터를 사용)
장점	1) 최소한의 데이터 통신만 하므로 처리 속도가 빠르고 서버 부하와 통신 트래픽 부하가 적다. 2) 비동기로 통신하므로 클라이언트 측에서 다른 작업을 할 수 있다. 3) 웹 페이지 갱신을 클라이언트 측이 담당한다. 페이지를 전환하는 대신에 페이지 일부분만 변경하므로 고속 랜더링이 가능하다. 4) 화면을 전환하는 빈도가 줄어들기 때문에 사용자에게 데스크톱 애플리케이션을 사용하는 듯한 편의성을 제공할 수 있다.
처리Flow	1) XMLHttpRequest 객체를 생성한다. 2) 서버와 통신할 때 사용할 처리방법을 등록한다. 3) 요청을 전송하고 통신을 시작한다.
1)	XMLHttpRequest 객체를 생성 const rep= new XMLHttpRequest();
2)	서버와 통신할 때 사용할 처리방법을 등록 rep.onreadystatechange = function(){ }; 또는 addEventListener를 사용하여 rep.addEventListener("readystatechange", function() {}) 로 등록
3)	요청을 전송하고 통신을 시작 요청 초기화하기 open 메서드 사용법 : req.open(method, url, [,async [,user [,password]]],); 각 요소의 의미 method : HTTP 메서드 (GET or POST) url : 접근할 url async : 비동기 통신 여부(선택사항, 기본값은 true(비동기)) user/password : 인증시 사용자 이름/비밀번호 (선택사항, 인증이 필요한 경우에만 사용 )

예시 코드

function loadDoc() {
   //XMLHttpRequest 객체 생성
  var xhttp = new XMLHttpRequest();
  //서버와 통신할 때 사용할 처리 방법 등록
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  //요청을 전송하고 통신 시작
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}