AJAX

最新推荐文章于 2025-05-19 23:45:27 发布
最新推荐文章于 2025-05-19 23:45:27 发布
阅读量3.3k 收藏 105
点赞数 30
分类专栏： 前端 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45632660/article/details/109823169
版权

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>

现在已经被JSON取代了。

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

3、AJAX的特点

3.1、AJAX的优点

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

3.2、AJAX的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO不友好，(SEO意思: 是搜索引擎优化)

4、HTTP协议请求与响应的结构

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

4.1、请求报文

HTTP请求格式

在这里插入图片描述

URL包含: 路径和参数

请求报文的构成
在这里插入图片描述

如果是GET请求，请求体为空，如果是POST请求，请求体可以不为空。

4.2、响应报文

HTTP响应格式

在这里插入图片描述

响应报文的构成

在这里插入图片描述

详细请看: https://blog.youkuaiyun.com/a19881029/article/details/14002273

5、Node.js安装

https://blog.youkuaiyun.com/qq_45632660/article/details/107918281

6、express框架

# npm init --yes 初始化
# npm i express 安装express npm如何安装在5博客里面有写。

# 1.引入express
	const express = require('express');
# 2.创建应用对象
	const app = express();

# 3.创建路由规则
# request 是对请求报文的封装
# response 是对响应报文的封装
	app.get('/',(request,response)=>{
		response.send("Hello,express!");
    });

# 4.监听端口启动服务
	app.listen(8080,()=>{
	console.log("服务已经启动，8080端口监听中.....");
	})
	
#  node 文件名.js 启动测试 访问127.0.0.1:8080

6.1、案例准备

GET.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
</body>
</html>

Server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Controll-Allow-Origin','*');

    //设置响应体
    response.send('HELLO AJAX');
});

//4.监听端口启动服务
app.listen(8080,()=>{
	console.log("服务已经启动，8080端口监听中.....");
})

6.2、GET请求(原生)

GET.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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(){
           //1.创建对象
           const xhr = new XMLHttpRequest();
           //2.初始化，设置请求方法和url
           xhr.open('GET','http://127.0.0.1:8080/server');
           //3.发送
           xhr.send();
           //4.事件绑定 处理服务端返回的结果
           // readystate 是xhr对象中的属性，表示状态0,1,2,3,4
           /*
                0: 请求未初始化
                1: 服务器连接已建立
                2: 请求已接收
                3: 请求处理中
                4: 请求已完成，且响应已就绪
           */
           xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && (xhr.status >=200 && xhr.status<300)){
                    // 处理 行 头 空行 体
                    //响应行
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态字符串
                    // console.log(xhr.getAllResponseHeaders());//所有响应头
                    // console.log(xhr.response);//响应体
                    //设置result的文本
                    result.innerHTML = xhr.response;
                }
           } 
        }
    </script>
</body>
</html>

server.js

// 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(8080,()=>{
	console.log("服务已经启动，8080端口监听中.....");
})

6.3、POST请求(原生)

POST.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX 发送POST请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与URL
            xhr.open('POST',"http://127.0.0.1:8000/server");
            //设置请求头信息
             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //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>

server.js

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

6.4、服务器响应JSON数据(原生)

JSON.html

JSON: 后端把JSON对象转换为字符串传递给前端，前端通过JSON把传递过来的字符串转换为对象并输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

server.js

// 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');
// });
app.get('/json-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //响应一个数据
    const data = {
        name: 'atguigu'
    }
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(data);
});

//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

6.5、IE缓存问题(原生)

IE.html

<!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?time='+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>

server.js

// 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');
// });
app.get('/json-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //响应一个数据
    const data = {
        name: 'atguigu'
    }
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(data);
});
app.get('/ie',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应体
    response.send('HELLO IE');
});

//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

6.6、请求异常与网络超时(原生)

html

<!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 #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();
            //超时设置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>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //定时器
    setTimeout(()=>{
        //设置响应体
    response.send('延时响应');
    },3000)
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

6.6、取消发送(原生)

html

<!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 btns = document.querySelectorAll('button');
        
        let x = null;
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
        }
        btns[1].onclick = function(){
            //abort 中止
            x.abort();
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //定时器
    setTimeout(()=>{
        //设置响应体
    response.send('延时响应');
    },3000)
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

6.7、请求重复发送(原生)

html

<!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;
                }
            }
        }

        // abort 中止
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //定时器
    setTimeout(()=>{
        //设置响应体
    response.send('延时响应');
    },3000)
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

7、JQuery

使用JQuery发送AJAX请求

html

<!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 crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.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>
        //使用jquery发送get请求
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
       //使用jquery发送post请求
       $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
       //通用方法(开发常用)
       $("button").eq(2).click(function(){
           $.ajax({
               //url
               url: 'http://127.0.0.1:8000/jquery',
               //参数
               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>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

8、axios

使用axios发送AJAX请求

html

<!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 crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.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',{
                //url参数
                params:{
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers:{
                    name: 'atguigu',
                    age: 20
                }
            }).then(response =>{
                console.log(response)
            })
        }
        //POST请求
        btns[1].onclick = function(){
            axios.post('/axios',{
                username: 'admin',
                password: 'admin',

                //url
                params:{
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            }).then(response=>{
                console.log(response.data);
                console.log(response.headers);

            })
        }
        //通用方法(开发使用)
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{

});
//axios
app.all('/axios',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

9、Fetch

使用fetch发送AJAX请求

html

<!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>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{

});
//axios
app.all('/axios',(request,response)=>{
 
});
//fetch
app.all('/fetch',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

10、跨域

10.1、同源策略

同源策略是早由Netscape公司提出，是浏览器的一种安全策略。

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

违背同源策略就是跨域。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
    <h>尚蛙谷</h><br>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            axios({
                method: 'GET',
                url: 'http://127.0.0.1:9000/data'
            }).then(response =>{
                console.log(response.data);
            })
        }
    </script>
</body>
</html>

server.js

const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    //防止出现跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

10.2、如何解决跨域

10.2.1、JSONP

1.JSONP是什么

​ JSONP是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

2.JSONP怎么工作?

​ 在网页有一些标签天生具有跨域能力，比如: img link iframe script

​ JSONP就是利用script标签的跨域能力来发送请求的。

3.JSONP的使用

​ https://blog.youkuaiyun.com/inite/article/details/80333130

原理

html

<!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) {
            //获取 result 元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%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>

server.js

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

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装


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



//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

实践

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP实践</title>
</head>
<body>
    用户名<input type="text" id="username"></input>
    <p></p>
    <script>
        //获取input元素
        const input = document.querySelector('input');
        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://127.0.0.1:8000/check";
            //3.将script插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

server.js

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

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});




//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

使用jquery完成跨域

html

<!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.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

server.js

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

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'尚硅谷',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});




//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

10.2.2、CORS

1.CORS是什么?

​ CORS,跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

2.CORS怎么工作?

​ CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应执行。

3.CORS的使用

https://blog.youkuaiyun.com/qq22692150/article/details/99011726?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

案例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <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');
        const result = document.getElementById('result');
        btn.onclick = function(){
           axios({
               method: 'GET',
               url: 'http://localhost:8000/cors-server',
           }).then(response =>{
                result.innerHTML = response.data;
           })
        }
    </script>
</body>
</html>

server.js

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

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
});
app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});


//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
AJAX笔记（完结版）
sokoooo的博客
01-10 1414
一、XML 1. XML（可扩展标记语言）：被设计用来传输和存储数据； 2. XML：支持自定义标签，无预定义标签。 3. HTML和XML的区别 1）HTML：超文本标记语言，用于显示数据，不区分大小写； XML：可扩展标记语言，用于传输数据，区分大小写； 2）HTML：预定义标记； XML：自定义标记。 二、AJAX特点 1. 优点： 1）可以直接与服务器端进行通信，而不需要刷新页面； 2）允许根据用户事件来更新部分内容页面； 2. 缺点： 1）没有...
初识Ajax
qq_45901521的博客
03-23 1528
一、客户端与服务器 上网的本质目的：通过互联网的形式来获取和消费资源。 上网过程中，负责存放和对外提供资源的电脑，叫做服务器。 上网过程中，负责获取和消费资源的电脑，叫做客户端。 二、URL地址 URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。 URL地址一般由三部组成： ① 客户端与服务器之间的通信协议 ② 存有该资源的服务器名称 .
json转换对象和字符串，实例解析
陈新科的博客
07-23 398
是ES5.1出来的 JSON.stringify() 转为字符串 JSON.parse() 解析json json的标准写法 1.只能用双引号 2.所有的名字都必须用引号包起来 实例： <body> <div id="result"></div> <script> const result =document.getElementById('result') // 绑定键盘按下事件 window.onkeyd
AJAX的使用及常见问题的处理（AJAX入门到熟练使用）
杨明金的博客
05-29 839
文章目录一、基础知识1.1AJAX简介1.2 AJAX的特点1.2.1 AJAX 的优点1.2.2 AJAX 的缺点1.3 XML简介1.4 HTTP简介1.4.1 请求报文1.4.2 响应报文二、express框架2.1 AJAX-express框架介绍与基本使用2.2 使用nodemon工具三、原生AJAX请求的基本操作3.1 get 请求方式的使用3.2 post 请求方式的使用3.3 服务器响应 JSON 数据3.4 IE浏览器缓存问题解决3.5 请求超时与网络异常处理3.6 AJAX请求取消操作3
路由与ajax（第三天）
qq_46034886的博客
03-04 1129
一、node.js 路由 在一个域名下，会有很多个可访问的地址，这就是路由。 我们呢，要为路由提供请求的URL和其他需要的GET及POST参数，随后路由需要根据这些数据，来决定执行哪些代码。/ 因此，我们要查看HTTP请求，从中提取出来我们需要的URL以及GET/POST参数。 我们需要的这些数据都会包含在request对象中，该对象作为onRequest()回调函数的第一个参数传递。...
AJAX详解
ajiaming的博客
03-16 3457
AJAX全称为，就是异步的 JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
Ajax详解
这河里吗l的博客
06-20 9724
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。Ajax可以实现网页与服务器之间的数据交互AJAX不是编程语言，是一种无需重新载入整个页面，能够更新部分网页的技术。
Ajax
C_hydar的博客
02-11 5741
Ajax Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 用于创造动态性更强的应用程序 Ajax 可用来与数据库进行动态通...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajaxProxy:ajaxProxy 是一个ajax请求发送代理，支持链序请求和阻塞请求
06-03
ajaxProxy ajaxProxy is an ajax request sending proxy, which supports chain order request and blocking request ajaxProxy是一个异步请求的代码发送器，提供一种可读性更好的接口来实现异步请求的流程控制，...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
《黑马前端ajax+node.js+webpack+git教程》（笔记）——ajax教程（axios教程）
Dontla的博客
05-19 833
01.AJAX概念和axios使用
02-前端Web开发(JS+Vue+Ajax)
2301_80368429的博客
05-19 760
在前面的课程中，我们已经学习了HTML、CSS的基础内容，我们知道HTML负责网页的结构，而CSS负责的是网页的表现。而要想让网页具备一定的交互效果，具有一定的动作行为，还得通过JavaScript来实现。那今天,我们就来讲解JavaScript，这门语言会让我们的页面能够和用户进行交互。那什么是JavaScript呢?JavaScriptJS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。
【HTML5】【AJAX的几种封装方法详解】
博文致力于人工智能算法的探索研究；前后端分离项目的技术分享交流；专升本计算机基础课程内容讲解；各种中间件技术分享
05-13 604
本文详细介绍了三种常见的AJAX封装方法，旨在简化异步请求代码，提升开发效率。首先，基于原生XMLHttpRequest的封装方法，通过处理GET请求参数、设置请求头和回调函数，实现了基本的异步请求功能。其次，基于Fetch API的封装方法，利用Promise和默认配置，提供了更简洁的请求方式，并支持请求拦截和错误处理。最后，基于Axios风格的封装方法，通过类的方式实现了请求拦截器和响应拦截器，提供了更灵活的请求配置和扩展性。这些封装方法各有特点，开发者可以根据项目需求选择合适的方式，优化代码结构和性能
《黑马前端ajax+node.js+webpack+git教程》（笔记）——node.js教程+webpack教程（nodejs教程）
最新发布
Dontla的博客
05-19 1046
if (err) {else {console.log('写入成功')})if (err) {else {})/g表示全局匹配默认导出和导入命名导出和导入唯一出口文件index.js不是必须的，如果不存在，就会到package.json中去找定义的入口文件（main属性指定的入口文件）npm i具体参考文章：webpack介绍（现代JS应用静态模块打包工具，在内部构建依赖图，映射项目所需模块，生成打包后的文件）webpack.config.js。
常见病虫识别样本-数据集
05-19
来自2021年软件杯A4赛道的数据集，同时我们自己在网上搜集到了对应害虫的幼虫形态，总共15种害虫，同时对每一种害虫都做了标注，存放在Annotations文件里面。 注意：数据分为图片和Xml文件，xml文件里面是框框的坐标，数据有点少，大家也可以自行添加一点，有几个XML文件是空的。
餐馆点餐管理系统-数据库课程设计-MySQL
05-19
《餐馆点餐管理系统——基于Java和MySQL的课程设计解析》 在信息技术日益发达的今天，餐饮行业的数字化管理已经成为一种趋势。本次课程设计的主题是“餐馆点餐管理系统”，它结合了编程语言Java和数据库管理系统MySQL，旨在帮助初学者理解如何构建一个实际的、具有基本功能的餐饮管理软件。下面，我们将深入探讨这个系统的实现细节及其所涉及的关键知识点。 我们要关注的是数据库设计。在“res_db.sql”文件中，我们可以看到数据库的结构，可能包括菜品表、订单表、顾客信息表等。在MySQL中，我们需要创建这些表格并定义相应的字段，如菜品ID、名称、价格、库存等。此外，还要设置主键、外键来保证数据的一致性和完整性。例如，菜品ID作为主键，确保每个菜品的唯一性；订单表中的顾客ID和菜品ID则作为外键，与顾客信息表和菜品表关联，形成数据间的联系。 接下来，我们来看Java部分。在这个系统中，Java主要负责前端界面的展示和后端逻辑的处理。使用Java Swing或JavaFX库可以创建用户友好的图形用户界面（GUI），让顾客能够方便地浏览菜单、下单。同时，Java还负责与MySQL数据库进行交互，通过JDBC（Java Database Connectivity）API实现数据的增删查改操作。在程序中，我们需要编写SQL语句，比如INSERT用于添加新的菜品信息，SELECT用于查询所有菜品，UPDATE用于更新菜品的价格，DELETE用于删除不再提供的菜品。 在系统设计中，我们还需要考虑一些关键功能的实现。例如，“新增菜品和价格”的功能，需要用户输入菜品信息，然后通过Java程序将这些信息存储到数据库中。在显示所有菜品的功能上，程序需要从数据库获取所有菜品数据，然后在界面上动态生成列表或者表格展示。同时，为了提高用户体验，可能还需要实现搜索和排序功能，允许用户根据菜品名称或价格进行筛选。 另外，安全性也是系统设计的重要一环。在连接数据库时，要避免SQL注入攻击，可以通过预编译的PreparedStatement对象来执行SQL命令。对于用户输入的数据，需要进行验证和过滤，防止非法字符和异常值。 这个“餐馆点餐管理系统”项目涵盖了Java编程、数据库设计与管理、用户界面设计等多个方面，是一个很好的学习实践平台。通过这个项目，初学者不仅可以提升编程技能，还能对数据库管理和软件工程有更深入的理解。在实际开发过程中，还会遇到调试、测试、优化等挑战，这些都是成长为专业开发者不可或缺的经验积累
专业Ajax技术详解
"Wrox.Press.Professional.Ajax" 是一本由Wiley Publishing, Inc.在2006年出版的专业级Ajax技术图书，作者包括Nicholas C. Zakas, Jeremy McPeak和Joe Fawcett。这本书共380页，详细介绍了Ajax的基础及其在Web开发中...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值