JS高级ajax封装

//1、浏览器适配
//2、传入参数:请求方式,请求接口地址,请求参数,请求成功,回调函数,请求失败的回调函数

function ajaxFun(method, url, data, successFun, failFun) {
    //1、根据浏览器的支持情况创建XMLHttpRequest对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    //2、判断请求方式的类型
    //把method转换为大写
    //toUppercase先把变量的字符串拷贝一份出来,然后针对拷贝的那一份进行修改为大写
    var upperMethod = method.toUpperCase();

    if(upperMethod == 'GET') {
        //请求为get请求时,配置请求参数,并发送请求
        xhr.open(upperMethod, url + '?' + data, true);
        xhr.send(null);
    } else if(upperMethod == 'POST') {
        //请求为post请求时,配置请求参数,并发送请求
        xhr.open(upperMethod, url, true);
        xhr.send(data);
    } else {
        //如果传出的请求方法并不是get或post,则弹出提示,并关闭函数的执行
        console.error('你的请求方式错了,必须是get或post的一种');
        return;
    }
    //监听服务器响应,根据服务器传回来的信息调用不同的回调函数
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            successFun(xhr.responseText);
        } else if(xhr.readyState == 4) {
            failFun('请求失败');
            //提式
            console.error(xhr.status);
        }
        //提示开发人员
        console.warn(xhr.readyState)
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,679评论 0 15
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,922评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,900评论 25 708
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,912评论 0 106
  • 今年大三了,对啊,我还没毕业,着什么急谈恋爱,找对象呢?可是,当我发现我的好朋友都有了稳定的对象时,才意识到这个问...
    lxy心跳呢阅读 244评论 0 0

友情链接更多精彩内容