原生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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
javascript闭包的理解
2015/04/01 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
微信小程序云开发之使用云存储
2019/05/17 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python中的localtime()方法使用详解
2015/05/22 Python
基于Python List的赋值方法
2018/06/23 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python爬取天气数据的实例详解
2020/11/20 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
优秀教师事迹材料
2014/12/15 职场文书
数学教师个人工作总结
2015/02/06 职场文书
青岛导游词
2015/02/12 职场文书
教师个人自我评价
2015/03/04 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android