【AJAX学习笔记】AJAX | nodejs | express | jsonp | 跨域
目录
- AJAX
-
- 1.笔记说明
- 2.AJAX介绍与网页应用
- 3.XML的介绍
- 4.AJAX的优缺点
- 5.HTTP协议请求报文和响应文本
- 6.Chrome网络控制台查看
- 7.Node.js安装与介绍
- 8.express框架介绍与基本
- 9.AJAX案例准备
- 10.AJAX请求的基本操作
- 11.AJAX设置请求参数
- 12.AJAX发送POST请求
- 13.POST设置请求体
- 14.AJAX设置请求头信息
- 15.服务端响应JSON数据
- 16.nodemon自动重启工具安装
- 17.IE缓存问题解决
- 18.AJAX请求超时与网络异常
- 19.AJAX取消请求
- 20.AJAX请求重复发送问题
- 21.jQuery发送AJAX请求
- 22.jQuery通过方法发送AJAX
- 23.Axios发送AJAX请求
- 24.Axios函数发送AJAX请求
- 25.使用fetch函数发送AJAX请求
- 26.同源策略
- 27.jsonp的实现原理
- 28.jsonp实践
- 29.jQuery发送jsonp请求
- 30.设置CORS响应头实现跨域
AJAX
1.笔记说明
博主的AJAX学习笔记，教程视频链接为https://www.bilibili.com/video/BV1WC4y1b78y，喜欢的小伙伴可以点赞收藏。
- HTTP
- 原生
- jQuery
- fetch
- axios
2.AJAX介绍与网页应用
- AJAX简介
- AJAX的全称为Asynchronous JavaScript And XML。就是异步的JS和XML。
- 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势就是无刷新获取数据。
- AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
3.XML的介绍
-
XML 已经被 JSON 替代
-
XML 简介
-
XML 可扩展标记语言
-
XML 被设计用来传输和存储数据
-
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
-
比如说我有一个学生数据：name=“孙悟空”,age =18,gender=“男”，用 XML 表示如下：
<student> <name>孙悟空name> <age>18age> <gender>男gender> student>现已经被 JSON 取代了。用 JSON 表示如下：
{"name":"孙悟空","age":"18","gender":"男"}
-
4.AJAX的优缺点
- AJAX 的优点
- 可以无需刷新页面与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
- AJAX 的缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO（搜索引擎优化）不友好，不能爬虫
5.HTTP协议请求报文和响应文本
-
HTTP协议
- HTTP（hypertext transport protocol）协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
- 约定，规则
-
请求报文
-
重点是格式与参数
请求行 POST /s?ie=utf-8 HTTP/1.1 请求头部信息 Host: atguigu.com Cookie:name=guigu Cotent-type: application/x-www-from-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 空行 响应主体信息尚硅谷
6.Chrome网络控制台查看
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dXD3jmrg-1667230921809)(C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220801145512070.png)]
7.Node.js安装与介绍
- AJAX 的应用中需要一个服务端，所以就安装一个 Node.js
8.express框架介绍与基本
-
npm init --yes npm i express 然后查看 package.json 里有无 express 即可 -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //req 是对请求报文的封装 //res 是对响应报文的封装 app.get('/', (req, res) => { //设置响应 res.send('Hello express!') }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hLCzew05-1667230921812)(C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220801151157563.png)]
9.AJAX案例准备
-
//3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 app.get('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello AJAX!') }) -
端口被占用则需要使用 Ctrl + C 关闭端口，然后重新来一次。
10.AJAX请求的基本操作
-
const btn = document.getElementById('btn') const result = document.getElementById('result') btn.onclick = function () { //1.创建对象 const xhr = new XMLHttpRequest() //2.初始化 设置请求方法和 URL xhr.open('GET', 'http://127.0.0.1:8000/server') //3.发送 xhr.send() //4.事件绑定 处理服务端返回的结果 // on when... 当...的时候 // readystate 是 xhr 对象中的属性，表示状态 有5个值 0 1 2 3 4 // 0 表示 未初始化 // 1 表示 open() 方法已调用完毕 // 2 表示 send() 方法已调用完毕 // 3 表示 服务端返回了部分的结果 // 4 表示 服务端返回了所有的结果 // change 改变 xhr.onreadystatechange = function () { // 判断（服务端返回了所有的结果） if (xhr.readyState === 4) { //判断状态响应码 200 404 403 401 500 // 2xx 成功 if (xhr.status >= 200 && xhr.status < 300) { //处理结果 行 头 空行 体 //1. 响应行 // xhr.status 是响应行里的响应状态码 console.log(xhr.status) // xhr.statusText 是响应行里的响应状态字符串 console.log(xhr.statusText) // xhr.getAllResponseHeaders() 是所有的响应头 console.log(xhr.getAllResponseHeaders()) // xhr.response 是响应体 console.log(xhr.response) // 设置 result 的文本 result.innerHTML = xhr.response } else { } } } }//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!') }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
11.AJAX设置请求参数
-
用问号 ? 分割 URL 地址与参数，然后传参数与值，用等号连接，用 & 分割参数。如下:
-
http://127.0.0.1:8000/server?a=100&b=200&c=300 -
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qydrO8RT-1667230921813)(C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220801180922171.png)]
12.AJAX发送POST请求
-
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX POST请求title> <style> #result { width: 100px; height: 100px; border: solid 1px blue; } style> head> <body> <div id="result">div> <script> const result = document.getElementById('result') //绑定事件 result.addEventListener('mouseover', function () { //创建对象 const xhr = new XMLHttpRequest() //初始化 设置类型与URL xhr.open('POST', 'http://127.0.0.1:8000/server') //发送 xhr.send() //事件绑定 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { //处理服务端返回的结果 result.innerHTML = xhr.response } } } }) script> body> html> -
//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!') }) app.post('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello AJAX!') }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
13.POST设置请求体
-
//发送 //格式可以是很多类型 // xhr.send('a=10&b=200&c=300') // xhr.send('a:100&b:200&c:300') xhr.send('1233211234567')
14.AJAX设置请求头信息
-
//设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') xhr.setRequestHeader('name','atguigu') //设置自定义请求头，则需要在服务器端做以下修改 -
//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!') }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX!') }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
15.服务端响应JSON数据
-
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSON响应title> <style> #result { width: 200px; height: 100px; border: solid 1px #89b; } style> head> <body> <div id="result">div> <script> const result = document.getElementById('result') window.onkeydown = function () { const xhr = new XMLHttpRequest() //设置响应数据的类型 xhr.responseType = 'json' xhr.open('GET', 'http://127.0.0.1:8000/json-server') xhr.send() xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { // console.log(xhr.response) // result.innerHTML = xhr.response // 将返回的json字符串转换为js对象 // 1.手动转换 // result.innerHTML = JSON.parse(xhr.response).name // console.log(xhr.response) // 2.自动转换 let data = xhr.response result.innerHTML = data.name console.log(data) } } } } script> body> html> -
//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!') }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
16.nodemon自动重启工具安装
-
安装指令
-
npm install -g nodemon -
报错：nodemon : 无法加载文件 C:\Users\19240\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。
-
解决方案：
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d8pPaOqK-1667230921815)(C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220802143919047.png)]
17.IE缓存问题解决
-
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IE缓存问题title> <style> #result { width: 200px; height: 100px; border: solid 1px #258; } style> head> <body> <button>点击发送请求button> <div id="result">div> <script> const btn = document.getElementsByTagName('button')[0] const result = document.querySelector('#result') btn.addEventListener('click', function () { const xhr = new XMLHttpRequest() xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now()) xhr.send() xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { result.innerHTML = xhr.response } } } }) script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
18.AJAX请求超时与网络异常
-
断网测试设置
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q8YMnxLK-1667230921816)(C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220802161700522.png)]
-
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: 200px; height: 100px; border: solid 1px #90b; } style> head> <body> <button>点击发送请求button> <div id="result">div> <script> const btn = document.getElementsByTagName('button')[0] const result = document.querySelector('#result') btn.addEventListener('click', function () { 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() xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { result.innerHTML = xhr.response } } } }) script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.get('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
19.AJAX取消请求
-
手动将请求取消
-
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> <button>点击发送button> <button>点击取消button> <script> const btn = document.querySelectorAll('button') let xhr = null btn[0].onclick = function () { xhr = new XMLHttpRequest() xhr.open('GET', 'http://127.0.0.1:8000/delay') xhr.send() } //abort() 方法可以取消一个请求 btn[1].onclick = function () { xhr.abort() } script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.get('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
20.AJAX请求重复发送问题
-
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> <button>点击发送button> <script> //获取元素对象 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 } } } script> body> html>//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.get('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
21.jQuery发送AJAX请求
jQuery 中的 AJAX
-
get 请求
$.get(url,[data],[callback],[type]) //url：请求的 URL 地址 //data：请求携带的参数 //callback：载入成功时的回调函数 //type：设置返回内容格式，比如 xml html script json text _default -
post 请求
$.post(url,[data],[callback],[type]) //url：请求的 URL 地址 //data：请求携带的参数 //callback：载入成功时的回调函数 //type：设置返回内容格式，比如 xml html script json text _default -
通用方法 ajax，但 get post 更简洁
//例如： //jquery中的通用ajax方法 //参数是一个对象，可以添加很多属性 $.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 } })
22.jQuery通过方法发送AJAX
-
代码示例：
-
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 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script> head> <body> <div class="container"> <h2 class="page-header">jQuery发送AJAX请求 h2> <button class="btn btn-primary">GETbutton> <button class="btn btn-danger">POSTbutton> <button class="btn btn-info">通用型方法ajaxbutton> div> <script> $('button').eq(0).click(function(){ $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){ //data 参数是响应体 console.log(data); },'json') //第四个参数json表示响应体是一个json格式的数据 }) $('button').eq(1).click(function(){ $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){ //data 参数是响应体 console.log(data); },'json') }) $('button').eq(2).click(function(){ //jquery中的通用ajax方法 //参数是一个对象，可以添加很多属性 $.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 } }) }) script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
23.Axios发送AJAX请求
-
Axios 是目前前端最热门的 AJAX 工具库。
24.Axios函数发送AJAX请求
-
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 src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js">script> head> <body> <button>GETbutton> <button>POSTbutton> <button>AJAXbutton> <script> const btns = document.querySelectorAll('button') //配置 baseURL 用来简化路径 axios.defaults.baseURL = 'http://127.0.0.1:8000' btns[0].onclick = function(){ //GET axios.get('/axios-server',{ //url 参数 params:{ id:100, vip:7 }, //请求头信息 headers:{ name:'atguigu', age:20 } }).then(value =>{ console.log(value) }) } btns[1].onclick = function(){ //POST axios.post('/axios-server',{ username:'admin', password:'admin' },{ //url参数 params:{ id:200, vip:9 }, //请求头参数 headers:{ height:100, width:100 } }) } btns[2].onclick = function(){ //AJAX 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); //响应状态码 console.log(response.status); //响应状态字符串 console.log(response.statusText); //响应头信息 console.log(response.headers); //响应体 console.log(response.data); }) } script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
25.使用fetch函数发送AJAX请求
-
全局的
fetch()方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回Response对象。 -
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> //文档地址 //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch const btn = document.querySelector('button') btn.onclick = function(){ //fetch 函数有两个参数 //参数一：url //参数二：可选配置项 fetch('http://127.0.0.1:8000/fetch-server?vip=10',{ //请求方法 method:'POST', //请求头 headers:{ name:'atguigu' }, //请求体 body:'username=admin&password=admin' }).then(response=>{ // return response.text() //如果服务端返回的是一个json字符串，则json方法可以将json->js对象 return response.json() }).then(response=>{ console.log(response) }) } script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //fetch 服务 app.all('/fetch-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //response.send('hello jquery ajax') const data = {name:'尚硅谷'} response.send(JSON.stringify(data)) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') }) -
在实际使用中axios发送ajax请求居多，fetch居少。
26.同源策略
-
同源策略（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 x = new XMLHttpRequest() //这里因为是满足同源策略所以url可以简写 x.open('GET','/data') x.send() x.onreadystatechange = function(){ if(x.readyState === 4){ if(x.status >=200 && x.status <300){ console.log(x.response); } } } } script> body> html> -
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('服务已启动......'); })
27.jsonp的实现原理
-
如何解决跨域？
-
JSONP
-
1）JSONP 是什么？
- JSONP（JSON with Padding），是一个非官方的跨域解决方案，纯粹拼接程序员的聪明才智开发出来，只支持 get 请求。
-
2）JSONP 怎么工作的？
- 在网页有一些标签天生具有跨域能力，比如：img link iframe script
- JSONP 就是利用 script 标签的跨域能力来发送请求的。
-
3）JSONP 的使用
-
动态地创建一个 script 标签
var script = document.createElement('script') -
设置 script 的 src ，设置回调函数
script.src = 'http://localhost:3000/textAJAX?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> <div id="result">div> <script> //处理数据 function handle(data){ const result = document.getElementById('result') result.innerHTML = data.name } script> <script src="http://127.0.0.1:8000/jsonp-server">script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //fetch 服务 app.all('/fetch-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //response.send('hello jquery ajax') const data = {name:'尚硅谷'} response.send(JSON.stringify(data)) }) //jsonp 服务 app.all('/jsonp-server',(request,response)=>{ const data = { name: '尚硅谷atguigu111' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
28.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 pink' p.innerHTML = data.msg } input.onblur = function(){ //获取用户的输入值 let username = this.value //向服务端发送请求 检测用户名是否存在 const script = document.createElement('script') script.src = 'http://127.0.0.1:8000/check-username' document.body.appendChild(script) } script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //fetch 服务 app.all('/fetch-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //response.send('hello jquery ajax') const data = {name:'尚硅谷'} response.send(JSON.stringify(data)) }) //jsonp 服务 app.all('/jsonp-server',(request,response)=>{ const data = { name: '尚硅谷atguigu111' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) //检测用户名是否存在 app.all('/check-username',(request,response)=>{ const data = { exit:1, msg:'用户名已存在' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
29.jQuery发送jsonp请求
-
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery-jsonptitle> <style> #result{ width:300px; height:100px; border:solid 1px #089; } style> <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script> head> <body> <button>点击发送 jsonp 请求button> <div id="result"> div> <script> //?callback=? 使用jquery发送jsonp请求一定要加这个参数 且值为? 固定写法 $('button').eq(0).click(function(){ $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){ $('#result').html(` 名称：${data.name}，
校区：${data.city} `) }) }); script> body> html> -
//1.引入 express const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //fetch 服务 app.all('/fetch-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //response.send('hello jquery ajax') const data = {name:'尚硅谷'} response.send(JSON.stringify(data)) }) //jsonp 服务 app.all('/jsonp-server',(request,response)=>{ const data = { name: '尚硅谷atguigu111' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) //检测用户名是否存在 app.all('/check-username',(request,response)=>{ const data = { exit:1, msg:'用户名已存在' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) app.all('/jquery-jsonp-server',(request,response)=>{ const data = { name:'guigu', city:['bj','sh','sz'] } let str = JSON.stringify(data) //接收 callback 参数 let cb = request.query.callback // response.end(`${cb}(${str})`) }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })
30.设置CORS响应头实现跨域
-
CORS 是什么？
-
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些
源站通过浏览器有权限访问哪些资源。
-
-
CORS 怎么工作的？
-
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。
-
-
CORS 的使用
-
主要是服务器端的设置：
-
服务端返回的
Access-Control-Allow-Origin: *表明，该资源可以被 任意 外域访问。 -
Access-Control-Allow-Headers首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。 -
Access-Control-Allow-Methods首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。 -
//CORS app.all('/cors-server',(request,response)=>{ //设置响应头 表示允许跨域 //参数二：允许跨域的url *表示全部url皆可 response.setHeader('Access-Control-Allow-Origin','*') // response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500') //头信息随意，请求方法随意 response.setHeader('Access-Control-Allow-Headers','*') response.setHeader('Access-Control-Allow-Method','*') response.send('hello cors') })
-
-
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CORStitle> <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 x = new XMLHttpRequest(); //2. 初始化设置 x.open("GET", "http://127.0.0.1:8000/cors-server"); //3. 发送 x.send(); //4. 绑定事件 x.onreadystatechange = function(){ if(x.readyState === 4){ if(x.status >= 200 && x.status < 300){ //输出响应体 console.log(x.response); } } } } script> body> html> -
//1.引入 express const { response } = require('express') const express = require('express') //2.创建应用对象 const app = express() //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //针对IE缓存 app.get('/ie', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应体 response.send('Hello IE 1!') }) //延时响应 app.all('/delay', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 setTimeout(() => { response.send('延时响应') }, 3000) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //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:'尚硅谷'} response.send(JSON.stringify(data)) }) //fetch 服务 app.all('/fetch-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //response.send('hello jquery ajax') const data = {name:'尚硅谷'} response.send(JSON.stringify(data)) }) //jsonp 服务 app.all('/jsonp-server',(request,response)=>{ const data = { name: '尚硅谷atguigu111' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) //检测用户名是否存在 app.all('/check-username',(request,response)=>{ const data = { exit:1, msg:'用户名已存在' } let str = JSON.stringify(data) response.end(`handle(${str})`) }) // jquery-jsonp-server app.all('/jquery-jsonp-server',(request,response)=>{ const data = { name:'guigu', city:['bj','sh','sz'] } let str = JSON.stringify(data) //接收 callback 参数 let cb = request.query.callback // response.end(`${cb}(${str})`) }) //CORS app.all('/cors-server',(request,response)=>{ //设置响应头 表示允许跨域 //参数二：允许跨域的url *表示全部url皆可 response.setHeader('Access-Control-Allow-Origin','*') // response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500') //头信息随意，请求方法随意 response.setHeader('Access-Control-Allow-Headers','*') response.setHeader('Access-Control-Allow-Method','*') response.send('hello cors') }) app.all('/server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //设置响应体 response.send('Hello AJAX POST!') }) app.all('/json-server', (request, response) => { //设置响应头 表示设置了允许跨域 response.setHeader('Access-Control-Allow-Origin', '*') //设置响应头 表示允许添加自定义请求头 response.setHeader('Access-Control-Allow-Headers', '*') //响应一个数据 const data = { name: 'atguigu' } //将 data 转换为 json 字符串 let str = JSON.stringify(data) //设置响应体 response.send(str) }) //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动，8000 端口监听中......') })