Ajax补充

自己封装ajax函数

前面发送ajax请求的时候，总是要写大量重复的代码，用起来非常麻烦，为了简化ajax的使用，自己封装一个函数。

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。

/**
 * 发送一个 AJAX 请求
 * @param  {String}   url    请求地址
 * @param  {String}   method 请求方法
 * @param  {Object}   params 请求参数
 * @param  {Function} done   请求完成过后需要做的事情（委托/回调）
 */
function ajax (method, url, params, done) {
  // 统一转换为大写便于后续判断
  method = method.toUpperCase()

  // 对象形式的参数转换为 urlencoded 格式
  var queryArray = []
  for (var key in params) {
    queryArray.push(key + '=' + params[key])
  }
  var queryString = queryArray.join('&')

  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

  xhr.onload = function () {
      done(this.responseText);
  };

  // 如果是 GET 请求就设置 URL 地址 问号参数
  if (method === 'GET') {
    url += '?' + queryString
  }

  xhr.open(method, url)

  // 如果是 POST 请求就设置请求体
  var data = null
  if (method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    data = queryString
  }
  xhr.send(data)
}

// 测试
ajax('get', '/query-get', { id: 123 }, function (data) {
  console.log(data)
})

ajax('post', '/query-post', { foo: 'posted data' }, function (data) {
  console.log(data)
})

委托：将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

jQuery 中封装的 AJAX

jQuery 中有一套专门针对 AJAX 的封装，功能十分完善，经常使用，需要着重注意。

一个你会用我会用他会用到的点，就一定有一个已经封装好的

参考：

• http://www.jquery123.com/category/ajax/
• http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

$.ajax

$.ajax({
  url: '/time',
  type: 'get',
  dataType: 'json',
  data: { id: 1 },
  beforeSend: function (xhr) {
    console.log('before send')
  },
  success: function (data) {
    console.log(data)
  },
  error: function (xhr) {
    console.log(xhr)
  },
  complete: function (xhr) {
    console.log('request completed')
  }
})

常用选项参数介绍：

• cache: 设置ie浏览器的缓存问题， cache: false 不缓存
• url：请求地址
• type / method：请求方法，默认为 get
• dataType：预期服务端响应数据类型
• contentType：请求体内容类型，默认 application/x-www-form-urlencoded
• data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
• timeout：请求超时时间
• beforeSend：请求发起之前触发
• success：请求成功之后触发（响应状态码 200）
• error：请求失败触发
• complete：请求完成触发（不管成功与否）

jQuery封装的发送Ajax请求的快捷方法

GET 请求快捷方法

$.get(url, [data], [callback], [dataType])

$.get({settings})

POST 请求快捷方法

$.post(url, [data], [callback], [dataType])

$.post({settings})