js封装ajax方法

1、根据Jquery中ajax的方法封装，先创建一个js文件

// 对原生代码进行封装// 传参，相当于 let 形参 = 实参;
/*
let { type, url, data, success } = {type: 'POST',url: 'http://www.itcbc.com:3006/api/addbook',data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laotang' },success: function (res) {console.log(res);}}
*/function ajax({ type, url, data, success }) {let xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {let res = xhr.responseText;// res 是服务器返回的结果success(res);} }// 需要把传递进来的对象，转成字符串格式let arr = [];for (let key in data) {// key 表示键：id | appkey | bookname// data[key] 表示值： 1 | laotang | zsarr.push(key + '=' + data[key]);  // 'id=1'}let str = arr.join('&');// 判断是什么请求方式if (type === 'GET') {xhr.open(type, url + '?' + str);xhr.send();} else if (type === 'POST') {xhr.open(type, url);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send(str);}}

2、创建html文件调用ajax方法

<body><script src="./js/index.js"></script><script>// 因为 $.ajax() 就是这样用。所以我希望，我自己封装的函数，也这样用// 所以用法如下：ajax({type: 'POST',url: 'http://www.itcbc.com:3006/api/addbook',data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laotang' },success: function (x) {console.log(x);}});</script></body>

js封装ajax方法相关推荐

js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 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 封装inserAfter()方法
封装insertAfter()方法在JS中,系统提供了Node.insertBefore(a, b)方法,在参考节点b之前插入一个拥有指定父节点Node的子节点a. 我们可以封装一个类似insert ...
js设置ajax执行顺序,2018-03-10fiddler替换js、js的ajax方法执行顺序
一.fiddler的替换js 替换js fiddler能够将js替换为指定的js文件,方便调试也许还能做更多的事情,在js中可以配置好假想返回的数据,更加方便的调试. 二.js的调用和有ajax函数时 ...
原生JS封装ajax以及request
一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {};if(url.indexOf('getcaptc ...
用原生js封装get方法
get方法的封装首先我们看一下用原生js来发送请求的步骤: 1.创建请求对象 .var xhr=new XMLHttpRequest(); 2.创建open方法确认请求方式和地址 xhr.open( ...
uniapp中封装ajax方法
ajax.js // 记录调用 request 方法的次数 let ajaxTimes = 0// 请求地址的基本路径 const baseUrl = 'https://api-hmugo-web.i ...

js封装ajax方法

js封装ajax方法相关推荐

最新文章

热门文章