Ajax复习总结

前端学习 评论

Ajax介绍

Ajax全称为Asynchronous JavaScript And XML，就是异步的JS和XML。
通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式.

HTTP协议

请求报文

1
2
3
4
5
6
7
8
9
、、、
行		GET	/s?ie=utf-8	HTTP/1.1
头		Host:
	 	 Cookie:
	 	 Content-type: application/x-www-form-urlencoded
	 	 User-Agent: chrome 83
空行
体		// GET请求为空、POST请求可以不为空
、、、

响应报文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
、、、
行		HTTP/1.1 200 ok
头		Centent-Type: text/html;charset=utf-8
		 Content-length: 2048
		 Content-encoding: gzip
空行
体		<html>
			<head>
			</head>
			<body>
				<h1>Hello World</h1>
			</body>
		</html>
、、、
404 找不到资源
403 禁止
401 没有权限
500 内部错误

原生AJAX

GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1.创建对象
const xhr = new XMLHttpRequest();
2.初始化 设置请求方法和 url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
3.发送请求
xhr.send();
4.事件绑定 处理服务端返回的结果
// onredaystatechange共触发5次
// on 当...时候
// readystate xhr对象中的属性，表示状态 有0 1 2 3 4
// 0 未初始化
// 1  open()调用完毕
// 2  send()调用完毕
// 3  服务端返回部分结果
// 4 服务端返回所有结果
// change 改变
xhr.onreadystattechange = function(){
    // 判断（服务端返回所有结果）
    if(xhr.readyState === 4){
        // 判断相应状态码 200 404 403 401 500 ...
        // 状态码在200区间内都是成功
        if(xhr.status >= 200 $$ xhr.status <300){
            // 处理结果 行 头 空行 体
            console.log(xhr.status);// 响应行 状态码
            console.log(xhr.statusText);// 响应行 状态字符串
            concole.log(xhr.getAllResponseHeaders());// 所有响应头
            console.log(xhr.response);// 响应体
        }
    }
}

POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1.创建对象
const xhr = new XMLHttpRequest();
2.初始化 设置请求方法和 url
xhr.open('POST','http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','tom'); // 可以自定义请求头，但需要后端相应设置允许请求头内容
3.发送请求，设置参数
// xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');
xhr.send('1231123.1231');
// 请求体格式灵活，只要后台能解析即可
4.事件绑定
xhr.onreadystattechange = function(){
    // 判断（服务端返回所有结果）
    if(xhr.readyState === 4){
        if(xhr.status >= 200 $$ xhr.status <300){
            // 处理返回结果
            console.log(xhr.response);// 响应体
        }
    }
}

响应json

方式一：手动转换

1
2
3
4
5
6
7
8
9
10
11
const xhr = new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:8000/server-json');
xhr.send();
xhr.onreadystattechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 $$ xhr.status <300){
            console.log(xhr.response);// {name:'tom'} 纯字符串
            let data = JSON.parse(xhr.response) // 将结果变为json格式（可以通过属性获得值）
        }
    }
}

方式二：设置响应体数据格式

1
2
3
4
5
6
7
8
9
10
11
12
13
const xhr = new XMLHttpRequest();
// 设置响应体数据格式
xhr.responseType = 'json';
xhr.open('GET','http://127.0.0.1:8000/server-json');
xhr.send();
xhr.onreadystattechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 $$ xhr.status <300){
            console.log(xhr.response);// {name:'tom'} json格式（可以通过属性获得值）
            document.querySelector('div').innerHTML = xhr.response.name;
        }
    }
}

IE缓存问题

在IE浏览器上，发送请求后会对结果根据URL进行缓存，当服务端变更后，因为URL未改变，直接从缓存拿数据，导致最新的结果不能及时呈现

1
2
3
4
const xhr = new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:8000/ie?t=+Date.now()'); // 为每次请求加时间戳，使得每次URL不同
xhr.send();
...

请求超时与网络异常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const xhr = new XMLHttpRequest();
// 超时设置
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
    alert('网络异常，请稍后重试');
}
// 网络异常回调
xhr.onerror = function(){
    alert('你的网络出现了问题');
}
xhr.open('GET','http://127.0.0.1:8000/delay');
xhr.send();
...

取消请求

1
2
3
4
5
6
7
8
let x = null;
// 发送请求
x = new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:8000/ie?t=+Date.now()'); // 为每次请求加时间戳，使得每次URL不同
xhr.send();
...
// 取消请求
x.abort();

防止重复请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let x = null;
// 设置标识变量
let isSending = false;
// 发送请求
if(isSending) x.abort(); // 如果正在发送，则取消请求，创建新的请求并发送
x = new XMLHttpRequest();
isSending = true; // 开始发送请求时修改 标识
xhr.open('GET','http://127.0.0.1:8000/server-json');
xhr.send();
xhr.onreadystattechange = function(){
    if(xhr.readyState === 4){
        isSending = false; //请求已经发送完成，修改标识，可以发送下次请求
        ...
    }
}

jQuery发送AJAX

$.get

1
2
3
$.get('http://127.0.0.1:8888/jquery-server',{a:100,b:200},function(data){
	console.log(data); // data为响应体
},'json') // 第四个参数是响应体类型

$.post

1
2
3
$.post('http://127.0.0.1:8888/jquery-server',{a:100,b:200},function(data){
	console.log(data); // data为响应体
},'json')

$.ajax通用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$.ajax({
	// url
	url:'http://127.0.0.1:8888/jquery-server',
	// 参数
	data:{a:100,b:200},
	// 请求类型
	type:'GET',
	// 响应体结果（后端设置，此处接收）
	dataType:'json',
	// 超时时间
	timeout:2000,
	// 成功回调
	success: function(data){
		console.log(data);
	},
	// 失败回调
	error: function(){
		concole.log('失败了');
	},
	// 头信息（需要后端设置请求头）
	headers:{
		c:300,
		d:400
	}
})

Axios发送AJAX

axios.get

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 引入axios
...
// 配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8888'
// 发送请求
axios.get('URL',{请求信息)
axios.get('axios-server',{ // 若未配置baseURL，需要填写完成URL
	// url参数
	params:{
		id:100,
	},
	// 请求头信息
	headers:{
		name:'tom'
	}
}).then(value=>{ // 数据返回和处理基于promise
    concole.log(value);
})

axios.post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 引入axios
...
// 配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8888'
// 发送请求
axios.post('URL',{请求体},{其他参数})
axios.post('axios-server',{
        username:'admin',
        password:'admin'
    },{
	// url参数（请求行）
	params:{
		id:100,
	},
	// 请求头信息(json格式发送)
	headers:{
		name:'tom'
	}
}).then(value=>{ // 数据返回和处理基于promise
    concole.log(value);
})

axios通用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
axios({
    // 请求方法
    method:'POST',
    // url
    url:'axios-server',
    // url参数
    params:{
        id:1,
    },
    // 头信息
    headers:{
        a:100,
    },
    // 请求体参数 
    data:{
        username:'admin',
        password:'admin',
    }
}).then(response=>{
    // 响应状态码
    console.log(response.status);
    // 响应状态字符串
    console.log(response.statusText);
    // 响应头信息
    console.log(response.headers);
    // 响应体
    concole.log(response.data);
})

image-20220630201853316

Fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。是XMLHttpRequest 的理想替代方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fetch('http://127.0.0.1:8888/fetch-server?vip=10',{ // url参数可以直接添加
    // 请求方法
    method:'POST',
    // 请求头
    headers:{
        name:'tom'
    },
    // 请求体
    body:'username=admin&password=admini', // 也可以用对象格式
}).then(response => {
    // return response.text(); // 将响应信息转换为字符串格式
    return response.json(); // 将响应信息转换为json格式
}).then(response => {
    concole.log(response);
})

枫与风