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

 更新时间:2017年10月12日 09:56:17   作者:mapbar_front  
下面小编就为大家带来一篇使用原生js封装的ajax实例(兼容jsonp)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

实例如下:

/* 封装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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 网页禁用右键菜单和鼠标拖动选择方法小结

    网页禁用右键菜单和鼠标拖动选择方法小结

    本文主要给大家总结了一下在网页中禁用鼠标右键和鼠标拖动选择的几种常用的方法,十分的实用,有需要的小伙伴参考下。
    2015-02-02
  • 判断可拖动div是否重合 重合多少

    判断可拖动div是否重合 重合多少

    效率较低 该如何优化了
    2010-08-08
  • JS循环遍历ul中li的点击事件给选中li添加css样式(示例代码)

    JS循环遍历ul中li的点击事件给选中li添加css样式(示例代码)

    对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色;同时改变对应的另一个ul中li的颜色,怎么实现这个功能呢,下面小编给大家带来了js循环遍历ul中li的点击事件,给给选中li添加css样式,感兴趣的朋友一起看看吧
    2023-07-07
  • JavaScript实现的多种鼠标拖放效果

    JavaScript实现的多种鼠标拖放效果

    这篇文章主要介绍了JavaScript实现的多种鼠标拖放效果,涉及JavaScript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • JavaScript对象数组的排序处理方法

    JavaScript对象数组的排序处理方法

    这篇文章主要介绍了JavaScript对象数组的排序处理方法,以实例形式分析了JavaScript对象数组的排序原理与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法

    PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法

    这篇文章主要介绍了PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法,造成这个问题的原因是PHP上传大小限制为2MB,修改PHP.ini配置即可解决这问题,需要的朋友可以参考下
    2015-03-03
  • 一文详解如何清除手机上小程序缓存

    一文详解如何清除手机上小程序缓存

    大家在使用微信小程序的时候会有缓存,虽然小程序的缓存数值相比APP要少的多,下面这篇文章主要给大家介绍了关于如何清除手机上小程序缓存的相关资料,需要的朋友可以参考下
    2022-08-08
  • javascript函数的call、apply和bind的原理及作用详解

    javascript函数的call、apply和bind的原理及作用详解

    javascript函数的call、apply和bind 本质是用来实现继承的,专业点说法就是改变函数体内部this的指向,当一个对象没有某个功能时,就可以用这3个来从有相关功能的对象里借用过来,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 一文带你深入了解JavaScript中的原型&原型链

    一文带你深入了解JavaScript中的原型&原型链

    相信不少同学在面试的时候经常在基础上就挂掉了,当下行情实属严峻,如果我们基础都没有打牢固的话,实属有点面试浪费机会。本文就来和大家聊聊JavaScript中的原型&原型链,希望对大家有所帮助
    2023-02-02
  • js拖动div 当鼠标移动时整个div也相应的移动

    js拖动div 当鼠标移动时整个div也相应的移动

    要拖动的div为最外层的div,这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动,具体的实现如下,感兴趣的朋友可以参考下
    2013-11-11

最新评论