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>18</age>
    <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
空行	
响应主体信息	<html>
		<head>
		</head>
		<body>
			<h1>尚硅谷</h1>
		</body>
	 </html>

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">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </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>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <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:5500/%E4%BB%A3%E7%A0%81/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

</html>

//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-jsonp</title>
    <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}，<br>
                    校区：${ 
          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>CORS</title>
    <style>
        #result{
        
        
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
        
        
            //1. 创建对象
            const 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 端口监听中......')
})

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

目录