用ES6封装AJAX函数，支持GET/POST

wangdai 发布于2019-08-26 11:41 / 2924人阅读

function Ajax({
    type = "GET",
    url = "",
    async = true,
    params = {},
    responseType = "text",
    contentType = "application/x-www-form-urlencoded", //xhr.setRequestHeader("Content-Type",option.contentType); 
    done = () => {},
    fail = () => {}
}) {
    type = type.toUpperCase();
    params = formatParams(params);
    //创建xhr对象 step1
    const xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    xhr.responseType = responseType;    
    //接收 step3
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            const status = xhr.status;
            if (status >= 200 && status < 300) {
                done(response);
            } else {
                fail(status);
            }
        }
    }
    //发送 step2
    if (type === "GET") {
        xhr.open("GET", url + "?" + params, async);
        xhr.send(null);
    } else if (type === "POST") {
        xhr.open("POST", url, async);
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
}

function formatParams(params) {
    const arr = [];
    for (let name in params) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(params[name]));
    }
    arr.push(("_=" + Math.random()).replace(".", ""));
    return arr.join("&");
}

海外云主机服务器托管 get post 一个封装的Ajax类原生js封装ajax js ajax 请求数据封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107372.html

用Promise解决多个异步Ajax请求导致的代码嵌套问题

摘要：问题前端小同学在做页面的时候，犯了个常见的错误把多个请求顺序着写下来了，而后面的请求，对前面请求的返回结果，是有依赖的。经提醒，发现从版开始，返回的就是对象了，那么函数可以直接返回的返回值问题前端小同学在做页面的时候，犯了个常见的错误：把多个Ajax请求顺序着写下来了，而后面的请求，对前面请求的返回结果，是有依赖的。如下面的代码所示： var someData; $.ajax({ ...

DobbyKim 2019-08-20 14:35 评论0 收藏0
Ajax详解

摘要：当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等，请求发送前的回调函数，用来修改请求发送前，此功能可用来设置自定义头信息，在函数中返回将取消这个请求。例如，为请求指定一个回调函数名。即改变回调函数的，默认就是传入的整个对象。 Ajax Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客...

jokester 2019-08-23 14:15 评论0 收藏0
分别使用 XHR、jQuery 和 Fetch 实现 AJAX

摘要：本文详细讲述如何使用原生和来实现。使用可以无刷新地向服务端发送请求接收服务端响应，并更新页面。分别要用到的方法和方法。，，都是现在和未来解决异步的标准做法，可以完美搭配使用。这也是使用标准一大好处。本文详细讲述如何使用原生 JS、jQuery 和 Fetch 来实现 AJAX。 AJAX 即 Asynchronous JavaScript and XML，异步的 JavaScript...

Julylovin 2019-08-21 11:24 评论0 收藏0
AJAX的出现与跨域处理

摘要：属性是此次响应的文本内容。我们可以通过属性，指定这个事件的回调函数，对不同状态进行不同处理。尤其是当状态变为的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。由于临时的服务器维护或者过载，服务器当前无法处理请求。 XMLHttpRequest JSON AJAX CORS 四个名词来开会如何发请求在前端的世界里也逛荡了不少日子了，目前已经get到大约5种发起请求...

RancherLabs 2019-08-26 11:33 评论0 收藏0