在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生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-', type:'get', //or post dataType:'json', //or jsonp data:{ name:'xyf' }, success: function(data){ console.log(data) }})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。