// 封装的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. DropdownList控件绑定数据源显示system.data.datarowview的问题

    .net开发的时候经常需要用到在后台取数据再绑定到控件的问题,通常只需要连接数据库,从数据库取出数据,放到Dataset里面,然后再设置控件的DataSource为这个Dataset,然后再datab ...

  2. 微信php接入设计案列

    <?php namespace Home\Controller; use Think\Controller; use Com\Wechat; use Com\WechatAuth; class ...

  3. jQuery--jqChart折线图使用eval处理返回数据无效的解决方法

    jquery初学者 查了很多帖子,jqchart插件做折线图时,处理返回数据时全都是eval,但我怎么也弄不出来,后来发现: 1.根本不需要eval处理,直接截取字符串即可(返回值要拼接好): 2.处 ...

  4. Web 端 js 导出csv文件(使用a标签)

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  5. jquery validation插件使用

    首先需要引入jQuery.js和jquery.validate.js 以下面代码为例: <form id="mainform"> <fieldset> &l ...

  6. ECSTORE AJAX提交的实现

    今天向大家介绍在ecstore中怎样使用ajax提交数据 1 <script> //JAVASCRIPT代码 $$(".BB").ADDEVENT('CHANGE',F ...

  7. 利用mongoimport命令导入csv大文件

    最近我同事做了一个PHP项目,其中有一个功能是 上传excel文件并将数据导入mongodb某个集合中. 通常的做法是 写一个上传文件的页面,然后后端 读取 这个文件,利用phpexcel类库将这个e ...

  8. hdu 4541 Ten Googol

    http://acm.hdu.edu.cn/showproblem.php?pid=4541 打表找规律 #include <cstdio> #include <cstring> ...

  9. Xamarin.Forms-webservices访问

    虽然xamarin.android/ios 均支持右键添加web引用方式引用webservices,但是xamarin.forms不支持此方式,而如果android/ios各做一套采用抽象方式实现则工 ...

  10. 解密随机数生成器(二)——从java源码看线性同余算法

    Random Java中的Random类生成的是伪随机数,使用的是48-bit的种子,然后调用一个linear congruential formula线性同余方程(Donald Knuth的编程艺术 ...