摘要:使用过的同学,应该对事件绑定方法有一定的了解。实现方式以下为个人类库中实现方式。代码中使用到一个基础方法对象,该对象为的基础类。如果想了解更多,可以通过点击进入查看原码。
使用过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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/109789.html
摘要:原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面,一般是错误,或者后台没有创建相应的内部服务错误,多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。 原生JS与jQuery对AJAX的实现 一、定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 Jav...
摘要:接收响应当请求发送到服务器端,收到响应后,响应的数据会自动填充对象的属性。一般而已状态代码为作为成功的标志。必要时,可以将查询字符串参数追加到的末尾,以便提交给服务器。后端实现可以自学一点后端知识,便于学习。 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:Ajax JavaScript-Ajax&&no...
阅读 2607·2021-11-18 10:02
阅读 2277·2021-09-30 09:47
阅读 1744·2021-09-27 14:01
阅读 3109·2021-08-16 11:00
阅读 3162·2019-08-30 11:06
阅读 2390·2019-08-29 17:29
阅读 1528·2019-08-29 13:19
阅读 443·2019-08-26 13:54