原生js实现ajax及get post方法

pkhope 发布于2019-08-26 13:54 / 430人阅读

摘要：使用过的同学，应该对事件绑定方法有一定的了解。实现方式以下为个人类库中实现方式。代码中使用到一个基础方法对象，该对象为的基础类。如果想了解更多，可以通过点击进入查看原码。

使用过jQuery的同学，应该对事件绑定方法ajax有一定的了解。 在个人类库jTool 中实现了这个方法，这里就来细说下原生实现方式。

实现方式

以下为个人类库jTool 中 Ajax 实现方式。
代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。 如果想了解更多，可以通过点击进入查看原码。

/*
 * ajax
 * type === GET: data格式 name=baukh&age=29
 * type === POST: data格式 { name: "baukh", age:29 }
 * 与 jquery 不同的是,[success, error, complete]返回的第二个参数, 并不是返回错误信息, 而是错误码
 * */
var extend = require("./extend");
var utilities = require("./utilities");
function ajax(options) {
    var defaults = {
        url: null,// 请求地址
        type: "GET",// 请求类型
        data: null,// 传递数据
        headers: {},// 请求头信息
        async: true,// 是否异步执行
        beforeSend: utilities.noop,// 请求发送前执行事件
        complete: utilities.noop,// 请求发送后执行事件
        success: utilities.noop,// 请求成功后执行事件
        error: utilities.noop// 请求失败后执行事件
    };
    options = extend(defaults, options);
    if (!options.url) {
        utilities.error("jTool ajax: url不能为空");
        return;
    }
    var xhr = new XMLHttpRequest();
    var formData = "";
    if (utilities.type(options.data) === "object") {
        utilities.each(options.data, function (key, value) {
        if(formData !== "") {
            formData += "&";
        }
        formData += key + "=" + value;
        });
    }else {
        formData = options.data;
    }
    if(options.type === "GET" && formData) {
        options.url = options.url + (options.url.indexOf("?") === -1 ?  "?" : "&") + formData;
        formData = null;
    }
    xhr.open(options.type, options.url, options.async);
    for (var key in options.headers) {
        xhr.setRequestHeader(key, options.headers[key]);
    }
    // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 执行发送前事件
    options.beforeSend(xhr);
    // 监听onload并执行完成事件
    xhr.onload = function() {
        // jquery complete(XHR, TS)
        options.complete(xhr, xhr.status);
    };
    // 监听onreadystatechange并执行成功失败事件
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) {
            return;
        }
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // jquery success(XHR, TS)
            options.success(xhr.response, xhr.status);
        } else {
        // jquery error(XHR, TS, statusText)
            options.error(xhr, xhr.status, xhr.statusText);
        }
    };
    xhr.send(formData);
}
function post(url, data, callback) {
    ajax({ url: url, type: "POST", data: data, success: callback });
}
function get(url, data, callback) {
    ajax({ url: url, type: "GET", data: data, success: callback });
}
module.exports = {
    ajax: ajax,
    post: post,
    get: get
};

随笔一行
这是前端最好的时代，这也是前端最坏的时代。众多前端框架满天飞，随着 jQuery 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。

另推荐个表格组件gridManager

云服务器 GPU云服务器 ajax原生js实现原生js实现ajax get实现ajax 原生js封装ajax

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

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

原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
深入浅出Ajax

摘要：在接收响应期间持续不断地触发。在请求发生错误时触发。在通信完成或者触发或事件后触发。已经接收到部分响应数据。基于标准被广泛支持。破坏程序的异常处理机制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 学习大纲理解Ajax的工作原理 Ajax核心-XMLHttpRequest对象封装Aja...

megatron 2019-08-22 18:39 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
Ajax详解

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

jokester 2019-08-23 14:15 评论0 收藏0
温故js系列（12）-ajax&&优缺点&&node后端

摘要：接收响应当请求发送到服务器端，收到响应后，响应的数据会自动填充对象的属性。一般而已状态代码为作为成功的标志。必要时，可以将查询字符串参数追加到的末尾，以便提交给服务器。后端实现可以自学一点后端知识，便于学习。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Ajax JavaScript-Ajax&&no...

LiangJ 2019-08-20 10:33 评论0 收藏0