Ⅰ. Ajax(Asynchronous JavaScript and XML)
1. 개념
Ajax는 약자에서 알 수 있듯이 말그대로, JavaScript와 XML을 이용한 비동기적 정보교환 방법이다.
XML(eXtensible Markup Language) => 문서 작업이라고 생각하면 된다. 문서나 데이터 구조를 기록하는 언어!
(플젝 할 때 강사님 따라서 그냥 xml파일 수정하기만 했지 뭔지 제대로 찾아볼 생각을 안 했었는데 XML이 뭔지 궁금해서 찾아봤다. 따로 정리하기엔 애매해서 링크 타고 들어가서 헷갈릴 때마다 확인해보자.)
한마디로 말하자면, Client와 Server 간에 XML 데이터를 JavaScript를 사용해 비동기 통신으로 주고받는 기술이다.
하지만 요즘에는 데이터 전송을 위한 데이터 포맷방법으로 XML을 사용하기 보다는 JSON을 더 많이 사용한다.
(cf. HTML은 데이터 표현을 위한 포맷방법)
Ajax는 브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 JavaScript를 실행해 서버에 데이터만을 별도로 요청한다.
이를 이해하기 위해서 Ajax의 주요 구성요소도 정리해보았다.
2. Ajax 주요 구성요소
1) XMLHttpRequest
- 웹 서버와 통신을 담당하는 것
- 사용자의 요청을 웹 서버에 전송해주고, 웹 서버로부터 받은 결과를 사용자의 웹 브라우저에 전달해준다.
2) DOM(Document Object Model)
- HTML과 XML문서에 대하여 이들 문서의 구조적인 표현방법을 제공하며, 어떻게 하면 스크립트를 이용하여 이러한 구조에 접근할 수 있는지를 정의하는 API 이다.
- DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다.
- DOM(Document Object Model) 에 관련한 참조사이트
http://wiki.gurubee.net/pages/viewpage.action?pageId=6259958
3) CSS
- 글자색, 배경색, 위치 등 UI 관련 부분을 담당한다.
4) JavaScript
- 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttprequest 객체를 통해 웹서버에 사용자의 요청을 전송한다.
- 웹서버로 부터의 응답은 XMLHttprequest 객체를 통해 얻어오는데 응답결과가 오면 DOM, CSS 등을 사용해서 화면을 조작함.
3. XMLHttpRequest 객체 생성하는 방법
1) IE(인터넷익스플러어)
var xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
2) 크롬, 파이어폭스등 나머지들
var xmlHttpObject = new XMLHttpRequest();
3) 웹 브라우저에 상관없이 XMLHttprequest 객체 생성하는 방법
var xmlHttpRequest = null;
function getXMLHttpRequest() {
if(window.ActiveXObject) {
try{
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) {
return null;
}
} //end of if(window.ActiveXObject)-----------
} else if(window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
} //end of function getXMLHttpRequest()----------------------------
xmlHttpRequest = getXMLHttpRequest();4. 생성된 XMLHttpRequest 객체를 사용하여 웹서버에 요청을 전송하는 하는 방법
1) XMLHttpRequest 객체의 메소드들.
(1) abort() 메소드 : 현재의 요청을 중단한다.
(2) getAllResponseHeadders() 메소드 : Http 요청에 대한 모든 응답 헤더들을 키(key)와 값(value)의 쌍인 문자열을 리턴해준다.
(3) getResponseHeaders() 메소드 : 매개 변수로 주어진 headerName 에 해당하는 헤더의 값을 문자열로 리턴해준다.
(4) open() 메소드 : 사용자의 요청을 설정하는 메소드로 반드시 기술해야 하는 매개변수인 method, url 과 선택적으로 기술할 수 있는 요청에 대한 매개변수들을 갖고 있다.
- open() 메소드는 3개의 파라미터를 입력 받는데, 각 파라미터는 아래와 같은 의미를 가진다
① 첫번째 파라미터: Http method를 지정한다.
HTML 폼을 보면 method 속성에 "GET"이나 "POST"를 값으로 주는데, 이 첫번째 파라미터도 같은 값이 사용된다.
② 두번째 파라미터: 접속할 URL을 입력한다.
웹 브라우저에 보안상의 이유로 접속할 URL은 현재 페이지와 같은 도메인에 있어야 한다.
③ 세번째 파라미터: 비동기(true) / 동기(false) 방식을 지정한다.
open() 메소드에서 세번째 파라미터를 true(비동기) 로 지정해주면
send() 메소드가 호출되고서 send() 메소드를 통한 서버와의 통신이 진행중이더라도
send() 메소드 호출 바로 다음의 코드로 넘어가 진행을 하지만,
open() 메소드에서 세번째 파라미터를 false(동기) 로 지정해주면
send() 메소드가 호출되고서 send() 메소드를 통한 서버와의 통신이 완전히 완료된 이후에야
send() 메소드 호출 바로 다음의 코드로 넘어가 진행을 하게 된다. (5) send() 메소드 : 사용자의 요청을 서버로 보내는 역할.
(6) setRequestHeader() 메소드 : 헤더의 값을 설정한다.
2) GET 방식으로 웹 서버에 있는 test.jsp 페이지에 요청하는 예
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("GET", "test.jsp?id=hanmailrg&passwd=javateahcer", true);
xmlHttpRequest.send(null);이때 주의해야 할 점이 있다.
open() 메소드에서 URL이 GET 방식의 파라미터로 넘겨받도록 되어 있는 경우,
그 파라미터 값이 한글이면 한글이 깨진다.
예를 들어, GET 방식으로 웹 서버에 있는 test.jsp 페이지를 요청한다고 생각해보자.
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("GET", "/test.jsp?name=김나윤&addr=서울", true);
xmlHttpRequest.send(null);이 경우 URL을 지정하는 두번째 파라미터 값에 한글이 포함되어 있다. 따라서 한글이 깨져 test.jsp 페이지를 성공적으로 요청할 수 없기 때문에 encodeURIComponent() 함수를 사용하여 오류를 방지한다.
xmlHttpRequest = getXMLHttpRequest();
var params = "name=" + encodeURIComponent("김나윤") + "&addr=" + encodeURIComponent("서울");
xmlHttpRequest.open("GET", "test.jsp?" + params, true);
xmlHttpRequest.send(null);3) POST 방식으로 웹 서버에 있는 test.jsp 페이지에 요청하는 예
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("POST", "test.jsp", ture);
xmlHttpRequest.send("id=hanmailrg&passwd=javateacher");4) 웹 서버에 있는 "test.txt" 파일을 읽어오는 코드 예
xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.open("GET", "test.txt", true);
xmlHttpRequest.send(null);5. XMLHttpRequest 객체의 프로퍼티를 사용하여 서버에서의 응답처리 해주기
1) XMLHttpRequest 객체 properties 종류
※ XMLHttpRequest 객체의 프로퍼티 종류
(1) onreadystatechange : 서버에 서 응답이 오면 해당하는 이벤트를 처리하기 위해
이벤트 핸들러(자바스크립트로 되어진 콜백함수임)에 해당하는 콜백함수가 실행되어야 하는데
그 콜백함수명을 입력받아주는 곳이 onreadystatechange 이다.
(2) readyState : 서버에서의 응답처리를 해주는 XMLHttpRequest 객체의 진행상태값을 알려준다.
--------------------------------------------------------------------------------------------------------
readyState 의 값 의미 설명
--------------------------------------------------------------------------------------------------------
0 uninitialized XMLHttpRequest 객체만 생성되어져 있고 초기화가 안되어진 상태
(open 메소드를 호출하지 않은 상태)
1 loading open 메소드가 호출되어졌으나 send() 메소드가 호출되지 않은 상태
2 loaded send() 메소드가 호출되었으나 status 와 헤더는 도착하지 않은 상태
3 interactive 서버에서 응답 데이터가 전달되어지고 있는 진행중인 상태
4 completed 서버에서 응답 데이터가 모두 전달되어 모두 받은 상태로서 응답 데이터를 사용할 수 있는 상태.
응답데이터는 요청이 성공한 응답데이터가 일수도 있고 요청이 실패한 응답데이터 일수도 있다.
---------------------------------------------------------------------------------------------------------
(3) responseText : 서버에서의 응답을 문자열로 받을때 사용한다.
(4) responseXML : 서버에서의 응답을 XML 형태로 받을때 사용한다.
(5) responseBody : 서버에서의 응답을 이진 코드 형태로 받을때 사용한다.
(6) status : 서버로 부터 응답받는 Http 상태코드로서 숫자가 리턴된다.
-------------------------------------------------------------------------------------------------
status 의 값 의미 설명
-------------------------------------------------------------------------------------------------
200 OK 요청 성공
403 Forbidden 접근 금지
404 Not Found 페이지 없음
500 Internal Server Error 서버 error 발생
그러므로 서버로 부터 응답이 XMLHttpRequest 객체를 통해 도착되어지면 XMLHttpRequest 객체의 status 프로퍼티 값을 확인하여
요청이 성공적으로 수행되어 도착했는지 실패한 응답이 도착했는지를 먼저 확인해야 한다. 6. 정리
1) 사용자가 이벤트를 발생시키면 이 이벤트를 처리해주는 이벤트 처리함수를 호출한다.
2) 이벤트 처리함수에서는 XMLHttpRequest 객체의 send() 메소드를 사용하여 서버로 응답요청을 보낸다.
3) 서버는 응답요청에 해당하는 응답결과를 XMLHttpRequest 객체에게 보내준다.
4) 응답결과를 받은 XMLHttpRequest 객체는 응답결과를 가지고 onreadystatechange 프로퍼티에 입력되어진 콜백함수를 호출하여 콜백함수에 기재되어진 코딩대로 이벤트를 처리(자바스크립트로 되어짐)해준다.
Ⅱ. JSON(JavaScript Object Notatioon)
1. JSON(JavaScript Object Notation)이란?
Ajax를 이용한 웹 어플리케이션 개발시 서버와 통신하여 데이터를 보내기도 하고 받기도 한다. 이때, 데이터 전송을 위한 포맷방법은 특정 프로그래밍 언어에 국한되지 않고 독립적으로 사용되도록 만들어야 좋을 것이다.
과거에는 데이터 전송을 위한 방법으로 XML을 많이 사용했다.
그런데 XML은 다소 복잡학고 어렵고, 에러가 있으면 페이지 전체가 멈춘다는 단점이 있다.
이를 보안하기 위해 등장한 데이터 전송을 위한 포맷방법이 바로 JSON 이다.
2. JSON 형식
JSON은 말그대로 자바스크립트 객체 표기법이다.
