AJAX

AJAX

1. Note description

The blogger's AJAX study notes, the tutorial video link is https://www.bilibili.com/video/BV1WC4y1b78y , friends who like it can like it and collect it.

HTTP
Native
jQuery
fetch
axios

2. AJAX introduction and web application

Introduction to AJAX
- The full name of AJAX is Asynchronous JavaScript And XML. That's asynchronous JS and XML.
- AJAX can send asynchronous requests to the server in the browser, and the biggest advantage is to obtain data without refreshing.
AJAX is not a new programming language, but a new way of combining existing standards.

3. Introduction to XML

XML has been replaced by JSON
Introduction to XML
1. XML Extensible Markup Language
2. XML was designed to transport and store data
3. XML is similar to HTML, the difference is that HTML has predefined tags, while XML has no predefined tags, all are custom tags, used to represent some data.
4. For example, I have a student data: name = "Monkey King", age = 18, gender = "Male", expressed in XML as follows:
```
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>
```
  Has now been superseded by JSON. Expressed in JSON as follows:
```
{
        
        "name":"孙悟空","age":"18","gender":"男"}
```

4. Advantages and disadvantages of AJAX

Advantages of AJAX
1. Can communicate with the server without refreshing the page
2. Allows you to update parts of the page content based on user events
Disadvantages of AJAX
1. No browsing history, cannot go back
2. There is a cross-domain problem (same origin)
3. SEO (Search Engine Optimization) unfriendly, not crawlable

5. HTTP protocol request message and response text

HTTP protocol
- HTTP (hypertext transport protocol) protocol [Hypertext Transfer Protocol], the protocol specifies in detail the rules for mutual communication between browsers and World Wide Web servers.
- agreement, rule

request message

The focus is on format and parameters

请求行	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

response message

响应行	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 web console view

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-dXD3jmrg-1667230921809) (C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220801145512070.png)]

7. Node.js installation and introduction

AJAX application needs a server, so install a Node.js

8. Introduction and basics of express framework

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

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-hLCzew05-1667230921812) (C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220801151157563.png)]

9. AJAX case preparation

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

If the port is occupied, you need to use Ctrl + C to close the port, and then start again.

10. Basic operation of AJAX request

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 setting request parameters

Use a question mark? to separate the URL address and parameters, then pass the parameters and values, connect them with an equal sign, and separate the parameters with &. as follows:

http://127.0.0.1:8000/server?a=100&b=200&c=300

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-qydrO8RT-1667230921813) (C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220801180922171.png)]

12. AJAX sends POST request

<!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 setting request body

//发送
//格式可以是很多类型
// xhr.send('a=10&b=200&c=300')
// xhr.send('a:100&b:200&c:300')
xhr.send('1233211234567')

14. AJAX set request header information

//设置请求头
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. The server responds with JSON data

<!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 automatic restart tool installation

installation instructions
```
npm install -g nodemon
```
Error: nodemon: Could not load file C:\Users\19240\AppData\Roaming\npm\nodemon.ps1 because running scripts is prohibited on this system.
solution:
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-d8pPaOqK-1667230921815) (C:\Users\19240\AppData\Roaming\Typora\typora-user-images\image-20220802143919047.png)]

17. IE cache problem solved

<!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 request timeout and network exception

Network disconnection test settings
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (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 cancel request

Manually cancel the request

<!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 request repeated sending problem

<!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 sends AJAX request

AJAX in jQuery

get request

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

post request

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

General method ajax, but get post is more concise

//例如：
//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 sends AJAX via method

Code example:

<!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 sends AJAX request

Axios is currently the most popular front-end AJAX tool library.

24. Axios function sends AJAX request

<!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. Use the fetch function to send an AJAX request

The global fetch()method is used to initiate resource requests. It returns a promise, this promise will be resolved after the request response, and returns Responsethe object.

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

In actual use, axios sends mostly ajax requests, and fetch rarely.

26. Same Origin Policy

The Same-Origin Policy (Same-Origin Policy) was first proposed by Netscape, and it is a security policy for browsers.
Same origin: the protocols, domain names, and port numbers must be exactly the same.
Violation of the same-origin policy is cross-domain.
Example: Demonstrating the same-origin policy

<!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. Implementation principle of jsonp

How to solve cross domain?
JSONP
1) What is JSONP?
- JSONP (JSON with Padding) is an unofficial cross-domain solution developed purely by splicing the ingenuity of programmers, and only supports get requests.
2) How does JSONP work?
- Some tags on web pages are inherently cross-domain capable, such as: img link iframe script
- JSONP uses the cross-domain capabilities of script tags to send requests.

3) Use of JSONP

dynamically create a script tag

var script = document.createElement('script')

Set the src of the script and set the callback function

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

Add script to body
```
document.body.appendChild(script);
```

Routing in the server

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

Code example:

<!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 practice

<!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 sends jsonp request

<!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. Set the CORS response header to achieve cross-domain

What is CORS?
- CORS (Cross-Origin Resource Sharing), cross-domain resource sharing. CORS is the official cross-origin solution
  
  It is characterized in that it does not need to do any special operations on the client side, it is completely processed in the server, and supports
  
  get and post requests. The Cross-Origin Resource Sharing standard adds a new set of HTTP header fields that allow servers to declare which
  
  Which resources the origin site has permission to access through the browser.
How does CORS work?
- CORS tells the browser by setting a response header that the request allows cross-domain, and the browser receives the response
  
  The response will be released later.

Use of CORS

Mainly server-side settings:
The returned by the server Access-Control-Allow-Origin: *indicates that the resource can be accessed by any foreign domain.
Access-Control-Allow-HeadersThe header field is used in the response to the preflight request. It specifies the header fields that are allowed to be carried in the actual request.
Access-Control-Allow-MethodsThe header field is used in the response to the preflight request. It specifies the HTTP methods allowed for the actual request.

//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 study notes] AJAX | nodejs | express | jsonp | cross-domain

Table of contents