AJAX

W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리
https://www.w3schools.com/js/js_arrays.asp
https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx
https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspx

1. AJAX Intro

Ajax를 사용할 때의 장점
- 페이지가 로드 된 후에 웹 서버로부터 데이터를 읽을 수 있다.
- 페이지를 다시 로드 할 필요 없이 웹 페이지를 업데이트 할 수 있다.
- 백그라운드 상태로 웹 서버에 데이터를 보낼 수 있다.

AJAX는 다음과 같이 결합하여 사용한다.
- 웹 서버로부터 데이터를 요청하기 위해 브라우저 내장객체인 XMLHttpRequest 를 사용
- 자바스크립트와 HTML DOM (데이터를 요청하거나 보여주기 위해) 사용

AJAX는 오해의 소지가 있는 이름이다.
AJAX는 데이터를 XML을 사용해서 데이터를 전송하지만, 데이터를 일반 텍스트나 JSON같은 데이터를 전송하는 것은 똑같이 일반적이다.

AJAX는 화면 뒤에서 웹 서버와 데이터를 교환함으로써 웹 페이지를 비동기로 업데이트할 수 있게 한다. 전체 페이지를 다시 로드 할 필요 없이 웹 페이지의 한 부분만 업데이트 할 수 있다는 뜻이다.

작동원리

브라우저	인터넷	서버	인터넷	브라우저
이벤트 발생 - 자바스크립트에 의해 XMLHttpRequest 객체 생성 - 웹서버로 XMLHttpRequest 전송		- XMLHttpRequest 처리 - 응답 생성하고 브라우저로 데이터 전송		- 자바스크립트에 의해 반환된 데이터 처리 - like 페이지 내용 업데이트

 

2. AJAX XMLHttp

AJAX의 핵심은 XMLHttpRequest 객체이다.
- 모든 최신 브라우저는 XMLHttpRequest 객체를 지원한다.
- XMLHttpRequest 객체는 화면 뒤에서 웹서버와 데이터를 교환할 수 있도록 한다.
- 이 말은 전체 페이지를 다시 로드할 필요없이  웹페이지의 한부분만 업데이트 할 수 있다는 뜻이다.

 

XMLHttpRequest 객체 생성
- 모든 최신 브라우저(Chrome, Firefox, IE7+, Edge, Safari, Opera)는 XMLHttpRequest 객체를 내장함수로 가지고 있다.
variable = new XMLHttpRequest();

도메인간의 접근
- 보안상의 이유 때문에 도메인간의 접근은 허가되지 않는다.
- 로드하려는 웹페이지와 XML 파일을 같은 서버에 위치해야 한다.

3. 서버 요청
- 서버로 요청하기 위해 XMLHttpRequest 객체의 open()과 send() 메소드를 사용한다.
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

GET? POST?
GET은 POST보다 빠르고 간단하고 대부분의 상황에서 사용된다.
하지만 무조건 POST를 사용해야 될 때가 있다.
- 캐시된 파일은 옵션이 아니다. (서버로 파일이나 데이터베이스를 업데이트)
- 서버로 많은 양의 데이터를 보낼 때 (POST는 사이즈 제한이 없다.)
- 알 수 없는 문자가 포함될 수 있는 사용자의 입력을 보낼 때 POST는 GET보다 보안적이고 강하다.

GET
- 예제1. 캐시 된 결과를 가져온다.
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

- 예제2. 특별한 ID을 추가해서 캐시 결과를 피한다.
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

- 예제3. GET을 이용해서 정보를 보내려면 URL에 정보를 추가해서 보낸다.
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

POST
- 예제1.
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

- 예제2. HTML 폼처럼 POST 데이터를 보내려면 setReauestHeader()로 HTTP 헤더를 추가해야한다. 그리고 send() 메소드에서 전송할 데이터를 지정한다.
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

url – 서버 상의 파일
open() 메소드의 매개변수인 url은 서버 상의 파일 주소이다.
xhttp.open("GET", "ajax_test.asp", true);
파일은 어떤 종류의 파일이든 상관 없다. .txt, .xml이나 .asp, .php같은 서버 스크립트 파일도 상관 없고 응답을 돌려보내기 전에 서버에서 작업을 실행할 수 있다.

비동기 – True or False
서버 요청은 비동기적으로 보내야 한다.
open() 메소드의 async 매개변수는 true로 설정한다.
xhttp.open("GET", "ajax_test.asp", true);
비동기로 보내므로써 자바스크립트는 더 이상 서버의 응답을 기다리지 않아도 된다. 그러나 서버의 응답을 기다리는 동안 다른 스크립트를 실행할 수 있다. 응답이 준비되면 응답을 처리한다.

onreadystatechange 속성
XMLHttpRequest object를 사용하면 요청이 응답 받을 때 실행할 수 있는 함수를 정의할 수 있다.
이 함수는 XMLHttpResponse 객체의 onreadystatechange 속성에 정의되어 있다.

동기식 요청
동기식 요청을 하기 위해선 open() 메소드의 세 번째 매개 변수의 값을 false로 변경한다.
xhttp.open("GET", "ajax_info.txt", false);
가끔 async = false 는 빠른 테스트를 할 때 사용된다. 또한, 예전의 자바스크립트 코드에서 동기식 요청을 찾을 수 있다.
코드가 서버 완료를 기다리므로 onreadystatechange 함수가 필요하지 않다..

function loadDoc() {   var xhttp = new XMLHttpRequest();   xhttp.open("GET", "ajax_info.txt", false);   xhttp.send();   document.getElementById("demo").innerHTML = xhttp.responseText; }

 

자바스크립트가 서버의 응답이 준비되기 전까지 멈추기 때문에 동기식 XMLHttpRequest(async = false)는 권장하지 않습니다. 서버가 사용 중이거나 느리면 애플리케이션은 작업을 걸어놓거나 중지됩니다.
동기식 XMLHttpRequest는 웹 표준에서 제거하려고 하는 중이지만 오래 걸릴 듯 합니다.
최신 개발자 툴은 동기식 요청 사용에 대해 경고하고 InvalidAccessError 예외가 발생할 때 이를 throw 할 수 있습니다.

4. 서버 응답
readyState 속성은 XMLHttpRequest 객체의 상태를 가지고 있다.
onreadystatechange 속성은 readyState 속성이 변경됐을 때 실행할 함수를 정의한다.
status 속성과 statusText 속성은 XMLHttpRequest 객체의 상태를 가지고 있다.

XMLHttpRequest 객체의 속성

Property	Description
onreadystatechange	readyState 속성 변경될 때 호출되는 함수 정의 readyState 속성이 변경될 때마다 함수가 호출됨 readyState가 4이면서 status가 200일 경우 응답이 준비됨 readyState가 변경될 때마다 한번씩 네 번(1-4) 트리거됨
readyState	XMLHttpRequest 의 상태를 담는다. 0 -> 요청 초기화되지 않음 1 -> 서버 연결 설정 됨 2 -> 요청 받음 3 -> 요청 처리 중 4 -> 요청 완료되고 응답 준비됨
responseText	응답 데이터를 문자열로 반환
responseXML	응답 데이터를 XML 데이터로 반환
status	요청의 상태 번호 반환 200 -> OK 403 -> Forbidden 404 -> Not Found https://www.w3schools.com/tags/ref_httpmessages.asp
statusText	상태 텍스트 반환(OK or Not Found)

                      

XMLHttpRequest 객체의 메소드

Method	Description
new XMLHttpRequest()	새로운 XMLHttpRequest 객체 생성
abort()	현재 요청 취소
getAllResponseHeaders()	header 정보 반환
getResponseHeader()	특정 header 정보 반환
open(methodm url, async, user, psw)	Request  명시 - method -> GET이나 POST 형식의 요청 타입 - url -> 서버에서의 파일 위치 - async -> true일 경우 비동기, false일 경우 동기 - user -> 선택적 사용자 이름 - psw -> 선택적 비밀번호
send()	GET을 이용해 서버에 요청 전송
send(string)	POST를 이용해 서버에 요청 전송
setRequestHeader(header, value)	header에 전송될 레이블/값 한 쌍 추가 header -> header 이름 value -> header 값

★
XMLHttpRequest 객체는 웹 서버에 데이터를 요청할 때 사용된다.
- 페이지를 다시 로드 할 필요 없이 웹 페이지를 업데이트 할 수 있다.
- 페이지가 로드 된 후에 웹 서버에 데이터를 요청할 수 있다.
- 페이지가 로드 된 후에 웹 서버로부터 데이터를 읽을 수 있다.
- 백그라운드 상태로 웹 서버에 데이터를 보낼 수 있다.

function loadXMLDoc() {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       document.getElementById("demo").innerHTML =       this.responseText;     }   };   xhttp.open("GET", "xmlhttp_info.txt", true);   xhttp.send(); }

소스코드 분석

var xhttp = new XMLHttpRequest();

XMLHttpRequest 객체 생성

xhttp.onreadystatechange = function()

onreadystatechange 속성은 XMLHttpRequest 객체의 상태가 변화될 때 실행될 함수를 명시한다.

if (this.readyState == 4 && this.status == 200)

readyState 속성은 4 이고 status 속성은 200일 때, 응답이 준비된다.

document.getElementById("demo").innerHTML = this.responseText;

responseText 속성은 서버 응답을 텍스트 문자열로 반환합니다.
텍스트 문자열을 사용해서 웹 페이지를 업데이트 할 수 있다.
★