【AJAX学习笔记】AJAX | nodejs | express | jsonp | 跨域

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 简介

  1. XML 可扩展标记语言

  2. XML 被设计用来传输和存储数据

  3. XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。

  4. 比如说我有一个学生数据：name=“孙悟空”,age =18,gender=“男”，用 XML 表示如下：

     <student>
         <name>孙悟空name>
         <age>18age>
         <gender>男gender>
     student>
     

     现已经被 JSON 取代了。用 JSON 表示如下：

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

4.AJAX的优缺点

• AJAX 的优点
  1. 可以无需刷新页面与服务器端进行通信
  2. 允许你根据用户事件来更新部分页面内容
• AJAX 的缺点
  1. 没有浏览历史，不能回退
  2. 存在跨域问题（同源）
  3. 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

1. get 请求

   $.get(url,[data],[callback],[type])
   //url：请求的 URL 地址
   //data：请求携带的参数
   //callback：载入成功时的回调函数
   //type：设置返回内容格式，比如 xml html script json text _default
   

2. post 请求

   $.post(url,[data],[callback],[type])
   //url：请求的 URL 地址
   //data：请求携带的参数
   //callback：载入成功时的回调函数
   //type：设置返回内容格式，比如 xml html script json text _default
   

3. 通用方法 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 的使用

  1. 动态地创建一个 script 标签

     var script = document.createElement('script')
     

  2. 设置 script 的 src ，设置回调函数

     script.src = 'http://localhost:3000/textAJAX?callback=abc'
     function abc(data){ 
         alert(data.name)
     }
     

  3. 将 script 添加到 body 中

     document.body.appendChild(script);
     

  4. 服务器中路由的处理

     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 端口监听中......')
  })