自己封装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})