2021-6-24 React复习ajax

最新推荐文章于 2024-09-03 19:00:00 发布

旧雨化碧

最新推荐文章于 2024-09-03 19:00:00 发布

阅读量93

点赞数

分类专栏： React博客项目

本文链接：https://blog.csdn.net/weixin_44428467/article/details/118196769

版权

React博客项目专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客探讨了前端开发中常用的四种HTTP请求方法：Ajax、jQuery、Fetch和Axios。通过实例展示了它们的GET和POST请求用法，包括参数传递、响应处理以及取消请求。同时，提到了同源策略和跨域解决方案，如JSONP和CORS。文章突出了各种方法的特点和使用场景。

摘要由CSDN通过智能技术生成

react和axios组合使用：
四种发送http请求的方法：ajax，jQuery，fetch，axios.

ajax:不需要刷新界面，更新数据，允许根据用户事件来更新界面。
缺点：存在跨域问题。

请求报文

响应报文
在这里插入图片描述

ajax进行GET请求：

btn.onclick=function(){
			 	//1创建对象
			 	const xhr = new XMLHttpRequest();
			 	//初始化，设置请求的方法和url，设置url参数
			 	xhr.open('GET','http://127.0.0.1:8001/server?a=300&b=200');
			 	//发送
				xhr.send();
				//事件绑定，处理服务器返回的结果
				//readystate:有5个值，01234
				//0未初始化
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status>=200 && xhr.status <300){
							//处理结果
							//相应行
							console.log(xhr.status);//响应状态码
							console.log(xhr.statusText);//响应状态字符串
							console.log(xhr.getAllResponseHeaders());//所有响YI应头
							console.log(xhr.response);//响应体
							result.innerHTML=xhr.response;
						}else{
							
							
						}
					}
				}
			 }

ajax 发送 post请求，请求数据在send中写

const result=document.getElementById("result");
			result.addEventListener("mouseover",function(){
				//创建对象
				const xhr=new XMLHttpRequest();
				//初始化，设置请求类型的url
				xhr.open('POST','http://127.0.0.1:8000/server');
				//设置请求头
				xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
				//发送
				xhr.send(‘a=100&c=200’);
				//事件绑定
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status>=200 && xhr.status<300){
							//处理服务器返回的结果
							result.innerHTML=xhr.response;
						}
					}
				}
				
			})

ajax 请求，返回数据是json

=<script>
			const result=document.getElementById("result");
			result.addEventListener("click",function(){
				const xhr=new XMLHttpRequest();
				xhr.open("GET",'http://127.0.0.1:8000/json-server');
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status>=200 && xhr.status<300){
							let data=JSON.parse(xhr.response);
							result.innerHTML=data.name;
							
							 
						}
					}
				}
			})
		</script>

=<script>
			const result=document.getElementById("result");
			result.addEventListener("click",function(){
				const xhr=new XMLHttpRequest();
				小黄人。responseType='json';
				xhr.open("GET",'http://127.0.0.1:8000/json-server');
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status>=200 && xhr.status<300){
							result.innerHTML=xhr.response.name
							
						}
					}
				}
			})
		</script>

ajax 取消请求xhr.abort();

bn2.addEventListener("click",function(){
				xhr.abort();
			})

jQuery发送请求

<body>
		<div class="container">
			<h2 class="page-header">jQuery发送AJAX请求</h2>
			<button class="btn btn-primary">GET</button>
			<button class="btn btn-danger">POST</button>
			<button class="btn btn-info">通用型方法ajax</button>
			
		</div>
		<script>
			$('button').eq(0).click(function(){
				$.get('http://127.0.0.1:8010/jQuery-server',{a:100,b:100},function(data){
					console.log(data);
				})
			})
			$('button').eq(1).click(function(){
				$.get('http://127.0.0.1:8010/jQuery-server',{a:100,b:100},function(data){
					console.log(data);
				})
			})
			$('button').eq(2).click(function(){
				$.ajax({
					type:"get",
					url:"http://127.0.0.1:8010/jQuery-server",
					data:{a:100,b:100},
					dataType:'json',
					success:function(data){
						console.log(data);
					}
				});
			})
		</script>
		
	</body>

axios 发送请求：

btns[0].onclick=function(){
				//GET请求
				axios.get('http://127.0.0.1:8045/axios-server',{
					//url参数
					params:{
						id:8,
						name:'terdf'
					},
				
				})
			}

btns[2].onclick=function(){
				axios({
					method：‘POST’,
					url:'http://127.0.0.1:8045/axios-server',
					//url参数
					params:{
						vip:10,
						level:10
						
					},
					//头信息
					headers:{
						a:100,
						b:100
					},
					//请求体参数
					data:{
						username:'admin',
						passwords:'admin'
					}
				}).then(response=>{
				console.log(response)})
			}

fetch发送ajax请求

btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name: 'Nliver'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // console.log(response);
                // return response.text();
                return response.json();
            }).then(response => {
                console.log(response);
            })
        }

同源策略：
协议，域名，端口号必须相同。

解决方案：
1.jsonp
script标签可以跨域，jsopn的实现基于此
2.cors跨域资源共享，在服务器端进行设置