Ajax Request Object

							/* 요청객체를 만드는 함수 */
							function createRequest () {
								try {
									request = new XMLHttpRequest();
								}
								catch (tryMS) {
									try {
										request = new ActiveXObject("Msxml2.XMLHTTP");
									}
									catch (otherMS) {
										try {
											request = new ActiveXObject("Microsoft.XMLHTTP");
										}
										catch (failed) {
											request = null;	 // null을 반환해서 이 함수를 요청한 코드에게 무엇인가 문제가 있음을 알려줌
										}	
									}	
								}	
								return request; // 요청객체를 반환, 없을 시 null
							}	
						
							// ajax 요청
							window.onload = function  () {
								var request = createRequest();
								request.onreadystatechange = function (event) {
									if (reqeust.readyState == 4) {
										if (request.status == 200) {
											document.body.innerHTML  = request.responseText;
										}
									}
								}

								request.open('GET', '/Home/MyFirstStringAction', true);
								request.send();
							}
						

XMLHttpRequest 객체를 사용한 기본적인 Ajax

XMLHttpRequest는 자바스크립트가 Ajax를 사용할 때 사용하는 객체입니다. 간단하게 XHR이라고 부릅니다.
인터넷 익스플로러 6이하는 XMLHttpRequest 객체가 없지만, ActiveX 객체의 형태로 XMLHttpRequest 객체와 같은 기능을 제공하므로 Ajax 요청을 수행할 수 있습니다. XMLHttpRequest 객체가 바로 ActiveX 객체를 모방해서 만든 것이므로 객체를 생성하는 방법만 다를 뿐 사용하는 방법은 같습니다.
그래서 상단의 예제있는 createRequest() 함수를 이용해서 브라우저에 대응하는 request 객체를 호출합니다.
createRequest() 함수는 요청 객체를 만들어서 리턴합니다. 인터넷 익스플로러6이하에서는 XMLHttpRequest 객체가 없으므로 예외가 발생합니다. 예외가 발생할 때 ActiveXObject() 생성자 함수를 사용해서 인터넷 익스플로러 6 이하에 맞는 요청 객체를 생성합니다. XMLHttpRequest 객체와 같은 기능을 수행하는 ActiveX 객체는 Msxml2.XMLHTTP 또는 Microsoft.XMLHTTP입니다.

XMLHttpRequest 객체는 빈 편지지와 같습니다. 이 빈 편지지에는 수취인과 배송 방식, 내용물을 넣을 수 있습니다. XMLHttpRequest 객체의 open() 메서드를 사용하여 편지지의 전송 위치와 방식을 지정합니다. open() 메서드의 형태는 다음과 같습니다.

							XMLHttpRequest.open(Method, URL, isAsync);
						

open() 메서드의 첫 번째 매개 변수에는 GET이나 POST 같은 전송 방식을 입력하고, 두 번째 매개 변수에는 요청을 수핼할 위치를 지정합니다.세 번째 매개 변수는 동기식이냐 비동기식이냐을 결정합니다. 비동기식이면 true를 사용합니다.
open() 메서드를 사용하여 상기의 예제와 같이 액션 MyFirstStringAction에 GET 방식으로 Ajax를 수행해 달라는 간단한 편지지를 만들 수 있습니다.

							var request = createRequest() // 브라우저에 맞게 요청객체를 반환합니다.
							request.open('GET', '/Home/MyFirstStringAction', false);
						

편지에 수취인과 전송 위치, 전송 방식을 썼으니 편지를 보내면 됩니다. XMLHttpRequest 객체의 send() 메서드를 사용해 편지를 보내면 되고, 편지가 성공적으로 보내지면 XMLHttpRequest 객체의 responseText 속성으로 답장이 옵니다. 상기의 예제 코드는 send() 메서드와 responseText 속성을 사용해 Ajax를 수행하고 Ajax 응답을 출력합니다.



XMLHttpRequest 객체를 사용한 요청 매개 변수 전달

이제 한 걸음 더 나아가 요청 매개 변수를 전송하고 응답을 받아봅시다. 액션 ActionWithData는 name과 age의 두가지 요청 매개 변수를 넘겨주면 문자열을 만들어 줍니다. 요청 매개 변수는 아래의 코드처럼 URL을 사용해 넘겨줍니다. 웹 서비스를 사용해 가져온 HTML 태그를 body태그에 넣습니다.

							// XMLHttpRequest 객체를 생성
							var request = createRequest() // 브라우저에 맞게 요청객체를 반환합니다.
							request.open('GET', '/Home/ActionWithData?name=RintIanTta&age=21', true);

							// Ajax를 수행
							request.send();

							//결과 출력
							document.body.innerHTML = request.responseText;
						


동기 방식일 때 send() 메서드에 소비되는 시간 측정 방법

							// XMLHttpRequest 객체를 생성
							var request = createRequest() // 브라우저에 맞게 요청객체를 반환합니다.
							request.open('GET', '/Home/MyFirstStringAction', false);

							// send() 메서드에 소비되는 시간 측정
							var prevDate = new Date(); // Date객체 생성
							request.send();
							var nowDate = new Date();

							//결과 출력
							alert(nowDate - prevDate);
						


XMLHttpRequest 객체의 onreadystatechange 이벤트

자바스크립트는 데이터가 배달된 것을 onreadystatechange 이벤트를 통해 알 수 있습니다. onreadystatechange 이벤트는 XMLHttpRequest의 상태가 변경될 때마다 이벤트를 호출합니다. 아래의 예시처럼 onreadystatechange 이벤트에 이벤트 핸들러를 연결하고 XMLHttpRequest 객체의 readyState 속성을 출력해 봅니다.

						
							window.onload = function  () {
								var request = createRequest();
								request.onreadystatechange = function (event) {
									// 출력
									alert(request.readyState);
								}

								request.open('GET', '/Home/MyFirstStringAction', true);
								request.send();
							}
						

실행하면 경고창에 숫자를 출력합니다. 이 숫자는 XMLHttpRequest 객체의 readyState 속성인데요. readyState 속성은 아래의 표와 같습니다.

이벤트 관련 method
readyState 속성 설명
0 Request 객체를 만들었지만 open() 메서드를 사용해 초기화하지 않았음
1 Request 객체를 만들고 초기화했지만 send() 메서드가 사용되지 않음
2 send() 메서드를 사용했지만 아직 데이터를 받지 못함
3 데이터의 일부만 받음
4 모든 데이터를 받음

Ajax를 사용해 모든 데이터를 전송받는 시점은 readyState 속성이 4일 때 입니다. 따라서 이때 아래처럼 문서 객체와 관련된 처리를 해주면 됩니다.

						
							window.onload = function  () {
								var request = createRequest();
								request.onreadystatechange = function (event) {
									if(request.readyState == 4){
										document.body.innerHMTL = request.responseText;
									}
								}

								request.open('GET', '/Home/MyFirstStringAction', true);
								request.send();
							}
						

위 예시 코드는 거의 완벽하게 Ajax를 수행할 수 있는 코드입니다. 하지만, Ajax 요청을 사용해 데이터를 가져왔는데 가져온 데이터가 올바른 데이터가 아닐 수 있으므로 좀금 더 보완해야 합니다. 아래의 예시 코드처럼 XMLHttpRequest 객체의 status 속성이 200일 때 원하는 코드를 처리하세요.

						
							window.onload = function  () {
								var request = createRequest();
								request.onreadystatechange = function (event) {
									if(request.readyState == 4){
										if(request.status == 200) {
											document.body.innerHMTL = request.responseText;
										}
									}
								}

								request.open('GET', '/Home/MyFirstStringAction', true);
								request.send();
							}
						
이벤트 관련 method
readyState 속성 설명
1** 처리 중 100 Continue
2** 성공 200 ok
3** 리다이렉트 300 Multiple Choices
4** 클라이언트 오류 400 Bad Request
5** 서버 오류 500 internal Server Error