1.AJAX란 무엇인가?
- AJAX는 Asynchronos Javascript And XML이다.
쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. HTML form 태그가 아니라 자바스크립트를 통해서! 따라서 우리는 서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 갈 필요도 없고 '새로고침'을 할 필요가 없는 것이다. 부분 부분만 로딩되므로 속도가 빠르다. - Asynchronos?
- 해석하면 '비동기적'이다.
- '비동기적'이라는 것은, 클라이언트에서 서버에 요청을 보낼 때 요청을 보내놓고 프로그램은 계속 돌아간다는 의미이다. 즉, 먼저 요청한 것에 대한 콜백1 함수가 먼저 실행되지 않는다는 것이다.
- Javascript?
- 자바스크립트는 웹 브라우저에 대한 스크립트 언어로 만들어진 언어이다. 웹 브라우저에서 출발했기 때문에 본래 서버와 소통하는 기능은 없었으나 AJAX는 가능하다.
- .XML?
- XML은 데이터 형식의 일종이다.
- XML은 'Extensible Markup Language'의 준말이다. 즉 확장가능한 '표시' 언어 라는 것이다.
- 그렇다면 markup language는 무엇인가? 이것은 데이터에 태그로 항목 표시를 해준다는 것이다. HTML도 마크업 랭귀지의 일종이다.
- 만약 사람의 키, 나이 등을 표현하고 싶다면 XML에서는
- <person>
- <height></height>
<age></age>
</person> - 이런식으로 작성할 것이다.
- 웹 서버
- AJAX는 웹 서버가 있어야만 동작하므로, 그저 HTML페이지처럼 브라우저만 있는다고 돌아가는것이 아니다.
- 따라서 로컬에서는 Node.js를 설치해서 연습해보는 방식이 좋을 것이다.
- c9.io 같은 웹 프레임워크 사이트에서 express등으로 쉽게 서버를 구현해주니 그것으로 해도 편할것이다.
- AJAX의 본래 명칭
- AJAX의 본래 명칭은 XHR(XML Http Request)이다. 즉 HTTP2 request를 서버에 보낸다는 것이다.
- JSON
- JSON도 일종의 데이터 형태이다. XML은 자바스크립트에서 사용하기 불편하기 때문에 자바스크립트로 서버에 요청을 보낼때에는 주로 JSON을 많이 쓴다.
- JSON은 자바스크립트 객체, 또는 배열, 또는 둘 다를 이용해 표현된다.
- AJAX의 4가지 과정
-
XMLHTTP request object를 만든다.
- request를 보낼 준비를 브라우저에게 시키는 과정이다.
- 이것을 위해서 필요한 method를 갖춘 object가 필요하다.
-
callback 함수를 만든다.
- 서버에서 response가 왔을 때 실행시키는 함수이다
- html 페이지를 업데이트한다.
-
Open a request
-
여기서 브라우저에게 두 가지 정보를 넘긴다.
- 브라우저가 request를 보내기 위해 사용할 method(ex:post)
- 그리고 request가 갈 URL
-
- send the request
- 코드 예시
-
AJAX는 XHR객체를 형성하고 이 객체의 콜백을 만들고, 그리고 html메소드와 url을 결정한 뒤 XHR객체의 메소드로 정보를 보내는 방식이다.
var xhr= new XMLHttpRequest();
로 시작한다.
callback function을 만드는 것이 가장 복잡한 부분이다. 이것이 ajax의 핵이다. 이 함수는 browser response를 얻었을 때 작동하는 함수이다. *만약 당신이 여러 ajax request를 날렸다면, 어떤 것이 먼저 돌아올지 알 수 없다. 따라서 어떤 callback이 먼저 실행될지 알 수 없음.
AJAX에서 event는 무엇일까? user가 form을 제출하는 것은 일종의 event이다. 이 form이 제대로 입력되었는지를 check하는것은 이 event에 대응되는 프로그램이다. AJAX에 어떠한 변화가 일어났을 때, 이에 대응해서 일어나는 프로그램이 바로 ✓onreadystatechange이다.(callback function을 포함하고 있다고 생각하면 된다.) 이벤트는 AJAX Request에 어떠한 변화라도 있으면 작동된다.
XHR object는 response가 돌아왔는지 아닌지를 추적하는 property를 가지고있다. 이 property가 바로 ✓readyState 이다. 만약 이 property의 숫자가 4면 response가 돌아왔다는 것이다.
xhr. onreadystatechange = function(){
if(xhr.readyState===4){
document.getElementById(‘ajax’).innerHTML= ✓xhr.responseText;(/response이다.)
}
}
✓xhr.open(‘GET’,”sidebar.html”); html메소드와 URL을 보낸다.
open함수는 준비를 시키는것이지 보내는 것은 아니다.
✓xhr.send();
출처: https://wherethelightis.tistory.com/14 [초보개발자의 공부공간]
'TIL > Learn - NodeJs' 카테고리의 다른 글
MacOS mongodb download 에러!!(homebrew) (0) | 2019.09.14 |
---|---|
NODE JS 보물 개념 (0) | 2019.09.14 |
comment