尚硅谷 3小时Ajax入门到精通に - Ajax | Nico Niconi = Nekoaimer = 清心如水，清水即心

# jQuery-AJAX

# jQuery

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery 发送 AJAX 请求</title>
	<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
	<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>

	<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>
	// 1.get 方式
	$('button').eq(0).click(function () {
	$.get('http://127.0.0.1:8000/jquery-server', { name: 'lain', age: 16 }, function (data) {
	console.log(data);
	}, 'json');
	});

	// 2.post 方式
	$('button').eq(1).click(function () {
	$.post('http://127.0.0.1:8000/jquery-server', { name: 'lain', age: 16 }, function (data) {
	console.log(data);
	});
	});

	// 3. 通用方式
	$('button').eq(2).click(function () {
	const options = {
	//url
	url: 'http://127.0.0.1:8000/jquery-server',
	// 参数
	data: { name: 100, b: 200 },
	// 请求类型
	// type: 'GET',
	type: 'POST',
	// 响应体结果
	dataType: 'json',
	// 成功的回调
	success: function (data) {
	console.log(data);
	},
	// 超时时间
	timeout: 500,
	// 失败的回调
	error: function () {
	console.log('出错啦!!');
	},
	// 头信息
	headers: {
	c: 300,
	d: 400
	}
	}
	$.ajax(options);
	});

	</script>
	</body>

	</html>

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

# axios-AJAX

# Axios

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>axios 发送 AJAX请求</title>
	<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
	</head>

	<body>
	<button>GET</button>
	<button>POST</button>
	<button>AJAX</button>

	<script>
	// https://github.com/axios/axios
	const btns = document.querySelectorAll('button');

	// 配置 baseURL
	axios.defaults.baseURL = 'http://127.0.0.1:8000';

	// 1.get 方式
	btns[0].onclick = function () {
	//GET 请求
	axios.get('/axios-server', {
	//url 参数
	params: {
	id: 001,
	svip: 7
	},
	// 请求头信息
	headers: {
	name: 'lain',
	age: 16
	}
	}).then(value => {
	console.log(value);
	});
	}

	// 2.post 方式
	btns[1].onclick = function () {
	axios.post('/axios-server', {
	username: 'nekoaimer',
	password: '1234567'
	}, {
	// url
	params: {
	id: 002,
	svip: 9
	},
	// 请求头参数
	headers: {
	height: 180,
	weight: 180,
	}
	});
	}

	// 3. 通用方式
	btns[2].onclick = function () {
	axios({
	// 请求方法
	method: 'POST',
	//url
	url: '/axios-server',
	//url 参数
	params: {
	vip: 10,
	level: 30
	},
	// 头信息
	headers: {
	a: 100,
	b: 200
	},
	// 请求体参数
	data: {
	username: 'nekoaimer',
	password: '1234567'
	}
	}).then(response => {
	// 响应状态码
	console.log('响应状态码： ', response.status);
	// 响应状态字符串
	console.log('响应状态字符串：', response.statusText);
	// 响应头信息
	console.log('响应头信息： ', response.headers);
	// 响应体
	console.log('响应体： ', response.data);
	})
	}
	</script>
	</body>

	</html>

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10.axios 服务
	app.all('/axios-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});


	// 11. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

# fetch-AJAX

# fetch

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>fetch 发送 AJAX请求</title>
	</head>

	<body>
	<button>AJAX请求</button>
	<script>
	const btn = document.querySelector('button');

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

	</html>

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10.axios 服务
	app.all('/axios-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 11.fetch 服务
	app.all('/fetch-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello FETCH AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 12. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

# 同源策略

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

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	</head>

	<body>
	<h1>尚硅谷</h1>
	<button>点击获取用户数据</button>
	<script>
	const btn = document.querySelector('button');

	btn.onclick = function () {
	const xhr = new XMLHttpRequest();
	// 这里因为是满足同源策略的，所以 url 可以简写
	xhr.open("GET", '/data');
	// 发送
	xhr.send();
	//
	xhr.onreadystatechange = function () {
	if (xhr.readyState === 4) {
	if (xhr.status >= 200 && xhr.status < 300 \|\| xhr.status === 304) {
	console.log(xhr.response);
	}
	}
	}
	}
	</script>
	</body>

	</html>

# server

	const express = require('express');

	const app = express();

	app.get('/home', (request, response)=>{
	// 响应一个页面
	response.sendFile(__dirname + '/index.html');
	});

	app.get('/data', (request, response)=>{
	response.send('用户数据');
	});

	app.listen(9000, ()=>{
	console.log("服务已经启动...");
	});

# 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";
	function abc(data) {
	alert(data.name);
	};

将 script 添加到 body 中 document.body.appendChild(script);

服务器中路由的处理

	router.get("/testAJAX" , function (req , res) {
	console.log("收到请求");
	var callback = req.query.callback;
	var obj = {
	name:"孙悟空",
	age:18
	}
	res.send(callback+"("+JSON.stringify(obj)+")");
	});

# 原理

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>原理演示</title>
	<style>
	#result {
	width: 300px;
	height: 100px;
	border: solid 1px #78a;
	}
	</style>
	</head>

	<body>
	<!-- <script src="./js/app.js"></script> -->

	<div id="result"></div>
	<script>
	// 处理数据
	function handle(data) {
	// 获取 result 元素
	const result = document.getElementById('result');
	result.innerHTML = data.name;
	}
	</script>
	<script src="http://127.0.0.1:5500/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script>


	<script src="http://127.0.0.1:8000/jsonp-server"></script>
	</body>

	</html>

# app

	const data = {
	name: 'nekoaimer'
	};
	console.log(data);
	handle(data);

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10.axios 服务
	app.all('/axios-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 11.fetch 服务
	app.all('/fetch-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello FETCH AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 12.jsonp-server 服务
	app.all('/jsonp-server', (request, response) => {
	// response.send('HELLO AJAX JSONP'); // Unexpected identifier
	// response.send("console.log('HELLO AJAX JSONP')"); // HELLO AJAX JSONP

	const data = {
	name: 'nekoaimer'
	};

	const str = JSON.stringify(data)
	console.log(str);
	response.end(`handle(${str})`); // HELLO AJAX JSONP
	});

	// 13. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

# JSONP 实践

# 案例

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>案例</title>
	</head>

	<body>
	用户名: <input type="text" id="username">
	<p></p>
	<script>
	// 获取 input 元素
	const input = document.querySelector('input');
	const p = document.querySelector('p');

	// 声明 handle 函数
	function handle(data) {
	input.style.border = "solid 1px #f00";
	// 修改 p 标签的提示文本
	p.innerHTML = data.msg;
	}

	// 绑定事件
	input.onblur = function () {
	// 获取用户的输入值
	let username = this.value;

	// 向服务器端发送请求检测用户名是否存在
	//1. 创建 script 标签
	const script = document.createElement('script');
	console.log(script);

	//2. 设置标签的 src 属性
	script.src = 'http://127.0.0.1:8000/check-username';

	//3. 将 script 插入到文档中
	document.body.appendChild(script);
	}
	</script>
	</body>

	</html>

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10.axios 服务
	app.all('/axios-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 11.fetch 服务
	app.all('/fetch-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello FETCH AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 12.jsonp-server 服务
	app.all('/jsonp-server', (request, response) => {
	// response.send('HELLO AJAX JSONP'); // Unexpected identifier
	// response.send("console.log('HELLO AJAX JSONP')"); // HELLO AJAX JSONP

	const data = {
	name: 'nekoaimer'
	};

	const str = JSON.stringify(data)
	console.log(str);
	response.end(`handle(${str})`); // HELLO AJAX JSONP
	});

	// 13. 用户名检测是否存在
	app.all('/check-username',(request, response) => {
	// response.send('console.log("hello jsonp")');
	const data = {
	exist: 1,
	msg: '用户名已经存在'
	};
	// 将数据转化为字符串
	let str = JSON.stringify(data);
	// 返回结果
	response.end(`handle(${str})`);
	});

	// 14. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

# jQuery-jsonp

# 案例

	<!DOCTYPE html>
	<html lang="en">
	a
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery-jsonp</title>
	<style>
	#result {
	width: 300px;
	height: 100px;
	border: solid 1px #089;
	}
	</style>
	<script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
	</head>

	<body>
	<button>点击发送 jsonp 请求</button>
	<div id="result">

	</div>
	<script>
	$('button').eq(0).click(function () {
	$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
	$('#result').html(`
	名称: ${data.name}<br>
	校区: ${data.friends}
	`)
	});
	});
	</script>
	</body>

	</html>

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10.axios 服务
	app.all('/axios-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 11.fetch 服务
	app.all('/fetch-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello FETCH AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 12.jsonp-server 服务
	app.all('/jsonp-server', (request, response) => {
	// response.send('HELLO AJAX JSONP'); // Unexpected identifier
	// response.send("console.log('HELLO AJAX JSONP')"); // HELLO AJAX JSONP

	const data = {
	name: 'nekoaimer'
	};

	const str = JSON.stringify(data)
	console.log(str);
	response.end(`handle(${str})`); // HELLO AJAX JSONP
	});

	// 13. 用户名检测是否存在
	app.all('/check-username',(request, response) => {
	// response.send('console.log("hello jsonp")');
	const data = {
	exist: 1,
	msg: '用户名已经存在'
	};
	// 将数据转化为字符串
	let str = JSON.stringify(data);
	// 返回结果
	response.end(`handle(${str})`);
	});

	// 14.jquery-jsonp-server 案例
	app.all('/jquery-jsonp-server',(request, response) => {
	// response.send('console.log("hello jsonp")');
	const data = {
	name:'saber',
	friends: ['稚名真白','小鸟游六花','樱岛麻衣']
	};
	// 将数据转化为字符串
	let str = JSON.stringify(data);
	// 接收 callback 参数
	let cb = request.query.callback;

	// 返回结果
	response.end(`${cb}(${str})`);
	});

	// 15. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

# cors

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。
CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS 怎么工作的？
- CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS 的使用

主要是服务器端的设置：

	router.get("/testAJAX" , function (req , res) {
	// 通过 res 来设置响应头，来允许跨域请求
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
	res.set("Access-Control-Allow-Origin","*");
	res.send("testAJAX 返回的响应");
	});

# 设置响应头

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CORS</title>
	<style>
	#result {
	width: 200px;
	height: 100px;
	border: solid 1px #90b;
	}
	</style>
	</head>

	<body>
	<button>发送请求</button>
	<div id="result"></div>
	<script>
	const btn = document.querySelector('button');

	btn.onclick = function () {
	//1. 创建对象
	const xhr = new XMLHttpRequest();
	//2. 初始化设置
	xhr.open("GET", "http://127.0.0.1:8000/cors-server");
	//3. 发送
	xhr.send();
	//4. 绑定事件
	xhr.onreadystatechange = function () {
	if (xhr.readyState === 4) {
	if (xhr.status >= 200 && xhr.status < 300 \|\| xhr.status === 304) {
	// 输出响应体
	console.log(xhr.response);
	}
	}
	}
	}
	</script>
	</body>

	</html>

# server

	//1. 引入 express
	const express = require('express');

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

	//3. 创建路由规则
	//request 是对请求报文的封装
	//response 是对响应报文的封装
	app.get('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
	});

	// 4.post 请求
	app.post('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
	});

	// 5. 可以接收任意类型的请求
	app.all('/server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
	});

	// 6.JSON 响应
	app.all('/json-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
	name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
	});

	// 7. 可以接收任意类型的请求
	app.all('/ie', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
	});

	// 8. 延时响应
	app.all('/delay', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
	response.send('HELLO AJAX DELAY');
	}, 1000)
	});

	// 9.jQuery 服务
	app.all('/jquery-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO jQuery AJAX');
	const data = {name: 'nekoaimer'}
	response.send(JSON.stringify(data));
	});

	// 10.axios 服务
	app.all('/axios-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 11.fetch 服务
	app.all('/fetch-server', (request, response) => {
	// 设置响应头设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello FETCH AJAX');
	const data = {name:'nekoaimer'};
	response.send(JSON.stringify(data));
	});

	// 12.jsonp-server 服务
	app.all('/jsonp-server', (request, response) => {
	// response.send('HELLO AJAX JSONP'); // Unexpected identifier
	// response.send("console.log('HELLO AJAX JSONP')"); // HELLO AJAX JSONP

	const data = {
	name: 'nekoaimer'
	};

	const str = JSON.stringify(data)
	console.log(str);
	response.end(`handle(${str})`); // HELLO AJAX JSONP
	});

	// 13. 用户名检测是否存在
	app.all('/check-username',(request, response) => {
	// response.send('console.log("hello jsonp")');
	const data = {
	exist: 1,
	msg: '用户名已经存在'
	};
	// 将数据转化为字符串
	let str = JSON.stringify(data);
	// 返回结果
	response.end(`handle(${str})`);
	});

	// 14.jquery-jsonp-server 案例
	app.all('/jquery-jsonp-server',(request, response) => {
	// response.send('console.log("hello jsonp")');
	const data = {
	name:'saber',
	friends: ['稚名真白','小鸟游六花','樱岛麻衣']
	};
	// 将数据转化为字符串
	let str = JSON.stringify(data);
	// 接收 callback 参数
	let cb = request.query.callback;

	// 返回结果
	response.end(`${cb}(${str})`);
	});

	// 15.cors-server 设置响应头
	app.all('/cors-server', (request, response)=>{
	// 设置响应头
	response.setHeader("Access-Control-Allow-Origin", "*");
	response.setHeader("Access-Control-Allow-Headers", '*');
	response.setHeader("Access-Control-Allow-Method", '*');
	response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
	response.send('hello CORS');
	});

	// 16. 监听端口启动服务
	app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
	});

Ajax

# jQuery-AJAX

# jQuery

# server

# axios-AJAX

# Axios

# server

# fetch-AJAX

# fetch

# server

# 同源策略

# server

# JSONP

# 原理

# app

# server

# JSONP 实践

# 案例

# server

# jQuery-jsonp

# 案例

# server

# cors

# 设置响应头

# server

尚硅谷 3小时Ajax入门到精通 いち

Vue2 事件修饰符

尚硅谷 3小时Ajax入门到精通いち