原生JS发送异步数据请求

在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式，一种是AJAX，另一个是JSONP。通过原生JS对异步请求进行简单的封装。

AJAX

　　AJAX是一种数据请求方式，不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对象，主要请求过程如下：

　　不说话直接贴代码

/*** 通过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及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveXObject对象实现的。

　　通过xhr的open函数来连接服务器，主要接收三个参数：请求方式、请求地址和是否异步请求（一般都是异步请求）。请求方式有两种，GET和POST，GET是通过URL将数据提交到服务器的，POST则是通过将数据作为send方法的参数发送到服务器。

　　给xhr绑定状态改变函数onreadystatechange，主要用来检测xhr的readyState的变化，当异步发送成功后，readyState的数值会由0变成4，同时触发onreadystatechange事件。readyState的属性及对应状态如下：