原生JS封装ajax方法
2016-06-21 12:00
627 查看
http://blog.sucaijiayuan.com/article/89
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿。这时我们就需要用原生JS写一个ajax函数了。
使用示例:
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿。这时我们就需要用原生JS写一个ajax函数了。
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @param {object}opt.data 发送的参数,格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 */ function ajax(opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || 'POST'; opt.url = opt.url || ''; opt.async = opt.async || true; opt.data = opt.data || null; opt.success = opt.success || function () {}; var xmlHttp = null; if (XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); }var params = []; for (var key in opt.data){ params.push(key + '=' + opt.data[key]); } var postData = params.join('&'); if (opt.method.toUpperCase() === 'POST') { xmlHttp.open(opt.method, opt.url, opt.async); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); xmlHttp.send(postData); } else if (opt.method.toUpperCase() === 'GET') { xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async); xmlHttp.send(null); } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { opt.success(xmlHttp.responseText); } }; }
使用示例:
ajax({ method: 'POST', url: 'test.php', data: { name1: 'value1', name2: 'value2' }, success: function (response) { console.log(response); } });
相关文章推荐
- JS模仿腾讯图片站的图片翻页按钮效果完整实例
- JS实现简单的右下角弹出提示窗口完整实例
- Chrome 中的 JavaScript 断点设置和调试技巧
- javascript类型系统——字符串String类型
- javascript是判断对象是否是数组
- js跨框架获取html属性值
- JS图片定时翻滚效果实现方法
- Javascript删除指定元素节点的方法
- JSP和JS的区别
- json,xml,Html解析
- 如何用javascript去掉字符串里的所有空格
- 早该知道的7个JavaScript技巧
- Part 1: Introduction to Backbone.Js
- 【JS学习】-利用谷歌浏览器调试JS代码
- JSON
- 关于使用json数据传递的时候hibernate的懒加载问题
- js操作table
- 弹幕的简单实现
- JS基于构造函数实现的菜单滑动显隐效果【测试可用】
- Javascript模块化编程(三):require.js的用法【转】