[HTML] Ajax

AJAX(Asynchronous Javascript And XML) 의 정의
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능
클라이언트와 서버간에 XML 데이터를 주고받는 기술이다

비동기 방식이란? 1차선 도로가 막혀도 2,3,4 차선 도로 이용이 가능하듯 하나의 데이터 처리만 이루어지는 것이 아니라 동시에 다른 처리가 병행 가능한 것.

비동기 방식의 예시 : 구글어스, 연관검색어 추천 등이 있다.
구글어스 : 방대한 양의 지도데이터를 서버로부터 한번에 송수신하지 않음.
사용자가 지정한 위치의 데이터 값만 보여줌. 확대할시 일단 이미지 확대로 보여주고 사용자가 지정한 곳의 데이터 값을 뿌려주는 방식(=필요한 데이터만 제공, 시간 절약, 서버 부하 줄임).
데이터값을 다 받기 전에(=서버로부터 수신을 다 하기 전에) 사용자가 다른 지역으로 이동해도 구글어스는 정상적으로 작동함(=서버에 요청한 처리 결과를 다 받기 전에 다른 작업 병행 가능).

Ajax엔진이 없다면 사용자는 서버 처리를 기다리면서 다음 작업에 대해 제한이 걸린다.

javascript 코드실현 준비

서버에 요청할 정보 설정 : open(전송방식, URL, 비동기여부)
1. 전송방식 : "GET" 또는 "POST"
2. 보낼 url입력, 혹은 아래 코드예시와 같이 파일명을 줄 수도 있다.
3. 비동기여부/ true=비동기 fals=동기

서버로 HTTP 요청 전송(송신) : send(null); 혹은 send();로 한다

xhr = new XMLHttpRequest(); // 비동기 방식 처리 클래스

xhr.open("get","js20.txt",true);
xhr.onreadystatechange = function() { // 요청에 대한 콜백(통신상태확인)
console.log(xhr.readyState);

	/*
	readyState 속성값
	0: 초기화이전(uninitialized) - 객체 생성만 되고 초기화 이전, 즉, open 수행전
	1: 로딩중(loading) - 객체 생성 및 초기화, 그러나 send 수행전
    2: 로딩완료(loaded) - send 수행 되었으나 헤더와 status 값 미도착  		
    3: 서버 처리중(interactive) - 데이터 일부만 도착
	4: 처리완료(completed) - 데이터 전부 도착
		
	status 속성값
	200: 성공 (OK)
	403: 접근거부 (Forbidden)
	404: 파일 없음 (Not Found)
	500: 서버 내부 오류 (Internal Server Error)		
    */

	if(xhr.readyState == 4){
	//=통신상태 양호
		if(xhr.status == 200){ // 요청 성공
			processFunction();  // callback function
		}
	}	
 }
	xhr.send(null); // 요청 전송 
 // xhr.abort(); // 전송된 요청 취소

ECMA6이후 XMLHttpRequest를 대신해 비동기 처처리를 하는 Promise 객체 등장
내부적으로 Promise 객체를 지원하는 fetch ~ then 사용
fetch(url, {method:"GET"}).then~ 이런 식으로 끌고갈 수도 있다(추후 정리 예정)

<여담>
응답 수신 및 처리

• responseXML
  XMLHttpReuest 응답(객체)을 DOM 객체로 변환. DOM API 적용 가능
• resonseText
  XMLHttpReuest 응답(객체)을 텍스트 배열로 변환
  CSV, JSON 형식의 데이터는 전달 및 해석이 용이