原生原生JS发送异步数据请求发送异步数据请求
在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生JS进行异步数据请
求。这时候无非有两种请求方式,一种是AJAX,另一个是JSONP。通过原生JS对异步请求进行简单的封装。
AJAX
AJAX是一种数据请求方式,不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对
象,主要请求过程如下:
创建XMLHttpRequest对象(new)
连接服务器(open)
发送请求(send)
接收响应数据(onreadystatechange)
不说话直接贴代码
/**
* 通过JSON的方式请求
* @param {[type]} params [description] * @return {[type]} [description] */
ajaxJSON(params) {
params.type = (params.type || 'GET').toUpperCase();
params.data = params.data || {};
var formatedParams = this.formateParams(params.data, params.cache);
var xhr;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//非IE6
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步状态发生改变,接收响应数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (!!params.success) {
if (typeof xhr.responseText == 'string') {
params.success(JSON.parse(xhr.responseText));
} else {
params.success(xhr.responseText);
}
}
} else {
params.error && params.error(status);
}
}
if (params.type == 'GET') {
//连接服务器
xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true);
//发送请求
xhr.send();
} else {
//连接服务器
xhr.open('POST', params.url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send(formatedParams);
}
},
/**
* 格式化数据
* @param {Obj} data 需要格式化的数据
* @param {Boolean} isCache 是否加入随机参数
* @return {String} 返回的字符串
*/
formateParams: function(data, isCache) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
if (isCache) {
arr.push('v=' + (new Date()).getTime());
}
return arr.join('&');
}
IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用:var oAjax = new XMLHttpRequest();。IE6及其之前的版本
评论10