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

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

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

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

　　在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加入了随机数，所以不会从缓存中取值，故该状态不需判断。

JSONP

　　如果还是用上面的XMLHttpRequest对象来发送需要跨域的请求，虽然调用了send函数，但是xhr的状态一直都是0，也不会触发onreadystatechange事件，这个时候就要用到JSONP的请求方式了。

　　JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。

　　JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。

　　比如网页端创建一个script标签，并给其src赋值为http://www.test.com/json/?callback=process， 此时网页端就发起一个请求。服务端将要返回的数据拼作为函数的参数传入，服务端返回的数据格式类似”process({‘name:'xieyufei'})”，网页端接收到了响应值，因为请求者是 script，所以相当于直接调用process方法，并且传入了一个参数。

　　不说话直接贴代码。

/**
* 通过JSONP的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxJSONP(params) {
 params.data = params.data || {};
 params.jsonp = params.jsonp || 'callback';
 // 设置传递给后台的回调参数名和参数值
 var callbackName = 'jsonp_' + (new Date()).getTime();
 params.data[params.jsonp] = callbackName;
 var formatedParams = this.formateParams(params.data, params.cache);
 //创建script标签并插入到页面中
 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 head.appendChild(script);
 //创建jsonp回调函数 
 window[callbackName] = function(json) {
  head.removeChild(script);
  clearTimeout(script.timer);
  window[callbackName] = null;
  params.success && params.success(json);
 };
 //发送请求 
 script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url);
 //为了得知此次请求是否成功，设置超时处理
 if (params.time) {
  script.timer = setTimeout(function() {
   window[callbackName] = null;
   head.removeChild(script);
   params.error && params.error({
    message: '超时'
   });
  }, params.time);
 }
}

　　给script标签设置src属性时浏览器就会去发送请求，但是只能发送一次请求，导致script标签不能复用，因此每次操作完都需要把script标签移除。在浏览器发送请求之前给全局绑定一个回调函数，当数据请求成功时就会调用这个回调函数。

总结

　　将两种发送异步数据的方式整合起来，根据dataType来进行判断选用哪种方式。贴上完整的代码

var xyfAjax = {
 ajax: function(params) {
  params = params || {};
  params.cache = params.cache || false;
  if (!params.url) {
   throw new Error('参数不合法');
  }
  params.dataType = (params.dataType || 'json').toLowerCase();
  if (params.dataType == 'jsonp') {
   this.ajaxJSONP(params);
  } else if (params.dataType == 'json') {
   this.ajaxJSON(params);
  }
 },
 /**
 * 通过JSONP的方式请求
 * @param {[type]} params [description]
 * @return {[type]}  [description]
 */
 ajaxJSONP(params) {
  params.data = params.data || {};
  params.jsonp = params.jsonp || 'callback';
  // 设置传递给后台的回调参数名和参数值
  var callbackName = 'jsonp_' + (new Date()).getTime();
  params.data[params.jsonp] = callbackName;
  var formatedParams = this.formateParams(params.data, params.cache);
  //创建script标签并插入到页面中
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  head.appendChild(script);
  //创建jsonp回调函数 
  window[callbackName] = function(json) {
   head.removeChild(script);
   clearTimeout(script.timer);
   window[callbackName] = null;
   params.success && params.success(json);
  };
  //发送请求 
  script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url);
  //为了得知此次请求是否成功，设置超时处理
  if (params.time) {
   script.timer = setTimeout(function() {
    window[callbackName] = null;
    head.removeChild(script);
    params.error && params.error({
     message: '超时'
    });
   }, params.time);
  }
 },
 /**
 * 通过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(null);
  } 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('&');
 }
}
xyfAjax.ajax({
 url:'http://www.xieyufei.com',
 type:'get', //or post
 dataType:'json', //or jsonp
 data:{
  name:'xyf'
 },
 success: function(data){
  console.log(data)
 }
})

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

# js发送异步数据请求  # js异步数据请求  # js发送异步数据  # Node.js模拟发起http请求从异步转同步的5种用法  # 原生JavaScript实现Ajax异步请求  # JavaScript利用fetch实现异步请求的方法实例  # 详解Vuejs2.0之异步跨域请求  # SpringMVC环境下实现的Ajax异步请求JSON格式数据  # angularjs 处理多个异步请求方法汇总  # jquery的ajax异步请求接收返回json数据实例  # JS多个异步请求 按顺序执行next实现解析  # 回调  # 都是  # 是一种  # 这个时候  # 有两种  # 不说话  # 绑定  # 服务端  # 随机数  # 不需要  # 是由  # 则是  # 两种  # 可以通过  # 可以直接  # 时就  # 发送到  # 不需  # 会去  # 哪种 

相关文章： 建站VPS推荐：2025年高性能服务器配置指南  c# 在ASP.NET Core中管理和取消后台任务  seo网站制作优化,网站SEO优化步骤有哪些？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  c# 在高并发下使用反射发射（Reflection.Emit）的性能  建站主机默认首页配置指南：核心功能与访问路径优化  建站之星安装步骤有哪些常见问题？  高防服务器租用首荐平台，企业级优惠套餐快速部署  Swift中switch语句区间和元组模式匹配  Java解压缩zip - 解压缩多个文件或文件夹实例  建站之星导航配置指南：自助建站与SEO优化全解析  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  实现虚拟支付需哪些建站技术支撑？  如何用景安虚拟主机手机版绑定域名建站？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  大连网站设计制作招聘信息,大连投诉网站有哪些？  建站之星价格显示格式升级，你的预算足够吗？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  黑客如何利用漏洞与弱口令入侵网站服务器？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  安云自助建站系统如何快速提升SEO排名？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  免费ppt制作网站,有没有值得推荐的免费PPT网站？  如何用已有域名快速搭建网站？  SQL查询语句优化的实用方法总结  微信推文制作网站有哪些,怎么做微信推文，急？  如何获取PHP WAP自助建站系统源码？  ,想在网上投简历，哪几个网站比较好？  想学网站制作怎么学,建立一个网站要花费多少？  如何在阿里云香港服务器快速搭建网站？  建站10G流量真的够用吗？如何应对访问高峰？  如何通过VPS建站无需域名直接访问？  装修招标网站设计制作流程,装修招标流程？  已有域名和空间如何搭建网站？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  潮流网站制作头像软件下载,适合母子的网名有哪些？  网站制作软件有哪些,制图软件有哪些？  如何快速搭建个人网站并优化SEO？  网站制作公司排行榜,四大门户网站排名？  如何快速搭建自助建站会员专属系统？  建站之星下载版如何获取与安装？  宝塔新建站点为何无法访问？如何排查？  javascript基本数据类型及类型检测常用方法小结  北京的网站制作公司有哪些,哪个视频网站最好？  建站之星伪静态规则如何正确配置？  如何通过虚拟机搭建网站？详细步骤解析  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  C#如何在一个XML文件中查找并替换文本内容  招贴海报怎么做,什么是海报招贴？  如何基于云服务器快速搭建个人网站？