使用原生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 相关文章推荐
jquery实现心算练习代码
Dec 06 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
js实现图片轮换效果代码
2013/04/16 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
JavaScript File分段上传
2016/03/10 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python生成密码库功能示例
2017/05/23 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
对python中dict和json的区别详解
2018/12/18 Python
简单了解python PEP的一些知识
2019/07/13 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
python中time包实例详解
2021/02/02 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
房地产销售计划书
2014/01/10 职场文书
家长给孩子的评语
2014/01/30 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
个人优缺点总结
2015/02/28 职场文书
小学总务工作总结
2015/08/13 职场文书
使用Python拟合函数曲线
2022/04/14 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技