// 封装的ajax网络请求函数
// obj 是一个对象
function AJAX(obj){

//跨域请求
        if (obj.dataType == "jsonp") {
            //在这里 callback 必须是全局变量 保证函数消失的时候 这个变量不可以被销毁

//处理一下函数名(防止多个网络请求 函数名字相同 出现紊乱的情况)
            var hehe = "callBack" + "_" + new Date().getTime() + "_" + String(Math.random()).replace(".","");
            window[hehe] = obj.success;
            //创建 script标签
            var sc = document.createElement("script");
            sc.src = obj.url + "?" + "cb=" + hehe;
            console.log(sc.src);
            document.body.appendChild(sc);
            document.body.removeChild(sc);
            return;
        }

//1、创建 ajax 对象
    var ajaxObj = null;
    if (window.XMLHttpRequest) {
        ajaxObj = new XMLHttpRequest();
    }else{
        ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
    }

//设置请求的类型
    obj.type = obj.type.toUpperCase() || "GET";

//如果是get请求 并且需要传递参数 则需要给 url 后面拼接参数
    if (obj.type == "GET") {
        var arr = [];//定义数组 用于把对象存储到数据里面
        for (var key in obj.data) {
            arr.push(key +"="+ obj.data[key]);
        }
        //用&分隔数组 让其转化为类似:name=lxl&age=18 的形式
        var str = arr.join("&");
        obj.url = obj.url +"?"+ str;
        //拨号
        ajaxObj.open(obj.type,obj.url,true);

//发送"name=123&age=18"
        ajaxObj.send();
    }else{
        var arr = [];//定义数组 用于把对象存储到数据里面
        for (var key in obj.data) {
            arr.push(key +"="+ obj.data[key]);
            //console.log(arr);
        }
        //用&分隔数组 让其转化为类似:name=lxl&age=18 的形式
        var str = arr.join("&");
        //console.log(str);
        ajaxObj.open(obj.type,obj.url,true);
        ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajaxObj.send(str);
    }

//监听
    ajaxObj.onreadystatechange = function(){

if (ajaxObj.readyState == 4) {
            if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
                //请求成功
                obj.success(ajaxObj.responseText);
            }else{
                //请求失败
                obj.error(ajaxObj.status);
            }
        }

}

}

关于ajax网络请求的封装的更多相关文章

  1. AFNetworking 2.5.x 网络请求的封装

    AFNetworking 2.5.x 网络请求的封装 源码地址 https://github.com/YouXianMing/Networking 说明 1. 将block形式的请求转换成用代理来处理 ...

  2. Swift3.0 Alamofire网络请求的封装(get,post,upload图片上传)转

    转自: http://blog.csdn.net/C_calary/article/details/53193747 学习Swift 试着动手写个天气小app,搜集资料这个封装还蛮好用的. 我用的第三 ...

  3. Angular网络请求的封装

    很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的.这里我来说说我自己的网络请求封装,某种意义上来说 ...

  4. Axios 网络请求组件封装 (鉴权、刷新、拦截)

    一.前言 注意:本教程需要你对axios有一定的了解,不适用于小白(只能借鉴,希望你能自己动手),注释都写的很清楚.此封装并非完整版,已进行部分删减修改操作,但仍然适用于大部分业务场景,如果不适用于你 ...

  5. IOS开发之—— 在AFN基础上进行的网络请求的封装

    网络请求的思路:如果请求成功的话AFN的responseObject就是解析好的. 1发送网络请求:get/post/或者别的 带上URL,需要传的参数 2判断后台网络状态码有没有请求成功: 3 请求 ...

  6. iOS-在AFN基础上进行网络请求的封装

    网络请求的思路:如果请求成功的话AFN的responseObject就是解析好的. 1发送网络请求:get/post/或者别的 带上URL,需要传的参数 2判断后台网络状态码有没有请求成功: 3 请求 ...

  7. 对小程序的网络请求的封装 wx.request 接收参数修改

    wepy-mall/wxRequest.js at master · dyq086/wepy-mall https://github.com/dyq086/wepy-mall/blob/master/ ...

  8. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

  9. andriod开发,简单的封装网络请求并监听返回.

    一.为什么封装 因为android 4.0 以后的发送网络请求必须要放到异步线程中,而异步线程必须跟handle合作才能更新主线程中的UI,所以建议用一个类继承handler来异步处理网络请求. 二. ...

随机推荐

  1. PHP SimpleXML

    安装 SimpleXML 扩展需要 PHP 5 支持. 自 PHP 5 起,SimpleXML 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP 5 SimpleXML 函数 函数 ...

  2. 手动安装svn到eclipse

    今天为了装个svn搞得我焦头烂额~ 1.下载site-1.10.10.zip.(http://download.csdn.net/download/codepython/9082533) 2.在ecl ...

  3. a标签增加onclick事件提示未定义function

    项目使用的是ext框架,版本是ext4.2 出现的问题代码如下: renderer : function(value){ var html = "<a href=\"java ...

  4. [转]C++堆和栈的区别

    一.预备知识―程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)― 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. ...

  5. Nuc900 bsp turbowriter使用注意点

    Nuc900 bsp turbowriter使用注意点 一. Nor flash 用turbo 烧写kernel和文件系统时的注意点: 1. kernel的image No要大于rootfs 2.烧写 ...

  6. CentOS 7 之安装Mono&MonoDevelop

    之前在园子里看过一篇文章说的是在CentOS 7上安装MonoDevelop的,一直想照着弄一遍都没有弄,今天深圳外面下暴雨,就在家里弄一下这个吧,以后也试着在Linux上面写写C#玩玩.这一试,还真 ...

  7. thinkphp M 和模板用法

    <?phpnamespace Home\Controller;use Think\Controller;class IndexController extends Controller { pu ...

  8. 查看文件系统类型的Linux命令

    不需挂载就能查看的命令:   1. file  [root@localhost dev]# file -s /dev/sda1 /dev/sda1: Linux rev 1.0 ext4 filesy ...

  9. [POJ] 2226 Muddy Fields(二分图最小点覆盖)

    题目地址:http://poj.org/problem?id=2226 二分图的题目关键在于建图.因为“*”的地方只有两种木板覆盖方式:水平或竖直,所以运用这种方式进行二分.首先按行排列,算出每个&q ...

  10. uva 10007 Count the Trees

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...