最严谨的ajax请求封装
一、封装ajax
封装最严谨的ajax,可直接复制引用
ajax.js
function sendAjax(obj){
/ 先判断url是否传入
if(!obj.url){
/ 没有传
throw new Error('地址必填') / 抛出自定义错误
}
/ 传入了之后需要验证url是否是字符串
if(Object.prototype.toString.call(obj.url) !== '[object String]'){
throw new Error('地址必须是字符串')
}
/ 判断请求方式是否传入
if(!obj.method){
obj.method = 'get'
}
/ 传入了 - 验证是否是get或post
if(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){
throw new Error('请求方式必须是get或post')
}
/ 判断async是否传入
if(obj.async === undefined){
obj.async = true
}
/ 判断类型
if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){
throw new Error('async必须是布尔值')
}
/ 判断是否传入success
if(!obj.success){
obj.success = function(){}
}
/ 判断是否是函数
if(Object.prototype.toString.call(obj.success) !== '[object Function]'){
throw new Error('success必须是函数')
}
if(!obj.error){
obj.error = function(){}
}
if(Object.prototype.toString.call(obj.error) !== '[object Function]'){
throw new Error('error必须是函数')
}
/ 判断数据是否传入
var str = '';
if(obj.data){
/ 判断类型
if(Object.prototype.toString.call(obj.data) === '[object String]'){
str = obj.data
}else if(Object.prototype.toString.call(obj.data) === '[object Object]'){
/ 对象要处理成字符串
var f = '';
for(var attr in obj.data){
str += f + attr + '=' + obj.data[attr]
f = '&'
}
}else{
throw new Error('非法数据')
}
/ 如果是get请求,需要将数据拼接在地址后
if(obj.method.toLowerCase() === 'get'){
obj.url += '?' + str
}
}
/ 判断希望请求回来的数据格式
if(!obj.dataType){
obj.dataType = 'json'
}
/ 如果传了
if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){
throw new Error('dataType非法')
}
/*
{
url:'',
method:'',
data:'',
async:'',
success:function(){},
error:'',
dataType:'text/json/xml'
}
*/
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(parseInt(xhr.status/100) === 2){
/ 确定要不要转对象
switch(obj.dataType.toLowerCase()){
case 'json':
var res = xhr.responseText;
res = JSON.parse(res)
break;
case 'xml':
var res = xhr.responseXML;
break;
case 'text':
var res = xhr.responseText;
break;
}
obj.success(res)
}else{
obj.error()
}
}
}
xhr.open(obj.method,obj.url,obj.async)
if(obj.method.toLowerCase() === 'post' && obj.data){
/ 设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(str)
return
}
xhr.send()
}
function promiseAjax(obj){
return new Promise(function(resolve,reject){
/ 先判断url是否传入
if(!obj.url){
// 没有传
throw new Error('地址必填') /抛出自定义错误
}
/传入了之后需要验证url是否是字符串
if(Object.prototype.toString.call(obj.url) !== '[object String]'){
throw new Error('地址必须是字符串')
}
/ 判断请求方式是否传入
if(!obj.method){
obj.method = 'get'
}
/ 传入了 - 验证是否是get或post
if(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){
throw new Error('请求方式必须是get或post')
}
/ 判断async是否传入
if(obj.async === undefined){
obj.async = true
}
/ 判断类型
if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){
throw new Error('async必须是布尔值')
}
/ 判断数据是否传入
var str = '';
if(obj.data){
/ 判断类型
if(Object.prototype.toString.call(obj.data) === '[object String]'){
str = obj.data
}else if(Object.prototype.toString.call(obj.data) === '[object Object]'){
/ 对象要处理成字符串
var f = '';
for(var attr in obj.data){
str += f + attr + '=' + obj.data[attr]
f = '&'
}
}else{
throw new Error('非法数据')
}
/ 如果是get请求,需要将数据拼接在地址后
if(obj.method.toLowerCase() === 'get'){
obj.url += '?' + str
}
}
/ 判断希望请求回来的数据格式
if(!obj.dataType){
obj.dataType = 'json'
}
/ 如果传了
if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){
throw new Error('dataType非法')
}
/*
{
url:'',
method:'',
data:'',
async:'',
success:function(){},
error:'',
dataType:'text/json/xml'
}
*/
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(parseInt(xhr.status/100) === 2){
/ 确定要不要转对象
switch(obj.dataType.toLowerCase()){
case 'json':
var res = xhr.responseText;
res = JSON.parse(res)
break;
case 'xml':
var res = xhr.responseXML;
break;
case 'text':
var res = xhr.responseText;
break;
}
resolve(res)
}else{
reject()
}
}
}
xhr.open(obj.method,obj.url,obj.async)
if(obj.method.toLowerCase() === 'post' && obj.data){
/ 设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(str)
return
}
xhr.send()
})
}
技术支持:微信刷步数
python日记
没有个性
推荐阅读
利用session.upload_progress进行文件包含
这次ciscn有一道web题考的就是这个知识点,但当时没有尝试去扫路径,被开头给的源码卡死了有点儿遗憾,不过还是想自己复现一下这个小trick。
蚂蚁阅读 1.1k
再也不学AJAX了!(三)跨域获取资源 ① - 同源策略
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第四篇,最近更新于 2023 年 1...
libinfs赞 19阅读 4k评论 4
再也不学 AJAX 了!(一)AJAX 概述
跨域获取数据:介绍了与「跨域发送 AJAX 请求」相关的一些内容:例如「同源策略」与四种跨域请求资源的方式:JSONP,CORS,postMessage 和 WebSocket;
libinfs赞 19阅读 3.9k评论 6
再也不学AJAX了!(二)使用AJAX ② Fetch API
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第三篇,最近更新于 2023 年 1...
libinfs赞 2阅读 601
Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面
TANKING赞 1阅读 4.4k
Y 分钟速成 jquery
jQuery是JavaScript的一个函数库,它可以帮你“写更少,做更多”。它集成了很多常见的JavaScript任务并且很容易调用。jQuery被世界各地的很多的大公司和开发者使用。它包括了AJAX,事件处理,文档操作以及很多其它...
小X学技术阅读 691
初识Ajax
初识Ajax浏览器&服务器浏览器作用: 输入网址, 即可浏览相关内容服务器作用: 为访问者提供各种资源 。资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等浏览器访问的资源在哪里存着?在服务器上存储浏...
H阅读 304
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。