原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿。这时我们就需要用原生JS写一个ajax函数了。
1 /* 封装ajax函数 2 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 3 * @param {string}opt.url 发送请求的url 4 * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 5 * @param {object}opt.data 发送的参数,格式为对象类型 6 * @param {function}opt.success ajax发送并接收成功调用的回调函数 7 */ 8 function ajax(opt) { 9 opt = opt || {}; 10 opt.method = opt.method.toUpperCase() || 'POST'; 11 opt.url = opt.url || ''; 12 opt.async = opt.async || true; 13 opt.data = opt.data || null; 14 opt.success = opt.success || function () {}; 15 var xmlHttp = null; 16 if (XMLHttpRequest) { 17 xmlHttp = new XMLHttpRequest(); 18 } 19 else { 20 xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); 21 }var params = []; 22 for (var key in opt.data){ 23 params.push(key + '=' + opt.data[key]); 24 } 25 var postData = params.join('&'); 26 if (opt.method.toUpperCase() === 'POST') { 27 xmlHttp.open(opt.method, opt.url, opt.async); 28 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); 29 xmlHttp.send(postData); 30 } 31 else if (opt.method.toUpperCase() === 'GET') { 32 xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async); 33 xmlHttp.send(null); 34 } 35 xmlHttp.onreadystatechange = function () { 36 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 37 opt.success(xmlHttp.responseText); 38 } 39 }; 40 }
使用示例:
1 ajax({ 2 method: 'POST', 3 url: 'test.php', 4 data: { 5 name1: 'value1', 6 name2: 'value2' 7 }, 8 success: function (response) { 9 console.log(response); 10 } 11 });
转载于:https://www.cnblogs.com/a757956132/p/5603176.html
原生JS封装ajax方法相关推荐
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法 作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
- 原生js实现ajax方法(闭包)
学习Jquery是,模仿写了一个原生js实现ajax方法(闭包),代码上加有注释 方法如下: <script type="text/javascript">(funct ...
- 原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
- 用原生js封装get方法
get方法的封装 首先我们看一下用原生js来发送请求的步骤: 1.创建请求对象 .var xhr=new XMLHttpRequest(); 2.创建open方法确认请求方式和地址 xhr.open( ...
- 原生JS封装ajax以及request
一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {};if(url.indexOf('getcaptc ...
- 原声ajax的函数式封装,原生 js 封装 ajax的两种方式(get,post)
/*ajax封装 @param option:传入一个对象 属性分别为(顺序可以打乱): url:请求的路径 type:请求的不同类型get或post data:发送的数据,格式:key1=value ...
- 原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ ...
最新文章
- Windows 7加域操作手册下
- java读取文件 16进制_Java对文件的16进制读取和操作
- pythonappend用法_python中append实例用法总结
- linux下安装oracle 11g R2
- React之JSX入门
- 2019聊大考研计算机调剂,2019年聊城大学硕士研究生预调剂工作说明
- lol云顶之奕助手_关于云顶之奕的感想
- 【MATLAB】 分形插值
- java程序设计之学生选课管理系统_课内资源 - 基于JAVA面向对象的学生选课管理系统...
- GIS历史概述与WebGis应用开发技术浅解
- MySQL简单技巧(三):教你轻松用information_schema表+python实现表结构同步(上)——理论篇
- 后端利用MultipartFIle类型参数接受文件上传
- 数据结构中各种排序算法的稳定性比较
- 【车载以太网】【测试】架构及测试工具
- melodic 奥比中光(orbbec)相机安装
- 一个人靠不靠谱,就看这三件小事
- PDF文档物理结构概述
- python工作目录是什么意思_Docker的工作目录是什么意思?
- display:block含义
- C#中获得文件夹下所有文件
热门文章
- 异常解析————Parameter metadata not available for the given statement
- python打包exe报错编码问题,使用Python打包含有pymssql成exe所躺的坑
- (二分搜索法尺取法)subsequence
- php防止跨域提交,PHP防止跨域提交表单的简单示例
- arm-linux-gcc 硬浮点,ARMCC和GCC编译ARM代码的软浮点和硬浮点问题 【转】
- 防火墙阻止网页连接网络连接_win7电脑打不开网页怎么办 win7电脑打不开网页解决步骤【图文步骤】...
- linux安装服务程序,将 Go 程序安装成系统服务
- java在原数组中追加一个元素
- win7关闭系统索引服务器,win7系统如何关闭索引服务
- Spring Boot Redis