ajax的原理

来源:互联网 发布:数据迁移工程师 编辑:程序博客网 时间:2024/06/02 04:41
var xmlhttp;


function verify() 
{
/*
 $.get("servlet/UserInfo?username="+$("#username").val(),null,function(data)
 {
    $("#userInfo").html(data);
 }
 )
  */
  var username = document.getElementById("username").value;
  
 

  //在ie7以后微软改邪归正,也开始使用了xmlHttpRequest

//由于有很多种浏览器都是有的xmlhttpRequest,这里可以更好的判断浏览器

  if(window.XMLHttpRequest)
  {
     xmlhttp = new XMLHttpRequest();

    

   //解决mozil浏览器可能会出现的问题

    if(xmlhttp.overrideMimeType)
    {
         xmlhttp.overrideMimeType("text/xml");
    }
  }
  else if(window.ActiveXObject)
  {
      var activeName  =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
      
      for(var i =0; i <activeName.length;i++)
      {
         try
         {
             xmlhttp = new ActiveXObject(activeName[i]);
             break;
         }
         catch(e)
         {
         }
      }
}
   if(!xmlhttp)
   {
         alert("XMLHttpRequest对象创建失败!!");
         return;
   }
   else
   {
         alert(xmlhttp.readyState);
   }
   
   xmlhttp.onreadystatechange =callback;
   
 //  xmlhttp.open("get","servlet/UserInfo?username="+username,true);
   
     xmlhttp.open("post","servlet/UserInfo",true);

     

   //注意对于post方法需要设置这个属性

     xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //传递参数
     xmlhttp.send("username="+username);
   
   //xmlhttp.send(null);
  }
  
  function callback()
  {
       alert(xmlhttp.readyState);

       

  //判断对象的状态是交互完成

       if(xmlhttp.readyState ==4)

       {

//判断http的交互是否成功

          if(xmlhttp.status == 200)

          {

           //获取服务漆器端返回的数据
            //获取服务器段输出的纯文本数据

              var respnseText = xmlhttp.responseText;
              
              userInfo.innerHTML = respnseText;
              
          }
       }
  
  }
原创粉丝点击