Ajax 의 기본 응용

XML HttpRequest 를 만 드 는 방법 은 다음 과 같 습 니 다.
XML HttpRequest 클래스 는 먼저 Internet Explorer 에서 ActiveX 대상 으로 도입 되 어 XML HTTP 라 고 불 린 다.이후 Mozilla, Netscape, Safari 와 다른 브 라 우 저 들 도 XML HttpRequest 류 를 제 공 했 지만 XML HttpRequest 류 를 만 드 는 방법 은 달 랐 다.
Internet Explorer 브 라 우 저:
　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0 또는 4.0, 5.0
　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
　　xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
서로 다른 Internet Explorer 브 라 우 저 에서 XML HTTP 버 전이 일치 하지 않 을 수 있 기 때문에 서로 다른 버 전의 Internet Explorer 브 라 우 저 를 잘 호 환 하기 위해 서 는 서로 다른 버 전의 Internet Explorer 브 라 우 저 에 따라 XML HttpRequest 류 를 만들어 야 합 니 다. 위의 코드 는 서로 다른 Internet Explorer 브 라 우 저 에 따라 XML HttpRequest 류 를 만 드 는 방법 입 니 다.
Mozilla, Netscape, Safari 등 브 라 우 저
XMLHttpRequest 를 만 드 는 방법 은 다음 과 같 습 니 다: xmlhttprequest = new XMLHttpRequest();
서버 응답 이 XML mime - type header 가 없 으 면 일부 Mozilla 브 라 우 저 는 정상적으로 작 동 하지 않 을 수 있 습 니 다.이 문 제 를 해결 하기 위해 서 서버 가 응답 하 는 header 가 text / xml 가 아니라면 다른 방법 으로 이 header 를 수정 할 수 있 습 니 다.
　　xmlhttp_request = new XMLHttpRequest();
　　xmlhttp_request.overrideMimeType('text/xml');
실제 응용 프로그램 에 서 는 다양한 버 전의 브 라 우 저 를 호 환 하기 위해 XML HttpRequest 클래스 를 만 드 는 방법 을 다음 과 같이 작성 합 니 다.
　　

try{
　　if( window.ActiveXObject ){
　　for( var i = 5; i; i-- ){
　　try{
　　if( i == 2 ){
　　xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
　　else{
　　xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
　　xmlhttp_request.setRequestHeader("Content-Type","text/xml");
　　xmlhttp_request.setRequestHeader("Charset","gb2312"); }
　　break;}
　　catch(e){
　　xmlhttp_request = false; } } }
　　else if( window.XMLHttpRequest )
　　{ xmlhttp_request = new XMLHttpRequest();
　　if (xmlhttp_request.overrideMimeType)
　　{ xmlhttp_request.overrideMimeType('text/xml'); } } }
　　catch(e){ xmlhttp_request = false; }

요청 보 냈 습 니 다.
HTTP 요청 클래스 의 open () 과 send () 방법 을 호출 할 수 있 습 니 다. 다음 과 같 습 니 다.
　　xmlhttp_request.open('GET', URL, true);
　　xmlhttp_request.send(null);
open () 의 첫 번 째 매개 변 수 는 HTTP 요청 방식 인 GET, POST 또는 모든 서버 가 지원 하 는 호출 방식 입 니 다.HTTP 규범 에 따라 이 매개 변 수 는 대문자 로 해 야 합 니 다.그렇지 않 으 면 일부 브 라 우 저 (예 를 들 어 Firefox) 에서 요청 을 처리 할 수 없습니다.
두 번 째 매개 변 수 는 요청 페이지 의 URL 입 니 다.
세 번 째 매개 변수 설정 요청 이 비동기 모드 인지 여부 입 니 다.TRUE 라면 서버 응답 을 기다 리 지 않 고 자 바스 크 립 트 함수 가 계속 실 행 됩 니 다.이것 이 바로 'AJAX' 중의 'A' 다.
서버 응답
이것 은 HTTP 요청 대상 에 게 이 응답 을 어떤 JavaScript 함수 로 처리 하 는 지 알려 야 합 니 다.대상 의 onreadystatechange 속성 을 사용 할 자바 스 크 립 트 의 함수 이름 으로 설정 할 수 있 습 니 다. 다음 과 같 습 니 다.
　　xmlhttp_request.onreadystatechange =FunctionName;
Function Name 은 JavaScript 로 만 든 함수 이름 입 니 다. Function Name () 이 라 고 쓰 지 않도록 주의 하 십시오. 물론 JavaScript 코드 를 onreadystatechange 에 직접 만 들 수도 있 습 니 다. 예 를 들 어:
　　xmlhttp_request.onreadystatechange = function(){
/ / JavaScript 코드 세그먼트
　　};
우선 요청 한 상 태 를 확인 해 야 합 니 다.완전한 서버 응답 이 받 았 을 때 만 함수 가 이 응답 을 처리 할 수 있 습 니 다.XML HttpRequest 는 서버 응답 을 판단 하기 위해 ready State 속성 을 제공 합 니 다.
ready State 의 수 치 는 다음 과 같 습 니 다.
0 (초기 화 되 지 않 음)
1 (불 러 오 는 중)
2 (적재 완료)
3 (대화 중)
4 (완성)
따라서 ready State = 4 시 에 만 완전한 서버 응답 이 받 았 고 함수 가 이 응답 을 처리 할 수 있 습 니 다.구체 적 인 코드 는 다음 과 같다.
if (http request. ready State = = 4) {/ / 완전한 서버 응답 받 기}
else {/ / 전체 서버 응답 을 받 지 못 했 습 니 다}
ready State = 4 시 완전한 서버 응답 이 받 았 습 니 다. 이 어 함수 가 HTTP 서버 응답 상태 값 을 검사 합 니 다.전체 상태 값 은 W3C 문 서 를 참조 할 수 있 습 니 다.HTTP 서버 응답 값 이 200 이면 상태 가 정상 임 을 나 타 냅 니 다.
서버 에서 얻 은 데이터 처리
이 데 이 터 를 얻 을 수 있 는 두 가지 방법 이 있다.
(1) 서버 의 응답 을 텍스트 문자열 로 되 돌려 줍 니 다.
(2) XMLdocument 대상 으로 응답 되 돌려 주기