前端开发学习之【AJAX】

1.概述

1.AJAX

AJAX全称为Asynchronous Javascript And XML （异步的JS和XML）。通过AJAX可以在浏览器中发送异步请求，最大的优势是不用刷新就能获取数据。

优点：

• 可以无需刷新页面就与服务器端进行通信；
• 允许你根据用户事件来更新部分页面内容。

缺点：

• 没有浏览历史，不能回退；
• 存在跨域问题；
• SEO不友好（搜索引擎优化，爬虫爬不到）。

2.XML

XML可扩展标记语言，用来传输和存储数据。XML和HTML类似，但HTML中是预定于标签，而XML都是自定义标签。现在已经被JSON取代了。

3.跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。localhost和127.0.0.1虽然都指向本机，但也属于跨域。

跨域会阻止接口的请求，会阻止Dom的操作。

4.HTTP协议

HTTP（hypetext transport protovol）协议，超文本传输协议，规定了浏览器与万维网服务器之间互相通信的规则。

请求报文

• 行：请求方式、URL路径、HTTP协议版本
• 头：Host、Cookie、Content-type、User-Agent
• 空行
• 体

响应报文

• 行：协议版本、响应状态码、响应状态字符串
• 头：Content-Type、Content-length、Content-encoding
• 空行
• 体：html源码

5.环境准备

下载node.js 和express：操作链接

2.使用

1.请求基本操作

//获取元素
const btn=document.getElementByTagName('button')[0];
//绑定事件
btn.onclick=function(){
	//1.创建对象
	const xhr=new XMLHttpRequest();
	//2.初始化 设置请求方法和url
	xhr.open('GET','http://127.0.0.1:8000/路径');
	//3.发送
	xhr.send();
	//4.事件绑定 处理服务器端返回结果
	//readystate 是xhr对象中的属性，表示状态0 1 2 3 4
	//0 未初始化 1 open调用完毕 2 send调用完毕 3 服务器返回部分结果 4 返回所有结果
	xhr.onreadystatechange=function(){
		if(xhr.readystate===4){
			if(xhr.status>=200&&xhr.status<300){
				result.innerHTML=xhr.response;
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.设置参数

在url中之间设置。

3.发送POST请求

xhr.open('POST','http://127.0.0.1:8000/路径+参数');
//设置请求头
xhr.setRequestHeader('type','content');
//设置请求体
xhr.send('请求体');
1
2
3
4
5

4.响应JSON数据

服务器端发送：

const data={name:'hh'};
let str=JSON.stringify(data);
response.send(str);
1
2
3

客户端接收：

//手动转换
let data=JSON.parse(xhr.response);
console.log(data.name);
//自动转换
console.log(xhr.response.name);

1
2
3
4
5
6

5.请求超时问题

//1. 2s内未收到结果就取消
xhr.timeout=2000;
//2. 设置超时回调，超时后调用该函数
xhr.ontimeout=function(){}

//网络异常回调
xhr.onerror=function(){}
1
2
3
4
5
6
7

6.取消请求

xhr.abort();
1

7.请求重复发送问题

//标识是否正在发送ajax请求
let isSending=false;

//发送后将isSending 改为true

//绑定事件
xhr.onreadystatechange=function(){
	if(xhr.readyState===4){
		isSending=false;
	}		
}
1
2
3
4
5
6
7
8
9
10
11

8.使用fetch函数发送ajax请求

fetch('url',{
	method:'POST',
	//请求头
	headers:{
		name:'ahh'
	},
	//请求体
	body:''
}).then(response=>{
	return response.text();//response.json();
});
1
2
3
4
5
6
7
8
9
10
11

3.jQuery中使用ajax

1.get请求

$.get(url,[data],[callback],[type])

• url：请求的url地址
• data：携带的参数
• callback：载入成功时的回调函数
• type：设置返回内容格式

2.post请求

$.post(url,[data],[callback],[type])

• url：请求的url地址
• data：携带的参数
• callback：载入成功时的回调函数
• type：设置返回内容格式

3.通用模式

$('button').eq(0).click(function(){
	$.ajax({
		url:'',
		data:{a:100,b:200},
		type:'GET'  //'POST',
		dataType:'json',
		success:function(data){},
		timeout:2000,
		error:function(){}
	})
})
1
2
3
4
5
6
7
8
9
10
11

4.axios使用ajax

5.跨域问题

1.同源策略

浏览器的一种安全策略，同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

2.如何解决跨域

1. JSONP：只支持get请求。

有些标签具有跨域能力，img、link、iframe、script，JSONP就是使用script标签的跨域能力来发送请求的。
script发送请求应该返回js语句。

jQuery发送jsonp请求：

$('button').eq(0).click(function(){
	$.getJSON('url',function(data){})
})
1
2
3

2. CORS：跨域资源共享

不需要在客户端做任何特殊操作，完全在服务器中进行处理，支持get和post请求。

CORS通过设置一个响应头来告诉浏览器，该请求允许跨域。

response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Header","*");
response.setHeader("Access-Control-Allow-Method","*");
//*：全部
// 也可以写一个具体的url地址。
1
2
3
4
5