小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

Ajax和Axios

作者：小丑西瓜9 | 2024-06-02 17:11:13

踩

axios

Ajax

1、原生Ajax

1、Ajax简介

Ajax全称为Asynchronous JavaScript And XML ，就是异步的JS和XML
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据，AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

2、XML简介

XML可扩展标记语言。

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

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

比如说我有一个学生数据：
name="孙悟空",age=18,gender="男";
用XML表示：
<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>
1
2
3
4
5
6
7
8

现在已经被JSON取代了

用JSON表示：
{"name":"孙悟空","age":18,"gender":"男"}
1
2

3、AJAX的特点

1、优点

（1）可以无需刷新页面与服务器端进行通信
（2）运行你根据用户事件来更新部分页面内容
1
2

2、缺点

（1）没有浏览历史，不能回退
（2）存在跨域问题（同源）
（3）SEO不友好
1
2
3

4、AJAX的使用

1、HTTP

HTTP（hypertext transport protocol）协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则

1、什么是Http协议

1、什么是协议？
协议就是指双方，或多方，相互约定好，大家都需要遵守的规则，叫协议
2、所谓Http协议就是指客户端和服务器之间通信时，发送的数据，需要遵守的规则，叫Http协议
3、Http协议中的数据又叫报文。
1
2
3
4

2、请求的Http协议格式

1、客户端给服务器发送数据叫请求
2、服务器给客户端回传数据叫响应
3、请求又分GET请求和POST请求两种。
1
2
3

1、GET请求
（1）请求行
*请求的方式     GET
*请求的资源路径[+?+请求参数]
*请求的协议的版本号	HTTP/1.1
（2）请求头
*key:value 组成，不同的键值对，表示不同的含义
1
2
3
4
5
6
7

2、POST请求
（1）请求行
*请求的方式 POST
*请求的资源路径[+?+请求参数]
*请求的协议的版本号
（2）请求头
*key:value  不同的请求头，有不同的含义
空行
（3）请求体
就是发送给服务器的数据
1
2
3
4
5
6
7
8
9
10

3、常用请求头的说明

Accept：表示客户端能够接受的数据类型
Accept—Language：表示客户端可以接收的语言类型
User-Agent：表示客户端浏览器的信息
Host：表示请求时的服务器ip和端口号
1
2
3
4

4、哪些是GET请求和POST请求？

GET请求有哪些？
1、form标签 method=get
2、a标签
3、link标签引入css
4、Script 标签引入js文件
5、img标签引入图片
6、iframe标签引入html页面
7、在浏览器地址栏中输入地址后回车
1
2
3
4
5
6
7
8

POST请求有哪些？
1、form标签 method=post
1
2

5、响应的HTTP协议格式

1、响应行
*响应的协议和版本号
*响应状态码
*响应状态描述符
2、响应头
*key:value 不同的响应头，有不同的含义
空行
3、响应体
*就是回传给客户端的数据
1
2
3
4
5
6
7
8
9

6、常用的响应码说明

200 表示请求成功
302 表示请求重定向
403 表示禁止
401 表示未授权
404 表示请求服务器已经收到了，但是你要的数据不存在（请求地址错误）
500 表示服务器已经收到请求，但是服务器内部错误（代码错误）
1
2
3
4
5
6

7、MIME类型说明

MIME是HTTP协议中的数据类型

MIME的英文全称是“Multipurpose Internet Mall Extensions”多功能Internet邮件扩充服务。MIME类型的格式是“大类型/小类型”，并与一种文件的扩展名相对应。

常见的MIME类型：

文件	MIME类型
超文本标记语言文本	.html htm text/html
普通文本	.txt text/plain
RTF文本	.rtf application/trf
GIF图形	.gif image/gif
JPEG图形	.jpeg .jpg image/jpeg
au声音文件	.au audio/base
MIDI音乐文件	mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件	.ra .ram audio/x-pn-realaudio
MPEG文件	.mpg .mpeg video/mpeg
AVI文件	.avi video/x-msvideo
GZIP文件	.gz application/x-gzip
TAR文件	.tar application/x-tar

2、express框架

写一个简易的服务器

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
app.get("/",(request,response)=>{
    // 设置响应
    response.send('HELLO EXPRESS')
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、get请求

<!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 GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        // 绑定事件
        btn.onclick=function(){
            // console.log('test');
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化 设置请求方法和url
            xhr.open('GET','http://localhost:8000/server?a=100&b=200&c=300');
            // 3、发送
            xhr.send();
            // 4、事件绑定，处理服务端返回的结果
            /* 
                on when 当.....时候
                readystate 是xhr对象中的属性，表示状态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、响应行
                        /* console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体 */
                        // 设置result文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
app.get("/server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO AJAX');
});
// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4、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>
</head>
<style>
    #result{
        width: 200px;
        height: 100px;
        border: solid 1px #903;
    }
</style>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById('result');
        // 绑定事件
        result.addEventListener('mouseover',()=>{
            // console.log('test');
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化请求方式 和url
            xhr.open('POST','http://localhost:8000/server');
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','xiaolin');
            // 3、发送
            // xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            xhr.send('1111');
            // 4、事件绑定
            xhr.onreadystatechange =function(){
                // 判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        // 处理服务端返回结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5、json数据

<!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>JSON 响应</title>
</head>
<style>
    #result{
        width: 200px;
        height: 100px;
        border: solid 1px #89b;
    }
</style>
<body>
    <div id="result"></div>
    <script>
       /获取元素对象 /
        const result = document.getElementById('result');
        // 绑定事件
       window.onkeydown = function(){
            // console.log('test');
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 设置响应体数据的类型
            xhr.responseType = 'json';
            // 2、初始化请求方式 和url
            xhr.open('GET','http://localhost:8000/json-server');
            // 3、发送
            xhr.send();
            // 4、事件绑定
            xhr.onreadystatechange =function(){
                // 判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        // 处理服务端返回结果
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 手动对数据进行转换
                        /* let data  = JSON.parse(xhr.response);
                        console.log(data);
                        result.innerHTML = "姓名："+data.name; */
                        // 自动转换
                        result.innerHTML="姓名："+xhr.response.name; 
                    }
                }
            }
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

7、服务器js代码重新启动问题

下载nodemon

npm install -g nodemon
1

运行

nodemon server.js
1

若遇到禁止运行脚本，请以管理员身份打开vscode

在终端运行

set-ExecutionPolicy RemoteSigned
1

8、ie浏览器缓存问题

<!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>IE缓存问题</title>
</head>
<style>
    #result{
        width: 200px;
        height: 100px;
        border: solid 1px #258;
    }
</style>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
       /获取元素对象 /
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        // 绑定事件
        btn.addEventListener('click',()=>{
            // console.log('test');
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化请求方式 和url
            xhr.open('GET','http://localhost:8000/ie?t='+Date.now());
            // 3、发送
            xhr.send();
            // 4、事件绑定
            xhr.onreadystatechange =function(){
                // 判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        result.innerHTML=xhr.response; 
                    }
                }
            }
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

9、请求超时与网络异常

<!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>请求超时与网络异常</title>
</head>
<style>
    #result{
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
    }
</style>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        // 绑定事件
        btn.addEventListener('click',()=>{
            const xhr = new XMLHttpRequest();
            // 超时设置
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout=()=>{
                alert('网络异常，请稍后重试！');
            }
            // 网络异常回调
            xhr.onerror = ()=>{
                alert("你的网络似乎出现了问题，请检查网络状态！");
            }
            xhr.open('GET','http://localhost: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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
app.get("/delay",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    setTimeout(()=>{
        // 设置响应体
        response.send('延时响应');
    },3000)
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

10、取消请求

<!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>IE缓存问题</title>
</head>
<style>
</style>
<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <script>
        const btns = document.getElementsByTagName('button');
        // 绑定事件
        let xhr = null;
        btns[0].addEventListener('click',()=>{
            xhr = new XMLHttpRequest();
            xhr.open('GET','http://localhost:8000/delay');
            xhr.send();
            xhr.onreadystatechange =function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        alert(xhr.response); 
                    }
                }
            }
        });

        // abort
        btns[1].addEventListener('click',()=>{
            xhr.abort();
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

11、重复请求问题

<!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>重复请求问题</title>
</head>
<style>
</style>
<body>
    <button>点击发送请求</button>
    <script>
        const btns = document.getElementsByTagName('button');
        
        let xhr = null;
        // 标识变量
        let isSending = false;//是否正在发送请求
        // 绑定事件
        btns[0].addEventListener('click',()=>{
            if(isSending) xhr.abort();//如果正在发送，则取消该请求，创建一个新的请求
            xhr = new XMLHttpRequest();
            // 修改标识变量值
            isSending = true;
            xhr.open('GET','http://localhost:8000/delay');
            xhr.send();
            xhr.onreadystatechange =function(){
                if(xhr.readyState===4){
                    // 修改标识变量
                    isSending = false;

                    if(xhr.status>=200&&xhr.status<300){
                        alert(xhr.response); 
                    }
                }
            }
        });

        // abort
        btns[1].addEventListener('click',()=>{
            xhr.abort();
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

2、jQuery中的AJAX

1、jQuery发送AJAX请求

<!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>jQuery 发送 AJAX 请求</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://localhost:8000/jQuery-server',{a:100,b:200},(data)=>{
                console.log(data);
            },'json')
        })

        $('button').eq(1).click(function(){
            $.post('http://localhost:8000/jQuery-server',{a:100,b:200},(data)=>{
                console.log(data);
            })
        })

        $('button').eq(2).click(function(){
            $.ajax({
                url: 'http://localhost: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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    response.send(JSON.stringify(data));
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

3、Axios中的AJAX

1、axios发送ajax请求

<!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>axios 发送 AJAX 请求</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button');

        // 配置baseURL
        axios.defaults.baseURL = 'http://localhost:8000';
        btns[0].onclick = function(){
            // GET请求
            axios.get('/axios-server',{
                // url参数
                params:{
                    id:100,
                    vip:999,
                },
                // 请求头信息
                headers:{
                    name:'xiaolin',
                    age:21
                }
            }).then(value=>{
                console.log(value);
            });
        }

        btns[1].onclick = function(){
            // POST请求
            axios.post('/axios-server',{
                    username:'admin',
                    password:'admin'
                },{
                // url参数
                params:{
                    id:100,
                    vip:999,
                },
                // 请求头信息
                headers:{
                    class:'20ruaner',
                    sno:20251104260
                }
            }).then(value=>{
                console.log(value);
            });
        }

        btns[2].onclick = function(){
            axios({
                // 请求方法
                method : 'POST',
                url:'/axios-server',
                // url参数
                params:{
                    vip:10,
                    level:30
                },
                // 头信息
                headers:{
                    a:100,
                    b:200
                },
                // 请求体参数
                data:{
                    username:'admin',
                    password:'admin'
                }
            }).then((response)=>{
                console.log(response);
            });
        }


    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    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:'xiaolin'}
    response.send(JSON.stringify(data));
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

4、fetch中的AJAX

1、fetch发送ajax请求

<!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>fetch发送 ajax请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            fetch('http://localhost:8000/fetch-server?vip=10',{
                method:'POSt',
                headers:{
                    name:'xiaolin'
                },
                // 请求体
                body:'username=admin&password=admin'
            }).then(response=>{
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    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:'xiaolin'}
    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:'xiaolin'}
    response.send(JSON.stringify(data));
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

5、跨域

1、同源策略

同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号、必须完全相同

违背同源策略就是跨域

2、如何解决跨域

1、JSONP

1、JSONP是什么？
	JSONP（JSON with Padding），是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，只支持get请求
2、JSONP怎么工作的？
	在网页有一些标签天生具有跨域的能力，比如：img link iframe script
	JSONP就是利用script标签的跨域能力来发送请求的
3、JSON的使用
	1、动态的创建一个script标签
		var script = document.createElement("script");
	2、设置script的src，设置回调函数
		script.src = "http://localhost:3000/testAJAX?callback=abc";
		
1
2
3
4
5
6
7
8
9
10
11

原理

<!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>原理演示</title>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 处理数据
        function handle(data){
            // 获取result元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/%E4%BB%A3%E7%A0%81/%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://localhost:8000/jsonp-server"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

app.js

const data={
    name:'xiaolin'
}

// console.log(data);
// 处理数据
/** function handle(data){
    // 获取result元素
    const result = document.getElementById('result');
    result.innerHTML = data.name;
}
**/



handle(data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

server.js

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    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:'xiaolin'}
    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:'xiaolin'}
    response.send(JSON.stringify(data));
});

// jsonp服务
app.all("/jsonp-server",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        name:'xiaolin'
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

案例

<!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>案例</title>
</head>
<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        // 获取input元素
        const input = document.getElementById('username');
        const p = document.querySelector('p');
        // 声明handle函数
        function handle(data){
            input.style.border = 'solid 1px #f00'
            // 修改p标签的提示文本
            p.innerHTML = data.msg;
        }
        // 绑定事件
        input.onblur = function(){
            // 获取用户输入值
            let username = this.value;
            // 向服务端发送请求，检查用户名是否存在
            // 1、创建一个script标签
            const script = document.createElement('script');
            // 2、设置标签的src属性
            script.src = "http://localhost:8000/check-username";
            // 3、将srcipt插入文本中
            document.body.appendChild(script)
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

server.js

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    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:'xiaolin'}
    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:'xiaolin'}
    response.send(JSON.stringify(data));
});

// jsonp服务
app.all("/jsonp-server",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        name:'xiaolin'
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});

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


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

jQuery发送jsonp请求

<!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>jquery-jsonp</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
    
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://localhost:8000/jQuery-jsonp?callback=?',function(data){
                console.log(data);
                $('#result').html(`
                    姓名:${data.name}<br/>
                    学号:${data.sno}
                `);
            });
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

server.js

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    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:'xiaolin'}
    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:'xiaolin'}
    response.send(JSON.stringify(data));
});

// jsonp服务
app.all("/jsonp-server",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        name:'xiaolin'
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});

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

// 用户名检查是否存在
app.all("/jQuery-jsonp",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        name:'xiaolin',
        sno:20251104260
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 接收callback参数
    let cb = request.query.callback;
    // 返回结果
    response.end(`${cb}(${str})`);
});


// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

2、CORS

1、CORS是什么？
	CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解法方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，运行服务器声明哪些源站通过浏览器有权限访问哪些资源。
2、CORS如何工作？
	CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
3、CORS的使用
	主要是服务器端的设置：
	router.get("/testAJAX",function(req,res){
	
	})
1
2
3
4
5
6
7
8
9

<!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>CORS</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button')
        btn.onclick=function(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','http://localhost:8000/cors-server');
            xhr.send();
            xhr.onreadystatechange =function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        console.log(xhr.response);
                    }
                }
            }
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

server.js

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

// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();

// 创建路由规则
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');
});

// json响应
app.all("/json-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应头
    response.setHeader('Access-Control-Allow-Headers',"*")
    // 响应一个数据
    const data = {
        name:'xiaolin'
    };
    // 将对象转换为json字符串
    let str = JSON.stringify(data);
    // 设置响应
    response.send(str);
});

// 针对ie缓存
app.get("/ie",(request,response)=>{
    // 设置响应头 设置运行跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应
    response.send('HELLO IE');
});

// 延时响应
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:'xiaolin'}
    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:'xiaolin'}
    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:'xiaolin'}
    response.send(JSON.stringify(data));
});

// jsonp服务
app.all("/jsonp-server",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        name:'xiaolin'
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});

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

// jQuery-jsonp
app.all("/jQuery-jsonp",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        name:'xiaolin',
        sno:20251104260
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 接收callback参数
    let cb = request.query.callback;
    // 返回结果
    response.end(`${cb}(${str})`);
});

//CORS
app.all("/cors-server",(request,response)=>{
    // 设置响应头 设置运行跨域
    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.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中.....");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/663587