Ajax教程

原生AJAX

AJAX简介

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

---

XML简介

• XML：可扩展标记语言
• XML被设计用来传输和存储数据
• XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

// 比如说我有一个学生数据
name="孙悟空";
age=18;
gender="男";
// 用XML表示
<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

• 现在已经被JSON取代了

{"name":"孙悟空"."age":18,"gender":"男"}

---

AJAX的特点

AJAX的优点

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

AJAX的缺点

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

---

HTTP协议

• HTTP（hypertext transport protocol）协议【超文本传输协议】
• 协议相许规定了浏览器和万维网服务器之间互相通信的规则

请求（请求报文）

• 请求的格式与参数

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

响应（响应报文）

行	HTTP/1.1		200		OK
头	Content-type: text/html;charset=utf-8
		Content-length: 2048
		Content-encoding: gzip
空行
体	html内容

---

Express的使用

【终端】npm init --yes	//初始化
【终端】npm i express	//安装express
【JS】
//1.引入express
const expree = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request,response)=> {
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin','*')
	// 设置响应体
	response.send("HELLO EXPRESS")
})
app.post('/server', (request,response)=> {
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin','*')
	// 设置响应体
	response.send("HELLO EXPRESS")
})
//4.监听端口启动服务
app.listen(8000, ()=> {
	console.log("服务已经启动，8000端口监听中...")
})

【终端】node js文件路径	//启动服务

【浏览器】访问本地ip或者localhost+端口

---

AJAX的基本操作

//1.创建对象
let xhr = new XMLHttpRequest();
//设置响应体数据的类型
xhr.responseType = 'json';
//超时设置2s设置
xhr.timeout = 2000;
//超时的回调
xhr.ontimeout = function() {
	alert('网络超时');
}
//网络异常回调
xhr.onerror = funtion() {
	alert('网络异常');
}
//2.初始化 设置请求方法和url
//GET
//Date now()给参数增加一个时间戳，每次请求的参数都不相投，可以解决ie的ajax缓存问题
xhr.open('GET','http://localhost:8000/server?t=' + Date.now());
//POST 
xhr.open('POST','http://localhost:8000/server?a=100&b=200&c=300');
//设置请求头
xhr.serRequestHeader('Content-Type','application/x-www-form-urlencoded');
//3.发送
//GET
xhr.send();
//POST
xhr.send(a=100&b=200&c=300);
//4.绑定事件 处理服务端返回的结果
//on when 当...时候
//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) {
			//处理结果 行 头 空行 体
			console.log(xhr.status); //状态码
			console.log(xhr.statusText); //状态字符串
			console.log(xhr.getAllResponseHeaders()); //所有响应头
			console.log(xhr.response) //响应体
			//手动转换json数据
			let data = JSON.parse(xhr.response);
		}
	}
}
//取消请求
xhr.abort();

---

JQuery请求AJAX

GET

$.get(
	'localhost:8000/server', //url
	{a:100, b:200}, //参数
	function(data) { //data：响应体
},'json') //转换json数据

POST

$.post(
	'localhost:8000/server', //url
	{a:100, b:200}, //参数
	function(data) { //data：响应体
})

JQuery通用方法发送AJAX请求

$.ajax({
	//url
	url: 'localhost:8000/server',
	//参数
	data: {a:100, b:200},
	//请求类型GET/POST
	type: 'GET',
	//响应体结果
	dataType: 'json',
	//成功的回调
	success: function(data) {},
	//超时时间
	timeout: 2000,
	//失败的回调
	error: function(err) {},
	//头信息
	headers: {c:300, d:400}
})

---

AXIOS请求AJAX

GET

//配置baseURL
axios.defaults.baseURL = 'localhost:8000'
axios.get(
	'/server', //url 配置baseURL了之后就不用写绝对路径了
	{
		params: {id:100, vip:7}, //参数
		headers: {age:20}, //请求头信息
	}
}).then(data => {})

POST

//配置baseURL
axios.defaults.baseURL = 'localhost:8000'
axios.post(
	'/server', //url 配置baseURL了之后就不用写绝对路径了
	{username: 'admin', password: 'admin'}, //请求体
	{
		params: {id:100, vip:7}, //参数
		headers: {age:20}, //请求头信息
	}
}).then(data => {})

AXIOS通用方法发送AJAX请求

axios({
	//请求方法
	method: 'POST',
	//url
	url: '/server',
	//url参数
	params: {
		vip: 10,
		level: 30
	},
	//头信息
	headers: {
		a:100,
		b:200
	},
	//请求体参数
	data: {
		username: 'admin',
		password: 'admin'
	}
}).then(data => {
	//响应状态码
	console.log(data.status);
	//响应状态字符串
	console.log(data.statusText);
	//响应头信息
	console.log(data.headers);
	//响应体
	console.log(data.data)
})

使用fetch函数发送AJAX请求

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

---

跨域

同源策略

• 同源策略（Same-Origin-Policy）最早由Netscape公司提出，是浏览器的一种安全策略。
• 同源：协议、域名、端口号，必须完全相同
• 违背同源策略就是跨域

---

如何解决跨域

JSONP

• JSONP是什么
  • JSONP（JSON with Padding），是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，只支持get请求。
• JSONP怎么工作的？
  • 在网页有一些标签天生具有跨域能力，比如：img link iframe script
  • JSONP就是利用script标签的跨域能力开发送请求的
• JSONP的使用
  • 动态的创建一个script标签：var script = document.createElement("script")
  • 设置script的src，设置回调函数：script.src="http://localhost:3000/testAJAX?callback=abc"
  • 将script插入到文档中：document,body.appendChild(script)

---

CORS

CORS是什么？

• CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post的请求。跨域资源共享标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

CORS怎么工作的?

• CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
• CORS的使用
  response.setHeader("Access-Control-Allow-Origin","*")