使用原生js封装的ajax实例(兼容jsonp)


Posted in Javascript onOctober 12, 2017

实例如下:

/* 封装ajax函数
 * @param {string}opt.type http连接的方式,包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
 * @param {object}opt.data 发送的参数,格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
  function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {};
    opt.dataType = opt.dataType || "json";
    var xmlHttp = null;
    if (XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    else {
      xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }var params = [];
    for (var key in opt.data){
      params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
      xmlHttp.open(opt.method, opt.url, opt.async);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
      xmlHttp.send(postData);
    }
    else if (opt.method.toUpperCase() === 'GET') {
      xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
      xmlHttp.send(null);
    } 
    xmlHttp.onreadystatechange = function () {
      if(opt.dataType != 'jsonp'){
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          opt.success(xmlHttp.responseText);
        }
      }else{
        //alert(1); 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          var oScript = document.createElement('script');
          document.body.appendChild(oScript);

          var callbackname = 'wangxiao'
          oScript.src = opt.url + "?" + postData+'&callback='+callbackname;

          window['wangxiao'] = function(data) {
            opt.success(data);
            document.body.removeChild(oScript);
          };
        }


      }

    };
  }
  export default ajax;

以上这篇使用原生js封装的ajax实例(兼容jsonp)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 #Javascript
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
基于es6三点运算符的使用方法(实例讲解)
Oct 12 #Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 #Javascript
原生JS封装animate运动框架的实例
Oct 12 #Javascript
javascript中神奇的 Date对象小结
Oct 12 #Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 #Javascript
You might like
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Django视图和URL配置详解
2018/01/31 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python爬取网易云音乐评论
2018/11/16 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
.NET概念性的面试题
2012/02/29 面试题
事业单位辞职信范文
2014/01/19 职场文书
生日主持词
2014/03/20 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
委托公证书
2014/04/08 职场文书
授权委托书协议书
2014/10/16 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android