Ajax学习笔记-Ajax的封装-8

最新推荐文章于 2022-07-25 22:13:06 发布

笑道三千

最新推荐文章于 2022-07-25 22:13:06 发布

阅读量570

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108161291

版权

JS 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		    function ajax(options){
				//每次调用需要传递的参数太多，也很累。
				//就想着能不能把一些参数设置为默认参数
				var defaults={
					type:'get',
					url:'',
					data:{},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success:function(){},
					error:function(){}
				}
				
				//使用options对象中的属性覆盖defaults对象中的属性
				//这样一来，如果调用时有设置的参数则使用定义的，没有的话就使用默认的
				Object.assign(defaults,options)
				
				var xhr=new XMLHttpRequest()
				//拼接参数路径
				var params=''
				for(var attr in defaults.data){
					params+=attr+'='+defaults.data[attr]+'&'
				}
				params=params.substr(0,params.length-1)//把最后一个&去除
				//判断请求类型，执行不同代码
				if (defaults.type =='get'){	
					xhr.open(defaults.type,defaults.url+'?'+params)
					xhr.send()
				}else if(defaults.type =='post'){
					xhr.open(defaults.type,defaults.url)
					var contentType=defaults.header['Content-Type']
					xhr.setRequestHeader('Content-Type',contentType)
					if(contentType=='application/json'){
						//如果参数是以json形式传递的，就直接传递，无需处理
						//但是参数传递需要是字符串，所以转化一下
						xhr.send(JSON.stringify(defaults.data))
					}else{
						//如果参数是以其他形式传递的，就需要处理拼接一下
						xhr.send(params)
					}
				}
				//服务器返回信息后，执行这里
				xhr.onload=function(){ 
					//判断响应头中的数据类型
					var contentType=xhr.getResponseHeader('Content-Type')
					var responseText=xhr.responseText
					//如果响应类型中包含application/json,说明传过来的是的json对应的字符串
					if(contentType.includes('application/json')){
						//那就把它转换为json对象，其他类型的则不转换
						responseText=JSON.parse(responseText)
					}
					if(xhr.status==200){
						defaults.success(responseText,xhr)
					}else{
						defaults.error(responseText,xhr)
					}
				}
			}
			
			
			//调用ajax
			ajax({
				url:'http://localhost:3000/readystate',
				data:{
					name:'zhangsan',
					age:20
				},
				header:{
					'Content-Type':'application/json'
				},
				success:function(data){
					console.log(data)
				}
			})
			
			
		</script>

	</body>
</html>

这次调用 ajax对应的路由：

app.get('/readystate',(req,res)=>{
	res.send({name:"zhangsan",age:199})
})

也就是说，这样封装之后，需要使用ajax的时候，只要调用函数就行：

//调用ajax
			ajax({
				type:'post'
				url:'http://localhost:3000/readystate',
				//请求参数
				data:{
					name:'zhangsan',
					age:20
				},
				//请求参数的类型
				header:{
					'Content-Type':'application/json'
				},
				success:function(data,err){
					//data对应服务器返回的信息
					//err对应服务器的处理信息：成功信息
					console.log(data)
					console.log(err)
					//想写什么样的功能就在这里写
				},
				error:function(data,err){
					//data对应服务器返回的信息
					//err对应服务器的处理信息：报错信息
					console.log(data)
					console.log(err)
					//想写什么样的功能就在这里写
				}
			})