关于post和get函数封装的详细分析

在异步请求中，如果想要获取到异步结果，在异步请求结束的地方调用回调函数并且将异步请求结果作为实参传入
// 那么我们在调用回调函数时，就可以去写上去回调函数 的函数体，函数中的形参，就是在我们声明GET时传入的xhr.responText

//封装get函数
function get(url,callback){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
      callback && callback(xhr.responseText);
    }
  }
  xhr.open('GET',url,true);
  xhr.send();
}
get('url',function(data){
  // data是形参传入的实参是xhr.responseText
})

//封装post函数

//首先封装一个能够将对象转化为字符串的函数给下面的post使用
function serialize(params){
  var arr = [];
  for(var key in params){
    arr.push(key + "=" + params[key]);
  }
  return arr.join('&');
}
//封装post函数
function post(url,params,callback){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
      callback && callback(xhr.responseText)
    }
  }

  xhr.open('POST',url,true);
  //这里不要忘记设置请求头
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  //这里要对send发送的参数params进行判断
  // if(typeof params === 'string'){
  //   var data = params;
  // }else{
  //   data = serialize(params);
  // }
  // xhr.send(data);
  // }
  //或者用三元运算符
  send(typeof params === 'string' ? params:serialize(params)); 
  // 有些接口为了安全，会将一些参数放在header中进行传递
  // Header
  //   a:1

  // xhr.setRequestHeader('a','1');
  总结：经过对上面函数的封装我们发现get和post虽然有一些不同之处但是还是有相同的地方的
  不同点：首先post请求要设置请求头，而且post请求send中要发送数据必须是字符串形式的一个
  或多个参数因为用户传参的形式是多种多样的那么这时候有涉及到参数形式的判断和转化，
  而且post请求中send里面第一个参数不同，post的是'POST'get请求是'GET';
  相同点：虽然我们发现这两个请求有那么多的不同点但是我们也发现他们两个也有很多相同点，
  因为他们都要请求数据所以免不了要与服务器进行交互所以都要声明一个函数那就是构造函数 xhr = new XMLHttpRequest() 
  目的是为了继承XHRHTTPrequest函数的能与服务器交互的特性所以为了方便我们可以把他们两个封装成一个函数方便我们使用时调用。
  因为使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。
  这使得Web页面可以只更新页面的局部，而不影响用户的操作。XMLHttpRequest在 Ajax 编程中被大量使用。
  尽管名称如此，XMLHttpRequest可以用于获取任何类型的数据，而不仅仅是XML，它还支持   HTTP以外的协议(包括文件和ftp)。
  以上是我学习中的终结欢迎大家的指教，我们相互学习互相进步！