原生js实现ajax请求和JSONP跨域请求操作示例


Posted in Javascript onMarch 14, 2020

本文实例讲述了原生js实现ajax请求和JSONP跨域请求。分享给大家供大家参考,具体如下:

直接上代码:

const ajax = (params = {}) => {
 const nowJson = params.jsonp ? jsonp(params) : json(params);
 function jsonp(params){
  //创建script标签并加入到页面中
  var callbackName = params.jsonp;
  var head = document.getElementsByTagName('head')[0];
  // 设置传递给后台的回调参数名
  params.data['callback'] = callbackName;
  var data = formatParams(params.data);
  var script = document.createElement('script');
  head.appendChild(script);
 
  window[callbackName] = function(jsonData) {
   head.removeChild(script);
   clearTimeout(script.timer);
   window[callbackName] = null;
   params.success && params.success(jsonData);
  };
  //console.log(window[callbackName])
  //console.log(params.url + '?' + data)
 
  //url形式传参
  //说明:下面的script加载资源后会返回一个自执行函数:[callbackName](responseData),这个形式就是去执行一个函数,函数的名字是一个参数
  //      同时在windows对象上定义了这个函数:[callbackName] = function(responseData){},这时就会调用这个函数
  script.src = params.url + '?' + data;
 
  //为了得知此次请求是否成功,设置超时处理
  if(params.time) {
   script.timer = setTimeout(function() {
    window[callbackName] = null;
    head.removeChild(script);
    params.error && params.error({
     message: '超时'
    });
   }, params.time);
  }
 }
 //格式化参数
 function formatParams(data) {
  var arr = [];
  for(var name in data) {
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  };
 
  // 添加一个随机数,防止缓存
  arr.push('v=' + random());
  return arr.join('&');
 }
 
 // 获取随机数
 function random() {
  return Math.floor(Math.random() * 10000 + 500);
 }
 function json(params) {
  // 请求方式,默认是GET
  params.type = (params.type || 'GET').toUpperCase();
  // 避免有特殊字符,必须格式化传输数据
  params.data = formatParams(params.data);
  var xhr = null;
 
  // 实例化XMLHttpRequest对象
  if(window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
  } else {
   // IE6及其以下版本
   xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
  };
 
  // 监听事件,只要 readyState 的值变化,就会调用 readystatechange 事件
  xhr.onreadystatechange = function() {
   // readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
   if(xhr.readyState == 4) {
    var status = xhr.status;
    // status:响应的HTTP状态码,以2开头的都是成功
    if(status >= 200 && status < 300) {
     var response = '';
     // 判断接受数据的内容类型
     var type = xhr.getResponseHeader('Content-type');
     if(type.indexOf('xml') !== -1 && xhr.responseXML) {
      response = xhr.responseXML; //Document对象响应
     } else if(type === 'application/json') {
      response = JSON.parse(xhr.responseText); //JSON响应
     } else {
      response = xhr.responseText; //字符串响应
     };
     // 成功回调函数
     params.success && params.success(response);
    } else {
     params.error && params.error(status);
    }
   };
  };
 
  // 连接和传输数据
  if(params.type == 'GET') {
   // 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
   xhr.open(params.type, params.url + '?' + params.data, true);
   xhr.send(null);
  } else {
   xhr.open(params.type, params.url, true);
   //必须,设置提交时的内容类型
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
   // 传输数据
   xhr.send(params.data);
  }
 }
}
export default ajax;

调用:

ajax({
   jsonp:'JSONP',
   url:'http://localhost:8080/test',
   data:{},
   time:1000,
   success:function(data){
    console.log(data)
   },
   error:function(error){
    console.log(error)
   }
  })

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
js实现的订阅发布者模式简单示例
Mar 14 #Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 #Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 #Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 #Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 #Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 #Javascript
JS数组的高级使用方法示例小结
Mar 14 #Javascript
You might like
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
利用Python破解验证码实例详解
2016/12/08 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
QML实现钟表效果
2020/06/02 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python 在局部变量域中执行代码
2020/08/07 Python
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
大学军训自我鉴定
2013/12/15 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
《老山界》教学反思
2014/04/08 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
详解MySQL的内连接和外连接
2023/05/08 MySQL