자바스크립트객체 HttpRequest
브라우저의 다른 작업을 방해하지않으면서 서버에 데이터를 요청할수 있게하는 HttpRequest..이번엔 그 객체를 직접 만들어보자
인스턴스 만들기
대부분의 브라우저에서는 다음과 같이 간단히 시작할 수 있다
xhr = new XMLHttpRequest();
여전히 걸림돌은 IE이다.익스플로어의 경우는 액티브X인스턴스를 만들어야된다.
xhr = new ActiveXObject("Microsoft.XMLHTTP");
자 그럼 일반적으로 내장객체지원하는 브라우저 그리고 그렇지않은 익스플로어를 구분하고 그에따라 위에서 생성한 적절한것을 사용하도록 해야할 것이다. 그럼 이때 필요한것은? 당연히 조건문..
//XMLHttpRequest를 지원할 경우
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
//아니면 액티브X
else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
마지막으로 볼것은 이제까지 설명한것에 대해 브라우저가 액티브X를 지원한다고 해서 ajax를 위한 특정한 액티브X 객체가 있다는 보장은 없다, 따라서 검색해보고 그에따른 적절한 액티브X를 사용할 수 있도록 하는것이다.이때 try..catch를 사용한다.
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}
}
최종 완성된 인스턴스를 점검해보자
function getHTTPObject() {
var xhr = false;
//코드를 작석항때마다 반복코드작업을 피하기위해
//변수로 선언하고 판별가능하도록 했다.
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
//내장객체 인스턴스
} else if (window.ActiveXObject) {
//아니면 액티브X 객체의 인스턴스
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}
}
return xhr;
}
서버와 통신
요청
XMLHttpRequest 인스턴스를 만든후 서버와 통신하기해 먼저 요청해보자
function grabFile(file) {
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
//onreadystatechange 새로고쳐 요청
displayResponse(request);
};
//비동기요청 open메소드
request.open("GET", file, true);
//보내기
request.send(null);
}
}
- ajax에거 헤더 정보를 보내는 기능onreadystatechange
- open메소드 : 단순한 파일을 받을때는 GET, 데이터를 받을때는 POST,두번째인자 는 url,마지막은 비동기로할것인지 결정
- 데이타가 아닌 GET으로 파일요청시 아무것보내지않는다.
응답 readyState
- readyState는 ajax에 요청 상태를 나타낸다.0~4 다음과 같은갑을 가진다.
- 0:초기화되지않음
- 1:open메소드 호출
- 2:open메소드 호출, send메소드호출, 송신완료 요청시작
- 3:수신중
- 4:수신완료
실제 사용하기위해서 위의 상태에서 우리는 값4 즉 수신완료가정하에 작업되어야 한다.다음예제를 보자
function displayResponse(request) {
if (request.readyState == 4) {
//수신완료 될경우
if (request.status == 200 || request.status == 304) {
어쩌고 저쩌고 수행할 작업
}}}
위에서 request.status는 무엇인가?이것은 서버상태코드를 말한다.흔히 우리가 사이접속에러시 404에러 Not Found를 한번쯤은 보았을꺼다, 또403 forbidden등 이런 상태를 보았을것이다.이번호가 지정해놓은 상태를 말해주는 코드이다.위에서 200,304의 의미는 성공적응답을 말하는 것이다.
마지막으로 수행할작업을 넣어주면된다
function displayResponse(request) {
if (request.readyState == 4) {
//수신완료 될경우
if (request.status == 200 || request.status == 304) {
//성공적 응답
alert(request.responseText);//작업
}}}
예제보기
앞에서 사용한것을 적용해보자 송수신할 것은 텍스트 문서 이고 예제를보자
결과는 여기서확인 http://sianasiatiger.cafe24.com/study/A_ajaxbasic.html
댓글