使用原生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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
React实现评论的添加和删除
Oct 20 Javascript
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异常处理技术,顶级异常处理器
2012/06/13 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
详解React 在服务端渲染的实现
2017/11/16 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django开发中的日志输出的方法
2018/07/02 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python实现代码块儿折叠
2020/04/15 Python
python的help函数如何使用
2020/06/11 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
学校门卫工作职责
2013/12/07 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
购房意向书
2014/08/30 职场文书
与美同行演讲稿
2014/09/13 职场文书
客户答谢会致辞
2015/01/20 职场文书
导游词开场白
2015/01/31 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
宇宙与人观后感
2015/06/05 职场文书