Ajaxの迅速な理解(3)


今日Ajaxの最も基本的な流れを学びました.JavaScriptクラスライブラリは一切使用されていません.今、前回の内容を別の方法で実現します.XMLHTTPRequestオブジェクトでAJAXの非同期データインタラクションを行います.不器用だけど実用的.他は変わらないjs.私たちはもう一つのjsを作成してもいいです.
//        
//      XMLHTTPRequest    AJAX       
var xmlhttp;
function verify(){
    //1.  dom           
    //document.getElementBuId("userName") dom            ,        HTML        ,  <input>
    //.value           value   
    var userName = document.getElementById("userName").value;


    //2.  XMLHttpRequest  
    //  XMLHttpRequest            
    //    IE                        
    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){
         //  IE5,IE5.5,IE6(IE7,IE8)
         //        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){
           }
       }
  }
   //   XMLHttpRequest      
//        if(!xmlhttp){
//             alert("XMLHttpRequest      !");
//             return;
//        }else{
//           //alert(xmlhttp);
//            alert(xmlhttp.readyState);
//        } 

    //2       
    //                  
    //            ,      ,             ,     
         xmlhttp.onreadystatechange = callback;

    //3      
    //       http     。    http     。    get post
    //          url  ,get       url 
    //                   ,true    
    //GET       
    //xmlhttp.open("GET","AJAXServer?name="+userName,true);
    
    //POST       
    xmlhttp.open("POST","AJAXServer",true);
    //POST        http    
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //POST      
    xmlhttp.send("name="+userName);
    
    //4     ,           
    //     ,send                 
    //    ,send           
    
    //GET  
    //xmlhttp.send(null);
}

//    
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("   ");
      }
    }

}

コード注釈が詳しいので、くどくどしません.