使用原生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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
实例浅析js的this
Dec 11 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
js闭包的9个使用场景
Dec 29 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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版)
2006/10/09 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
JS动画效果代码3
2008/04/03 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JS中数组重排序方法
2016/11/11 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
运动会领导邀请函
2014/01/10 职场文书
秸秆管理实施方案
2014/03/15 职场文书
大学学风建设方案
2014/05/04 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
信用卡工资证明范本
2014/10/17 职场文书
前台岗位职责范本
2015/04/16 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python