原生JS封装ajax方法
2023-09-14 08:57:44 时间
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 });
相关文章
- rails应用ajax之一:使用纯js方法
- JS框架_(JQuery.js)纯css3进度条动画
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(Progress.js)圆形动画进度条
- baguetteBox.js响应式画廊插件(纯JS)
- Java与js的交互
- baguetteBox.js响应式画廊插件(纯JS)
- [Node.js]33. Level 7: Persisting Questions
- JS中lambda表达式的优缺点和使用场景
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Node.js] Build microservices in Node.js with micro
- Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js
- js非空验证+判断输入框是否输入的全是空格
- Stimulsoft Reports.JS 2022.2.3 Crack
- 第71篇 QML 之 详解JS用构造函数创建对象
- js正則表達式--验证表单
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- 如何在Vue组件中调用封装好的外部js文件方法
- js工具类的封装
- JS-WebAPIs DOM总结
- js拆分数组
- 2021前端面试题大全(html+css专题+js专题+vuejs专题+react专题+选择题+问答题+编程题+逻辑题)
- js工具代码封装(超长)1/3
- JS工具方法 3 js客户端与php服务器通信加密之AES