AJAX请求

蹲蹲、

于 2023-08-30 15:55:36 发布

阅读量682

点赞数

文章标签： AJAX

本文链接：https://blog.csdn.net/weixin_45433904/article/details/132427992

版权

一、HTTP

1、请求报文

行	POST  /s?ie=utf-8  HTTP/1.1
头	HOST: ceshi.com
	Cookie: name=hello
	Content-type: application/x-www-form-urlencoded
	User-Agent: chrome 83
空行
体	username=admin&password=admin

2、响应报文

行	HTTP/1.1  200  OK
头	Content-Type: text/html;charset=utf-8
	Content-length: 2048
	Content-encoding: gzip
空行
体	<html>
		<head></head>
		<body>
			<h1>HELLO</h1>
		</body>
	<html>

二、AJAX请求的基本操作

//1、创建对象
const xhr = new XMLHttpRequest();
//2、初始化，设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server');
//3、发送
xhr.send();
//4、事件绑定，处理服务端返回的结果
//on 当...时候
//readystate 是xhr对象中的属性，表示状态0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
	//判断（服务端返回了所有的结果）
	if(xhr.readyState === 4){
		//判断响应状态码 200 404 403 401 500...
		//2xx 成功
		if(xhr.status >= 200 && xhr.status < 300){
			//处理结果 行 头 空行 体
			//1、响应行
			console.log(xhr.status);//状态码
			console.log(xhr.statusText);//状态字符串
			console.log(xhr.getAllResponseHeaders());//所有响应头
			console.log(xhr.response);//响应体
		}else{
		
		}
	}
}

三、AJAX-GET设置请求参数

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');

四、AJAX发送POST请求

//1、创建对象
const xhr = new XMLHttpRequest();
//2、初始化 设置类型与url
xhr.open('POST','http://127.0.0.1:8000/server');
//3、发送
xhr.send();
//4、事件绑定
xhr.onreadystatechange = function(){
	//判断
	if(xhr.readyState === 4){
		if(xhr.status >= 200 && xhr.status < 300){
			//处理服务端返回的结果
			console.log(xhr.response);
		}
	}
}

五、AJAX-POST设置请求体

xhr.send('a=100&b=200&c=300');
//xhr.send('a:100&b:200&c:300');

六、AJAX设置请求头信息

//1、创建对象
const xhr = new XMLHttpRequest();
//2、初始化 设置类型与url
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//自定义请求头
xhr.setRequestHeader('name','hello');
//3、发送
xhr.send("123");
//4、事件绑定
xhr.onreadystatechange = function(){
	//判断
	if(xhr.readyState === 4){
		if(xhr.status >= 200 && xhr.status < 300){
			//处理服务端返回的结果
			console.log(xhr.response);
		}
	}
}

七、AJAX—服务端响应JSON数据

1、手动对返回数据转换

let data = JSON.parse(xhr.response);

2、自动转换

const xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open('GET','url');

八、AJAX—IE浏览器缓存问题解决

const xhr = new XMLHttpRequest();
//请求地址后面加上当前时间戳(解决清除ie浏览器缓存)
xhr.open("GET","http://127.0.0.1:8000/ie?t="+Date.now());
xhr.send();
...

九、AJAX—请求超时与网络异常

const xhr = new XMLHttpRequest();
//超时设置2s设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
	alert("网络超时,请稍后重试！");
}
//网络异常回调
xhr.onerror = function(){
	alert("网络异常,请稍后重试！")
}
xhr.open("GET","http://127.0.0.1:8000/delay");
xhr.send();

十、AJAX取消请求

//获取元素对象
const btns = document.querySelectorAll("button");
let x = null;
//发送请求
btns[0].onclick = function(){
	x = new XMLHttpRequest();
	x.open("GET","http://127.0.0.1:8000/delay");
	x.send();
}
//取消请求 abort
btns[1].onclick = function(){
	x.abort();
}

十一、AJAX请求重复发送问题

//获取元素对象
const btns = document.querySelectorAll("button");
let x = null;
//标识变量
let isSending = false; //是否正在发送AJAX请求
//发送请求
btns[0].onclick = function(){
	//判断标识变量
	if(isSending) x.abort(); //如果正在发送，则取消该请求，创建一个新的请求
	x = new XMLHttpRequest();
	//修改 标识变量的值
	isSending = true;
	x.open("GET","http://127.0.0.1:8000/delay");
	x.send();
	x.onreadystatechange = function(){
		if(x.readyState === 4){
			//修改标识变量
			isSending = false;
		}
	}
}
//取消请求 abort
btns[1].onclick = function(){
	x.abort();
}

十二、jQuery中的AJAX

<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">POST</button>
<button class="btn btn-info">通用型方法ajax</button>

//get请求
$('button').eq(0).click(function(){
	$.get('http://127.0.0.1:8000/jquery-server',{a:100, b:200},funcion(data){
		console.log(data); //{name:"hello"}
	},'json');
});
//post请求
$('button').eq(1).click(function(){
	$.post('http://127.0.0.1:8000/jquery-server',{a:100, b:200},funcion(data){
		console.log(data); //{"name":"hello"}
	});
});
//通用型方法发送AJAX请求
$('button').eq(2).click(function(){
	$.ajax({
		//url
		url:'http://127.0.0.1:8000/jquery-server',
		//参数
		data:{a:100, b:200},
		//请求类型
		type:'GET',
		//响应体结果
		dataType:'json',
		//成功的回调
		success:function(data){
			console.log(data);
		},
		//超时时间
		timeout:2000,
		//失败的回调
		error:function(){
			console.log('出错');
		},
		//头信息
		headers:{
			c:300,
			d:400
		}
	});
});

十三、Axios发送AJAX请求

//GET
axios.defaults.baseURL = 'http:127.0.0.1:8000';
btns[0].onclick = function() {
	//axios.get("http://127.0.0.1:8000/axios-server",{
	axios.get('/axios-server',{
		//url参数
		params:{
			id:100,
			vip:7
		},
		//请求头信息
		headers:{
			name:"zhangSan",
			age:20
		}
	}).then(value => {
		console.log(value);
	});
};
//POST
btns[1].onclick = function() {
	axios.post('/axios-server',{
			username:"admin",
			password:"admin"
		},{
			//url
			params:{
				id:200,
				vip:9
			},
			//请求头参数
			headers:{
				height:180,
				width:180
			}
		}
	);
};
//axios函数发送ajax请求
btns[2].onclick = funciont(){
	axios({
		//请求方式
		method:'POST',
		//url
		url:'/axios-server',
		//url参数
		params:{
			vip:10,
			level:30
		},
		//头信息
		headers:{
			a:100,
			b:200
		},
		//请求体参数
		data:{
			username:'admin',
			password:'admin'
		}
	}).then(response => {
		console.log(response);
	});
};

十四、使用fetch函数发送AJAX请求

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