2020-05-26——ajax请求步骤与函数封装

1、ajax请求步骤

//创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//兼容写法
var xhr = null;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
   xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

　get请求方式

//准备发送
xhr.open("GET","url" + "userName=" + username,true); //请求方式，请求地址，是否异步（默认为true，异步请求）
//执行发送
xhr.send(null)

post请求方式

//准备发送
xmlhttp.open("POST","请求地址",true);
//请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//参数
var param = "userName=" + userName;
//请求体 执行发送
xmlhttp.send(param);

//通过回调函数，获取数据
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
          var result = xhr.responseText;
    }
}

2、封装ajax函数

function Ajax(type,url,params,dataType,callback){
    //创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    //准备发送
    if(type == "get"){
            if(params && params != ""){
            url = url + "?" + params;
        }
    }
    xhr.open(type,url,true);
    //执行发送
    if(type == "get"){
        xhr.send(null);
    }else if(type == "post"){
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-    urlencoded");
        xhr.send(params);
    }
     //通过回调函数，获取数据
     xhr.onreadystatechange=function()
     {
          if (xhr.readyState==4 && xhr.status==200)
          {
              var result = null;
              if(dataType == "json"){
                  result = xhr.responseText; //返回字符串
                  result = JSON.parse(result); //json格式化数据
              }else if(dataType == "xml"){
                  result = xhr.responseXML; 
              }else{
                  result = xhr.responseText; 
              }
              if(callback){
                  callback(result);
              }
          }
     }
}