了解Ajax

AJAX (Asynchronous JavaScript and XML),是一种用于创建快速动态网页的技术;通过在后台与服务器进行少量数据交换，使网页实现异步更新。

一、背景和目的（传统网站中存在的问题）

• 网速慢的情况下，页面加载时间长，用户只能等待；
• 表单提交后，如果一项内容不合格，需要重新填写所有表单；
• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

二、应用场景

• 页面上拉加载更多数据；
• 列表数据无刷新验证；
• 表单项焦点数据验证；
• 索框提示文字下拉列表。

三、原生js Ajax请求的5个步骤

//1、创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//2、规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//（3、发送信息至服务器时内容编码类型）
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//4、发送请求
ajax.send(null);  
//5、接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
};

四、Ajax的封装

function ajax(options) {
  // 默认值
  var defaults = {
    type: 'get',
    url: '',
    async: true,
    data: {},
    requestHeader: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: function() {},
    error: function() {},
  };
  //对象覆盖
  Object.assign(defaults, options);
  
  var xhr = new XMLHttpRequest();
  //拼接参数字符串
  var params = '';
  for(var attr in defaults.date) {
    params += attr + '=' + defaults.date[attr] + '&';
  }
  params = params.substr(0, params.length - 1);
  // console.log(params);

  // 当 GET类型请求时
  if(defaults.type == 'get') {
    var getUrl = defaults.url + '?' + params;
    // console.log(getUrl);
    xhr.open(defaults.type, getUrl, defaults.async);
  }else{
    xhr.open(defaults.type, defaults.url, defaults.async);
  }

  //当Post类型请求时
  if(defaults.type == 'post'){
    var requestHeader= defaults.requestHeader['Content-Type'];
    // console.log(requestHeader);
    xhr.setRequestHeader('Content-Type', requestHeader);
    
    //判断发送至服务器信息的编码格式
    if(requestHeader == 'application/json'){
      xhr.send(JSON.stringify(defaults.date));
    }else{
      xhr.send(params);
    }
  }else{
    xhr.send();
  }

  //服务器响应
  xhr.onload = function() {
    //将服务器响应回来的string转换为JSON对象
    var resContenType = xhr.getResponseHeader('Content-Type');
    var resText = xhr.responseText;
    if(resContenType.includes('application/json')){
      resText = JSON.parse(resText);
    }
    // console.log(resText);

    if(xhr.status == 200 ){
      defaults.success(resText, xhr);
    }else{
      defaults.error(resText, xhr);
    }
  }
}

//调用function ajax()方法
ajax({
  type: 'post',
  url: 'http://localhost:800/package',
  // async: true,
  // requestHeader: {
  //   'Content-Type': 'application/json',
  // },
  date: {
    type: 'POST',
    name: 'XiaoMing',
    age: 18,
    sex: 'Man'
  },
  success: function(date) {
    // console.log(date);
  },
  error: function(date, xhr) {
    console.log('这是date:' + date);
    console.log('这是xhr:' + xhr);
  }
});

五、Ajax状态码

0：请求未初始化（还没有调用open()）；
1：请求已建立，但是还没有发送（还没有调用send()）；
2：请求已经发送；
3：请求正在处理中，通常响应中已经有部分数据可以用；
4：响应已经完成，可以获取并使用服务器的响应了。

六、Ajax错误处理

1、网络畅通，服务器能接收到请求，服务端返回的结果不是预期结果；
可以判断服务器响应回来的状态码，分别进行处理，xhr.status获取http状态码。

2、网络畅通，服务器没有接收到请求，返回404状态码；
检查请求地址是否错误。

3、网络畅通，服务器能接收到请求，服务端返回500状态码；
服务端错误，找后端的伙伴回来加班。

4、网络中断，请求无法发送到服务器；
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。