Soon Gud Story

AJAX는 쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것입니다. 

HTML from 태그를 사용하지 않고 javascript를 사용하기 때문에 서버에 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 이동 할 필요가 없기 때문에 "새로고침"을 할 필요가 없습니다.

또한 그부분만 로딩 되기 때문에 속도가 빠릅니다. 본래 명칭은 아래에 글을 참고하세요

Asynchronos 

 1. 바로해석을 하면 "비동기적" 이라는 뜻입니다.

 2. 비동기적이라는 것은, 클라이언트(사용자)가 서버에 요청을 보내놓고도 응답을 기다리며 대기 하는 것이 아닌 프로그램은 계속 실행이 된다는 의미 입니다.

    다시 말하면 먼저 요청한 것에 대한 것이 있다고 해서 그 응답을 기다리고 다음것이 실행 되는 것이 아닙니다. 

    그래서 어떠한 경우에는 나중에 요청한 결과가 먼저 실행되어 버리는 경우도 있습니다.

Javascript

 1. 자바스크립트는 웹 브라우저에 대한 스크립트 언어로 만들어진 언어 입니다.

XML

 1. XML은 우선 간단히 데이터 형식의 일종으로 이해하면 됩니다. 

 2. XML은 "Extensible Markup Language" 줄임말 입니다. 해석하면 확장가능한 표시 언어 입니다. 

    Markup Language는 데이터를 태그 항목으로 표시한다는 것입니다. 

    HTML 도 일종의 Markup Language 입니다. 

    대신 데이터를 태그항목으로 설정하는데 HTML에 비해 자유도가 높습니다. 

AJAX의 본래 명칭

 1. AJAX의 본래 명칭은 XHR(XML Http Request) 입니다. 해석하자면 HTTP request를 서버에 보낸다는 의미 입니다.

JSON

 1. JSON도 일종의 데이터 형태 입니다. XML은 자바스크립트에서 사용하기 불편한 점이 많기 때문에 주로 JSON 데이터 형식을 많이 씁니다.

 2. JSON은 객체 또는 배열 등을 이용해서 표현 됩니다. 

AJAX 4단계 과정

 1. XMLHTTP request object를 생성합니다.

    request(요청)를 보낼 준비를 브라우저에게 시키는 과정입니다.

 2. callback 함수를 만듭니다.

    서번에서 response(응답)이 왔을때 실행되는 함수 입니다.

 3. open request

    브라우저에게 두가지 정보를 넘깁니다. 

    request를 보내기 위해 사용할 메소드 예를들면 post 이고 request 가 이동할 URL 입니다. 

 4. request를 보냅니다.

예제 코드 

---------------------------------------------------------------------------------------------------------------------

var xhr = new XMLHttpRequest();  // xhr 객체를 생성한다.

xhr.onreadystatechange = function(){  // request 변화여부를 확인할수 있는 객체로 function을 실행한다.

 if(xhr.readyState===4{

 document.getElementById('ajax').innerHTML = xhr.responseText; //response 이다.

 }

}

xhr.open('GET',"test.html");  // html get 방식 메소드와 URL를 낼 준비를 한다.

xhr.send();

---------------------------------------------------------------------------------------------------------------------

onreadystatechange

 1. AJAX에서 이벤트는 사용자가 form를 submit하는 것이 일종의 이벤트이다. 이 form이 제대로 입력되었는지 AJAX에 어떠한 변화가 있는지 여부에 대응하는 프로그램이다.

readyState

 1. XHR object는 response가 돌아 왔는지 아닌지를 추적하는 property 이다.

    response 값이 4 이면 response 가 돌아 온것이다.

open 과 send 

 1. open()는 보낼 준비를 시키는 것이지 보내는 것은 send() 메소스가 한다. 

감사합니다. 고맙습니다. 운이 좋습니다.