Ajax 학습 (3) - XML HttpRequest 대상 의 5 단계 사용법

6687 단어 [B / S 개발]
Ajax 의 핵심 기술 은 XML HttpRequest 대상 으로 서버 에 전체 페이지 를 제출 하지 않 은 상태 에서 부분 적 으로 웹 페이지 를 업데이트 할 수 있다.이 대상 을 통 해 Ajax 는 데스크 톱 애플 리 케 이 션 처럼 서버 와 데이터 계층 만 교환 할 수 있 습 니 다. 매번 화면 을 새로 고 칠 필요 도 없고, 매번 데이터 처리 작업 을 서버 에 맡 길 필요 도 없습니다.이렇게 하면 서버 부담 을 줄 이 고 응답 속 도 를 높 일 뿐만 아니 라 사용자 의 대기 시간 도 단축 시 킬 수 있다.일반적으로 하나의 Ajax 의 실현 과정 은 다섯 단계 가 있 는데, 아래 우리 상기 블 로그 의 작은 사례 를 예 로 들 어 점차적으로 학습 하 겠 습 니 다.
1.  XMLHttpRequest  。

IE 브 라 우 저 는 XML HttpRequest 를 ActiveX 대상 으로 구현 합 니 다. Firefox, Opera, Netscape 등 다른 브 라 우 저 는 로 컬 javascript 대상 으로 구현 합 니 다. IE 7.0 및 이상 버 전 은 두 가지 생 성 방식 을 모두 지원 합 니 다.
 //      XMLHttpRequest     
        var xmlHttp = null;
        //  XMLHttpRequest  
        function creatXMLHTTP()
        {
            //         ActiveX  ,  IE6     
            if (window.ActiveXObject)
            {
                //        ActiveXObject          
                var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                //      XMLHttpRequest  
                for (var i=0;i
  //  XMLHttpRequest  ,          
            creatXMLHTTP();

            if (xmlHttp!=null)
            {
                //    XMLHttpRequest         
               
                //  http  
               
                //  http  
                
            }
            else
            {
                alert("        XMLHTTP");
            }
2.      。
   //    XMLHttpRequest         
                xmlHttp.onreadystatechange = httpStateChange;
      ,XMLHttpRequest          ,              。
0:      ,      XMLHttpRequest  ;
1:     , XMLHttpRequest                    、          ;
2:    ,XMLHttpRequest      ;
3:      ,  XMLHttpRequest              ,           ;
4:    :  XMLHttpRequest                   。
 
  
 
  

使用XMLHttpRequest对象的onreadystatechange属性,可以设置响应XMLHttpRequest对象状态变化的函数。

设置回调函数时,不要在函数名后而加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。

 
  

3.  open                。
 //  http  
                xmlHttp.open("get","userName.txt", true);

XML HttpRequest 의 open (method, URL, flag, name, password) 방법 은 대상 을 초기 화 하 는 데 사용 되 며, 다음 세 개의 인 자 는 선택 할 수 있 습 니 다.
method: 서버 에 http 요청 을 어떤 방식 으로 보 낼 지 지정 합 니 다. 매개 변수 값 은 get, post, head, put, delete 다섯 가지 일 수 있 습 니 다.
URL: 서버 의 URL, 즉 사용자 가 데 이 터 를 처리 하고 되 돌려 주 는 프로그램의 URL 을 지정 합 니 다.이 URL 은 절대 주소 일 수도 있 고 상대 주소 일 수도 있 습 니 다.
flag: http 요청 을 제출 하 는 방식 을 지정 합 니 다. true 는 비동기 방식 을 기본 값 으로 합 니 다.false 는 동기 화 방식 을 가리킨다.
name 과 password: 서버 가 인증 이 필요 하 다 면 이 두 매개 변 수 는 사용자 이름과 비밀 번 호 를 제출 하 는 데 사 용 됩 니 다.
4. 보 낸 데 이 터 를 설정 하고 서버 와 상호작용 을 시작 합 니 다.
  //  http  
                xmlHttp.send(null);

http 요청 을 보 내 면 XML HttpRequest 의 send (data) 방법 을 사용 합 니 다. data 매개 변 수 는 open () 방법 에서 URL 매개 변수 가 지정 한 파일 에 전달 하 는 매개 변수 입 니 다.만약 에 여러 개의 파 라 메 터 를 전달 하려 면 '&' 로 구분 하고 파 라 메 터 를 전달 하여 'null' 을 쓸 필요 가 없습니다.
5. 리 턴 함수 에서 상호작용 이 끝 났 는 지, 응답 이 정확 한 지 판단 하고 필요 에 따라 서버 에서 돌아 온 데 이 터 를 가 져 와 페이지 내용 을 업데이트 합 니 다.
1) 비동기 호출 성공 여 부 를 판단 합 니 다.
if (xmlHttp.readyState==4)//      
{
      if (xmlHttp.status==200 || xmlHttp.status==0)//      ||      
      {                    
       }
}

ready State 속성 값 은 4 로 비동기 호출 이 완료 되 었 음 을 설명 하지만 비동기 호출 이 성공 한 것 은 아 닙 니 다.XML HttpRequest 의 status 속성 은 서버 에서 되 돌아 오 는 상태 코드 를 얻 을 수 있 습 니 다.0 은 이해 할 수 없 는 http 상 태 를 의미 합 니 다. 보통 로 컬 컴퓨터 에서 파일 을 열 때 만 돌아 갑 니 다.자주 사용 하 는 http 상태 코드 는 다음 과 같은 세 가지 가 있 습 니 다.
200: 서버 가 웹 페이지 로 성공 적 으로 돌 아 왔 습 니 다.
404: 클 라 이언 트 가 요청 한 웹 페이지 가 존재 하지 않 습 니 다.
503: 서버 응답 시간 초과.
2) 서버 에서 되 돌아 오 는 데이터 획득:
 var userNames = xmlHttp.responseText;

비동기 호출 의 최종 목적 은 서버 에서 돌아 온 데 이 터 를 받 고 이 데이터 에 따라 클 라 이언 트 웹 페이지 에 어떻게 표시 할 지 결정 하 는 것 입 니 다.비동기 호출 에 성공 하면 XML HttpRequest 대상 은 다음 4 개의 속성 을 사용 하여 서버 가 되 돌아 오 는 데 이 터 를 얻 습 니 다.
responseText: 서버 가 되 돌려 준 데 이 터 를 문자열 로 되 돌려 줍 니 다.
responseXML: XML 로 되 돌아 가 는 것 을 의미 합 니 다.
response Body: unsigned byte 배열 로 되 돌아 오 는 것 을 의미 합 니 다.
responseStream: ISTream 대상 으로 되 돌아 가 는 것 을 의미 합 니 다.
3) 부분 업데이트:
//             
var node = document.getElementById("myDiv");
//                       
node.firstChild.nodeValue = text;

서버 에서 돌아 온 데 이 터 를 가 져 오 면 표시 합 니 다.Ajax 는 DOM 을 통 해 부분 업데이트 데 이 터 를 완성 합 니 다.
   
    Ajax 프로 그래 밍 에서 XML HttpRequest 대상 에 대한 사용 을 떠 날 수 없습니다. 매번 사용 할 때마다 이 다섯 가지 작업 을 합 니 다.반복 되 는 일 에 직면 하면 우 리 는 방법 을 생각해 야 한다.이 프로 그래 밍 절 차 는 비교적 고정 되 어 있 기 때문에 현재 이미 봉인 되 어 코드 를 다시 사용 하고 프로 그래 밍 을 간소화 합 니 다.하지만 훌륭 한 프로그래머 가 되 려 면 이 다섯 가지 절 차 를 알 아야 한다.

좋은 웹페이지 즐겨찾기