【前端】原生JS实现类似jQuery的ajax
做web的同学肯定知道jQuery框架里的ajax方法,这个方法很常用也很好用。但是总有一些时候我们不得不放弃使用jQuery,必须使用原生JS(比如我之前遇到的一个项目),又或者项目本来就很简单,为了页面简洁,为了节省资源我们没必要使用jQuery,这个时候我们要想使用ajax的话就必须自己用JS实现了,所以今天在这里分享用原生JS实现类似JQuery的ajax的方法。
直接贴代码:
1.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); } }; }
说明:
参数 | 类型 | 说明 |
---|---|---|
opt.method | String | 提交方式,包括POST和GET两种方式 |
opt.url | String | 发送请求的url |
opt.async | Bloolean | 是否为异步请求,true为异步的,false为同步的 |
opt.data | Object | 发送的参数,格式为对象类型 |
opt.success | Function | ajax发送并接收成功调用的回调函数 |
2.使用示例
ajax({ method: 'POST', url: 'post.php', data: { param1: 'value1', param2: 'value2', }, success: function (response) { console.log(response) ; } })
就这样,一个简单ajax就实现了,用起来也是很顺手的。
希望本文对你有所帮助~
喜欢这篇文章的话可以扫描下方二维码支持我~
文章来自清渭技术小站,转载请注明出处
版权声明:
作者:Kiwi
链接:https://www.qingwei.tech/programe-develops/1055.html
来源:清渭技术小站
文章版权归作者所有,未经允许请勿转载。
THE END
二维码
共有 0 条评论