원본 XMLHttpRequest 메소드 상세 정보 검토

전형적인 로그인 검증의 예로 보여 주세요.
일반적으로 XMLHttpRequest 대상을 사용하여 로그인 검증을 하려면 다음과 같은 몇 가지 절차를 거쳐야 한다
1. DOM 방식으로 입력란의 값 얻기

 
  
var userName = document.getElementById("userName").value; 
  
 
 

2. 브라우저의 호환성 문제를 고려해야 하기 때문에 XMLHttpRequest 대상을 만드는 것은 비교적 복잡하다.      

 
  
if (window.XMLHttpRequest) { 
  
        //  FireFox，Mozillar，Opera，Safari，IE7，IE8 
  
        xmlhttp = new XMLHttpRequest(); 
  
        //         mozillar    BUG     
  
        if (xmlhttp.overrideMimeType) { 
  
            xmlhttp.overrideMimeType("text/xml"); 
  
        } 
  
    } else if (window.ActiveXObject) { 
  
         //  IE6，IE5.5，IE5 
  
        //        XMLHTTPRequest       ，     js     
  
        //          
  
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
  
        for (var i = 0; i < activexName.length; i++) { 
  
            try{ 
  
                //           ，            
  
                //      ，     ，        ，       
  
                xmlhttp = new ActiveXObject(activexName[i]); 
  
                break; 
  
            } catch(e){ 
  
            } 
  
        } 
  
    } 
  
 
 

3. XMLHttpRequest 객체의 콜백 함수를 등록하고, 콜백 함수를 등록할 때는 괄호를 넣지 않고 함수 이름을 필요로 합니다.    

 
  
//       ，      ，      
  
    //          ，      ，            ，      
  
    xmlhttp.onreadystatechange = callback; 
  
 
 

4. 설정(GET) 연결 정보

 
  
//       http     ，    http     ，    get post 
  
//          url  ，get         url  
  
//                   ，true     
  
xmlhttp.open("GET","AJAXServer?name="+ userName,true); 
  
 
 

5. 요청 보내기

 
  
xmlhttp.send(null); 
  
 
 

6.(POST) 방식은 http의 요청 헤더를 스스로 설정해야 하며 인코딩을 해야 하기 때문에 XHR에 직접 설치할 수 없습니다.open의 두 번째 매개 변수에서 데이터를 보내고send () 방법으로 데이터를 전송해야 합니다

 
  
//POST        
  
//xmlhttp.open("POST","AJAXServer",true); 
  
//POST        http     
  
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  
//POST       
  
xmlhttp.send("name=" + userName); 
  
 
 

콜백 함수:

 
  
//     
  
function callback() { 
  
    //alert(xmlhttp.readyState); 
  
    //5。       
  
    //             
  
    if (xmlhttp.readyState == 4) { 
  
        //  http        
  
        if (xmlhttp.status == 200) { 
  
            //             
  
            //               
  
            var responseText = xmlhttp.responseText; 
  
            //          
  
            //  dom     div           
  
            var divNode = document.getElementById("result"); 
  
            //        html   
  
            divNode.innerHTML = responseText; 
  
        } else { 
  
            alert("   ！！！"); 
  
        } 
  
    } 
  
}