ajax的深入理解及封装

概念

    AJAX： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

    AJAX 不是新的编程语言，而是一种使用现有标准的新方法，一种用于创建快速动态网页的技术

    AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

    AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行

工作原理

1. 创建一个XMLHttpRequest异步对象
2. 设置请求方式和请求地址
3. 用send()方法发送请求
4. 监听状态变化
5. 处理返回的数据
   

Ajax优点

1. 无需重载整个页面，按需请求部分数据，节约带宽，减少服务器压力。
2. 异步与服务器通信，不会打断用户操作，有些用户只需要首屏的搜索功能，就不必等到页面全部加载完成，提升浏览器渲染体验，用户会在server响应数据之前看到整个页面的大概框架以及结构。

Ajax缺点

1. 浏览器的收藏功能在某些情况使用不便（用户想收藏第二页数据时）。浏览器的后退功能在某些情况使用不便（用户退回第一页时）
2. AJAX相当于Browser和Server之间的一条通道，通过观察server的响应数据结构，在某些情况下回暴露出一些server的逻辑。黑客也可以模拟用户向Server发起请求，出现了诸如跨站点脚步攻击、SQL注入攻击等

Ajax封装

    get、post 请求方式放在一起封装，兼容IE5、IE6

function ajax(option) {
  // 创建一个 XMLHttpRequest 对象，兼容IE5、IE6
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
	  requestData = option.data,
	  requestUrl = option.url,
	  dataType = option.dataType || 'json',
	  requestMethod = (option.method).toUpperCase(); // 请求类型：get/post
  // 如果是GET请求，需要将option中的参数拼接到URL后面
  if ('POST' != requestMethod && requestData) {
    var query_string = '';
	// 遍历option.data对象，构建GET查询参数
	for (var item in requestData) {
	  query_string += item + '=' + requestData[item] + '&';
	}
	// 注意这儿拼接的时候，需要判断是否已经有 ?
	requestUrl.indexOf('?') > -1
	  ? requestUrl = requestUrl + '&' + query_string
	  : requestUrl = requestUrl + '?' + query_string;
	// GET 请求参数放在URL中，将requestData置为空
	requestData = null;
  }
  // ajax 请求成功之后的回调函数, onreadystatechange：请求状态改变的事件触发器
  xhr.onreadystatechange = function () {
    // readyState: 4 表示接受响应完毕，3 表示接收到部分数据，
    // 2表示已调用send()方法，尚未接受响应，1 表示已调用open()方法，尚未调用send()方法
    if (xhr.readyState == ("number" == typeof XMLHttpRequest.DONE ? XMLHttpRequest.DONE : 4)) {
      if (200 == xhr.status) { // 判断状态码
        var response = xhr.response || xhr.responseText || {}; // 获取返回值
        // if define success callback, call it, if response is string, convert it to json objcet
        console.log(response);
        // option.success && option.success(response); // 调用回调函数处理返回数据
        // 可以判断返回数据类型，对数据进行JSON解析或者XML解析
        option.success &&
        option.success('string' == typeof response ? JSON.parse(response) : response);
       } else {
         // if define error callback, call it
         // xhr.statusText：HTTP状态的说明
         option.fail && option.fail(xhr, xhr.statusText);
       }
    }
  };
  // 返回响应数据的类型
  xhr.responseType = dataType;
  // 发送ajax请求
  xhr.open(requestMethod, requestUrl, true);
  // 请求超时的回调
  xhr.ontimeout = function () {
      option.timeout && option.timeout(xhr, xhr.statusText);
      xhr.abort(); // 取消当前响应，关闭连接并且结束任何未决的网络活动
  };
  // 定义超时时间
  xhr.timeout = option.timeout || 0;
  // 设置响应头部，这儿默认设置为 json 格式，可以定义为其他格式，修改头部即可
  xhr.setRequestHeader && xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
  // 允许 ajax 跨域请求中携带 认证信息，包括 cookies、HTTP authentication schemes 等
  xhr.withCredentials = (option.xhrFields || {}).withCredentials;
  // 发送 HTTP 请求，只有POST方式才传参，参数类型为字符串，GET方式参数跟在 url 上
  xhr.send(requestData);
}

请求示例

ajax({ 
  type: 'post', 
  url: 'https://......', 
  dataType: 'json', 
  data: {
    id: 1,
    name: '小李',
    sex: '男'
　}, 
  success(res) { 
    console.log(res) 
  }, 
  fail(err){ 
    console.log(err) 
  } 
})