原生ajax封装

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

原生ajax状态码readState

// --> xhr.readState 代表当前ajax处理的进度
/*
0 UNSENT 刚创建XHR, 当前的请求还没有发送
1 OPENED 已经执行OPEN操作 URL地址已经打开 发送前的参数配置已经完成
2 HEADERS_RECEIVED 已经发送ajax请求, 响应头信息已经被客户端接收
3 LOADING 响应主体内容正在返回
4 DONE 响应的主体内容已经成功返回到客户端
*/

原生ajax封装及使用

var $ = {
  //将对象转换成字符串 用于拼接参数
  params: function(obj) {
    var str = ""
    for (var key in obj) {
      str += key + "=" + obj[key] + "&"
    }
    //组装的字符串多了一个&,截取之后返回一个新的字符串
    str = str.substr(0, str.length - 1)
    //username=zhangsan&age=11&sex=nan
    return str
  },
  ajax: function(obj) {
    //1:创建对象
    var xhr = new XMLHttpRequest();
    //将 对象={username:"zhangsan",age:11,sex:"nan"}  转换成 字符串的格式  username=zhangsan&age=11&sex=nan
    if (obj.beforeSend) {
      //因为用户在调用的时候，可能没有传递,所以需要进行判断.
      var flag = obj.beforeSend()
      if (flag == false) {
        return
      }
    }
    //对obj.data 的类型进行判断，如果是对象类型，我才去进行处理.
    if (typeof obj.data == "object") {
      obj.data = this.params(obj.data)
    }
    //2:打开对象
    //注意：如果是get 方式提交，参数在地址的后面
    if (obj.type.toLowerCase() == "get") {
      obj.url = obj.url + "?" + obj.data
      obj.data = null
    }
    xhr.open(obj.type, obj.url)
    //注意：处理post 我们需要给一个请求头
    if (obj.type.toLowerCase() == "post") {
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    //3:发送数据
    xhr.send(obj.data)
    //4:接收数据
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        //响应完成
        if (xhr.status == 200) {
          //响应成功
          var data = xhr.responseText
          obj.success(data)
        } else {
          obj.error && obj.error()
        }
        obj.complete && obj.complete()
      }
    }
  }
};
$.ajax({
  url:"../ajax.php",
  type:"POST",
  data:{
    username:"zhangsan",
    age:11,
    sex:"nan"
  },
  //设置一个过滤器,这个也是一个回调函数. 请求发送之前调用.
  beforeSend:function(){
    console.log("请求发送之前调用")
    //我们可以在这里去对发送到服务器的数据进行一些校验，正则校验
    //如果验证不通过，就不发送请求了
    return true
  },
  //这个是一个回调函数，数据响应成功的时候调用
  success:function(info){
    console.log(info)
    console.log("数据响应成功调用")
  },
  //请求完成的时候调用. 我是想给用户一些提示.不管成功还是失败
  complete:function(){
    console.log("请求完成的时候去调用")
  },
  //请求出错的时候调用
  error:function(err){
    console.log(err)
    console.log("请求出错的时候调用")
  }
});