Ajax封装及使用

1.封装异步对象

//创建Xhr异步对象
function createXhr(){
  var xhr=null;
  if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
  }else{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
  }
  return xhr;
}

2.监听事件=》3.打开连接(Get)=》4.发送请求

//2.监听事件
function getMsg(){
    //1.创建xhr
    var xhr=createXhr();
 	xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
      var result=xhr.responseText;
      console.log(result);
    }
  }
  //3.打开连接
  xhr.open("get","/demo/ajaxDemo",true);
  //4.发送请求
  xhr.send(null);
  }

2.监听事件=》 3.打开连接(Post)=》4.发送请求

function ajaxlogin(){
   //1.创建异步对象
     var xhr=createXhr();
   //2.监听
   xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
           var res=xhr.responseText;
           alert(res);
         }
 	}
     //3.打开连接
     xhr.open("post","/myPro/ajaxlogin",true);
     //增加：消息头
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     //4.发送请求
      var uname=$("uname").value;
      var upwd=$("upwd").value;
      var url="uname="+uname+"&upwd="+upwd;
      xhr.send(url);
 }