[Ajax] #01. Ajax의 정의와 필요성

■ AJAX란?

AJAX = Asynchronos Javascript And XML이다.

쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. HTML form 태그가 아니라 자바스크립트를 통해서! 따라서 우리는 서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 갈 필요도 없고 '새로고침'을 할 필요가 없는 것이다. 부분 부분만 로딩되므로 속도가 빠르다.
즉, 비동기 상태로 데이터의 송수신을 처리하는 목적으로 사용된다. 여기서 비동기 처리란, 현재 자기 위치는 고수하고 있으면서 데이터를 가지고 오는 것을 말한다. 다시 말해서, 현재 화면은 바뀐 상태가 없으면서 데이터만 가져오는 것이다. 또, 비동기 방식이 동기 방식보다 훨씬 더 가볍다. (ex) Zum

 

1. Asynchronos? 
1. 해석하면 '비동기적'이다.
2. '비동기적'이라는 것은, 클라이언트에서 서버에 요청을 보낼 때 요청을 보내놓고 프로그램은 계속 돌아간다는 의미이다. 즉, 먼저 요청한 것에 대한 콜백1 함수가 먼저 실행되지 않는다는 것이다.
   
   
2. Javascript?
1. 자바스크립트는 웹 브라우저에 대한 스크립트 언어로 만들어진 언어이다. 웹 브라우저에서 출발했기 때문에 본래 서버와 소통하는 기능은 없었으나 AJAX는 가능하다.
   
   
3. .XML? 
   1. 그렇다면 markup language는 무엇인가? 이것은 데이터에 태그로 항목 표시를 해준다는 것이다. HTML도 마크업 랭귀지의 일종이다.
   2. 만약 사람의 키, 나이 등을 표현하고 싶다면 XML에서는
   1. <person>
   2. <height></height>
      <age></age>
      </person>
   3. 이런식으로 작성할 것이다.
1. XML은 데이터 형식의 일종이다.
2. XML은 'Extensible Markup Language'의 준말이다. 즉 확장가능한 '표시' 언어 라는 것이다.

---

 

1. 웹 서버 
1. AJAX는 웹 서버가 있어야만 동작하므로, 그저 HTML페이지처럼 브라우저만 있는다고 돌아가는것이 아니다.
2. 따라서 로컬에서는 Node.js를 설치해서 연습해보는 방식이 좋을 것이다.
3. c9.io 같은 웹 프레임워크 사이트에서 express등으로 쉽게 서버를 구현해주니 그것으로 해도 편할것이다.
   
   
   
2. AJAX의 본래 명칭
1. AJAX의 본래 명칭은 XHR(XML Http Request)이다. 즉 HTTP2 request를 서버에 보낸다는 것이다.
   
   
3. JSON
1. JSON도 일종의 데이터 형태이다. XML은 자바스크립트에서 사용하기 불편하기 때문에 자바스크립트로 서버에 요청을 보낼때에는 주로 JSON을 많이 쓴다.
2. JSON은 자바스크립트 객체, 또는 배열, 또는 둘 다를 이용해 표현된다.
   
   
4. AJAX의 4가지 과정(★★★)
1. XMLHTTP request object를 만든다.
   1. request를 보낼 준비를 브라우저에게 시키는 과정이다. 
   2. 이것을 위해서 필요한 method를 갖춘 object가 필요하다.
2. callback 함수를 만든다.
   1. 서버에서 response가 왔을 때 실행시키는 함수이다
   2. html 페이지를 업데이트한다.
3. Open a request
   1. 여기서 브라우저에게 두 가지 정보를 넘긴다.
      1. 브라우저가 request를 보내기 위해 사용할 method(ex:post)
      2. 그리고 request가 갈 URL
4. send the request
   
   
   
   
5.  코드 예시
1. AJAX는 XHR객체를 형성하고 이 객체의 콜백을 만들고, 그리고 html메소드와 url을 결정한 뒤 XHR객체의 메소드로 정보를 보내는 방식이다.로 시작한다. AJAX에서 event는 무엇일까? user가 form을 제출하는 것은 일종의 event이다. 이 form이 제대로 입력되었는지를 check하는것은 이 event에 대응되는 프로그램이다. AJAX에 어떠한 변화가 일어났을 때, 이에 대응해서 일어나는 프로그램이 바로 ✓onreadystatechange이다.(callback function을 포함하고 있다고 생각하면 된다.) 이벤트는 AJAX Request에 어떠한 변화라도 있으면 작동된다.XHR object는 response가 돌아왔는지 아닌지를 추적하는 property를 가지고있다. 이 property가 바로 ✓readyState 이다. 만약 이 property의 숫자가 4면 response가 돌아왔다는 것이다.
2.  
3. callback function을 만드는 것이 가장 복잡한 부분이다.  이것이 ajax의 핵이다.  이 함수는 browser response를 얻었을 때 작동하는 함수이다. *만약 당신이 여러 ajax request를 날렸다면, 어떤 것이 먼저 돌아올지 알 수 없다. 따라서 어떤 callback이 먼저 실행될지 알 수 없음.
4. var xhr= new XMLHttpRequest();

xhr. onreadystatechange = function(){

 if(xhr.readyState===4){

document.getElementById(‘ajax’).innerHTML= ✓xhr.responseText;(/response이다.)

     }
}

✓xhr.open(‘GET’,”sidebar.html”);  html메소드와 URL을 보낸다.

open함수는 준비를 시키는것이지 보내는 것은 아니다.

✓xhr.send();