Ajax-封装-及注意要点

废话不多说，直接上代码

function ajax(options){
     options = options || {}
  options.type = (options.type || 'GET').toUpperCase()
  // 创建 XMLRequesHttp对象
  var xhr 
  if(window.XMLHttpRequest){
       xhr = new XMlHttpRequest()
  }else{   //IE7 及以下IE
   xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }
  // 定义成功或者失败的回调函数
  xhr.onreadystatechange = function(){
      if(xhr.readyState = 4){
         var status = xhr.status
      if(status >=200 && status < 300){
           options.success&&options.success(xhr.responseText,xhr.responseXML) 
      }else{
        options.fail && options.fail(status)
      }
    }
  }
  // 分别定义请求的事件
  if(options.type === 'GET'){
        xhr.open("GET",options.url+'?'+getParmas(options.parmas))
    xhr.sed(null)
  }else if(options.type === 'POST'){
       xhr.setRequestHeader('content-type',"application/x-www-form-urlencoded") 
    xhr.open("POST",options.url)
    xhr.send(options.parmas)
  }
}
// 参数转化函数
function getParmas(data){
    var param = [],
      str = "";
    for(var k in data){
        param.push(`${k}=${data[k]}`)
  }
  str = param.join('&")
  str += 'randomNumber'+'='+Math.random().tofixed(10).replace('.')   // 去除小数点并添加随机数
  return str;
}

知识点

XMLRequestHttp各个浏览器支持情况

IE7+,Firefox,Opera,Chrome和Safari支持原生XMLRequestHttp

onreadystatechange运行

下面的代码中onreadystatechange中会直接使用XHR，这样的处理方式是DOM0级方法为XHR对象添加了事件处理程序，原因是并不是所有的浏览器都辉支持DOM2级方法，所以有的浏览器内部处理此事件时，可能不会向其传递event事件对象，那么为了所有平台都兼容，最好的处理方式就是使用XHR对象本身来确定下一步应该会怎么做。注意：此方法建议在open之前调用

readyState几种状态的讲解

0: 未初始化，尚未调用open方法；
1: 启动，已经调用open方法，但未调用send方法；
2: 发送 已经调用send方法，但尚未接到服务端相应；
3: 接收，但是只接收了部分响应；
4: 完成，已经接收了全部响应数据，二期已经可以在客户端使用了

state几种状态值的讲解

200 一般指的请求成功

300——请求重定向

400——资源未找到或未授权

500——服务器内部错误

open方法的讲解

接受3个参数
第一个是请求类型get或者post；
第二个是url；
第三个表示是否异步。另外需要说明两点：意识URL相对于执行代码的当前页面（可以使用绝对路 径）；而是open方法并不会真正发送请求。

send方法的讲解

send方法只接受一个参数，
作为请求主体发送的数据，如果不需要通过请求主体（即post），则必须传入null，这个参数对于浏览器是必须的。调用send后，请求会发送到服务器上进行处理。