封装一个原生的ajax请求

现在我们使用各种框架提供的ajax请求，很方便的请求后台接口，但是原生js的http请求一定不能丢

原生js中实现http主要通过XMLHttpRequest对象,关键方法是open()和send（）

 get请求

get请求主要用途是向服务器请求我们需要的数据，如下，我们发起一个get请求，传递两个参数name和age

参数直接拼接在url后面

var ajax=new XMLHttpRequest();
ajax.open('get','/project/getProjectList.do?name=1&age=1');
ajax.send();

ajax.onreadystatechange=function(){
  if(ajax.readyState==4&&ajax.status==200|| ajax.status==304){
    console.log(ajax.responseText);
  }
}

post请求

post请求一般用于向服务器提交数据

var data={name:1,age:1};
var ajax=new XMLHttpRequest();

ajax.open('post','/project/getProjectList.do');
ajax.setReuqestHeader('Content-type','application/x-www-form-urlencoded');
ajax.send(JSON.stringify(data));

ajax.onreadystatechange=function(){
  if(ajax.readyState==4&&ajax.status==200|| ajax.status==304){
    console.log(ajax.responseText);
  }
}

一个封装的ajax请求

function ajaxMethod(method, url, data, sucess) {
  var ajax = new XMLHttpRequest();

  if (method === 'get') {
    if (data) {
      url += '?';
      url += data;
    }
    ajax.open(method, url);
    ajax.send();
  } else {
    ajax.open(method, url);
    ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    if (data) {
      ajax.send(data);
    }
    ajax.send();
  }
  ajax.onreadystatechange = function () {
    if (ajax.readyState === 4 && ajax.status === 200 || ajax.status===304) {
      sucess(ajax.responseText);
    }
  }
}