AJAX学习日志

转载

mob60475704ea1a 2021-09-08 15:59:00

文章标签 html ajax json jquery 响应头 文章分类 代码人生

AJAX学习笔记及其代码

AJAX

1.Ajax简介

优势：无刷新获取数据，它不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

XML 可扩展标记语言，被设计用来传输和存储数据

JSON用法简洁方便， {"name"：“}

Ajax特点

Ajax优点

可以无需刷新页面岳服务器进行通信

允许你根据用户事件来更新部分页面内容

Ajax缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO不友好

express框架

express安装 -express使用.js 创建

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request 是对请求报文的封装
// response  是对响应报文的封装
app.get('/',(request,response)=>{
// 设置响应
response.send('hello express');
});
// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动了，8000端口监听中....");
})

 npm init --yes           
 npm i express
 node + express使用.js  
127.0.0.1：8000

案例准备

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

创建页面 get.html

<!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: 1px solid #90b;
        }
    </style>
</head>

<body>
    <button> 点击发送请求</button>
    <div id="result"></div>
</body>

</html>

node 命令行输入

  node server.js   
  http://127.0.0.1:8000/server

AJAX请求的基本操作

HTML--CSS--JS--ES6--node-ajax-vue/react

编写界面

<!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: 1px solid #90b;
        }
    </style>
</head>

<body>
    <button> 点击发送请求</button>
    <div id="result"></div>
    <script>
        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:8000/server');
            //3.发送
            xhr.send();
            // 4.事件绑定,处理服务端返回的结果
            //on when 当...时候
            // readystate 是xhr 对象中的属性，表示状态 0  1 2 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>

node操作

 node server.js   启动服务端口
 浏览器中允许 HTML文件  点击按钮 network中即可查看 请求头、响应头、响应体

AJAX设置请求参数

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

如下图

AJAX中的POST操作及其设置参数请求体

创建POST操作的HTML

<!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: 200px;
            height: 100px;
            border: 1px solid #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            // console.log('test');
            //1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化 设置类型与URL
            xhr.open('POST', 'HTTP://127.0.0.1:8000/server');
            //3.发送
            //这个即就是 post设置请求体
            // xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            xhr.send("12345678");
            //4. 事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>

</html>

创建适用于POST方式的server.js文件

app.post('/server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('AJAX POST by xiao tian~');
});

AJAX设置请求头信息

HTML文件

<!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: 200px;
            height: 100px;
            border: 1px solid #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            // console.log('test');
            //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');
            xhr.setRequestHeader('name', 'xiaotian');
            // 身份校验的信息放在头，把它传递给服务器，由服务器对参数做提取，对用户的身份做校验
            //3.发送
            // xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            xhr.send("12345678");
            //4. 事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>

</html>

server.js文件

app.all('/server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers','*');
// 设置响应体
response.send('AJAX POST by xiao tian~');
});

AJAX-服务端响应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>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #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;
                        //1.手动对数据进行转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        //2.自动转化
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>

</html>

json server.js文件

app.all('/json-server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据
    const data={
        name:'xiao~tian~'
    };
    //对对象进行字符串的转化
    let str=JSON.stringify(data);
// 设置响应体
// send中只能接受 字符串和巴特
response.send(str);
});

AJAX -IE缓存问题

解决IE缓存问题HTML

<!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>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #25b;
        }
    </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>

ie-server.js

//针对IE缓存问题
app.get('/ie',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('hello IE2');
});

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>Document</title>
</head>

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btn = document.querySelectorAll('button');
        let x = null;
        //这里不使用const  因为 使用const，值会变更，导致报错
        btn[0].onclick = function () {
            x = new XMLHttpRequest();
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
        }
        //abort
        btn[1].onclick = function () {
            x.abort();
        }
    </script>
</body>

</html>

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>AJAX请求超时与网络异常问题</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #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();
            //超时设置
            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>

delay.js

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

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>重复请求</title>
</head>

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btn = document.querySelectorAll('button');
        let x = null;
        // 标识变量
        let isSending = false; //是否正在发送AJAX请求
        btn[0].onclick = function () {
            //判断标识变量
            if (isSending) x.abort(); //如果正在发送，则取消该请求，创建一个新的请求
            isSending = true;
            x = new XMLHttpRequest();
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
            //请求完成后 关闭
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    //修改标识变量
                    isSending = false;
                }
            }
        }
        //abort
        btn[1].oncclick = function () {
            x.abort();
        }
    </script>
</body>

</html>

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 crossorigin="anonymous" rel="stylesheet"
        href="http://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-headaer">JQUERY 发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法</button>
    </div>
    <script>
        $('button').eq(0).click(function () {
            $.get('http://127.0.0.1:8000/jquery-server', {
                a: 100,
                b: 200
            }, function (data) {
                console.log(data);
            }, 'JSON');
        })
        $('button').eq(1).click(function () {
            $.post('http://127.0.0.1:8000/jquery-server', {
                a: 100,
                b: 200
            }, function (data) {
                console.log(data);
            })
        })
    </script>
</body>

</html>

jquery-server.js

//jquery 服务
app.all('/jquery-server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(()=>{
    // 设置响应体
    // response.send('hello jquery-ajax');
    const data={name:'xiao~tian~'};
    response.send(JSON.stringify(data));
},3000)
});

AJAX-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 crossorigin="anonymous" rel="stylesheet"
        href="http://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-headaer">JQUERY 发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法</button>
    </div>
    <script>
        $('button').eq(0).click(function () {
            $.get('http://127.0.0.1:8000/jquery-server', {
                a: 100,
                b: 200
            }, function (data) {
                console.log(data);
            }, 'JSON');
        })
        $('button').eq(1).click(function () {
            $.post('http://127.0.0.1:8000/jquery-server', {
                a: 100,
                b: 200
            }, function (data) {
                console.log(data);
            })
        })
        $('button').eq(2).click(function () {
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {
                    a: 100,
                    b: 200
                },
                //请求资源
                type: 'GET',
                //成功的回调
                success: function (data) {
                    console.log(data);
                },
                // 超时时间
                timeout: 2000,
                // 失败的回调
                error: function () {
                    console.log('出错啦');
                },
                //头信息
                headers: {
                    c: 300,
                    d: 400
                }
            });
        })
    </script>
</body>

</html>

JS文件

app.all('/jquery-server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
     // 响应头
     response.setHeader('Access-Control-Allow-Headers','*');
// setTimeout(()=>{
    // 设置响应体
    // response.send('hello jquery-ajax');
    const data={name:'xiao~tian~'};
    response.send(JSON.stringify(data));
// },3000)
});

AJAX-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 crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btn = document.getElementsByTagName('button');
        //配置baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btn[0].onclick = function () {
            //GET请求
            axios.get('/axios-server', {
                //url
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'xiao tian~',
                    age: '20',
                    school: 'xaau university'
                }
            }).then(value => {
                console.log(value);
            });
        }
        btn[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'TIAN ~',
                password: '123456'
            }, {
                //url
                pagams: {
                    id: 202070517,
                    vip: 9
                },
                //请求参数
                headers: {
                    heignt: 180,
                    weight: 180
                }
                //请求体
            })
        }
        btn[2].onclick = function () {
            axios({
                //请求方法
                method: 'POST',
                //url
                url: '/axios-server',
                //参数
                // url参数
                params: {
                    vip: 10,
                    level: 30
                },
                //头信息
                headers: {
                    a: 200,
                    b: 200
                },
                //请求参数
                data: {
                    username: 'krone',
                    password: '123456'
                }
            }).then(response => {
                // console.log(response);
                //响应状态码
                console.log(response.status);
                // 响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            });
        }
    </script>
</body>

</html>

axios.js

//axios服务
app.all('/axios-server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
     // 响应头
     response.setHeader('Access-Control-Allow-Headers','*');
    // 设置响应体
    const data={name:'xiao~tian~'};
    response.send(JSON.stringify(data));
});

AJAX-fetch

<!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</title>
</head>

<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function () {
            //fetch中有2个值  url 
            fetch('http://127.0.0.1:8000/fetch-server', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name: 'check~'
                },
                // 请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                //若服务端返回结果为json 则 
                return response.json();
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

</html>

fethc-server.js

//fetch服务
app.all('/fetch-server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
     // 响应头
     response.setHeader('Access-Control-Allow-Headers','*');
    // 设置响应体
    const data={name:'xiao~tian~'};
    response.send(JSON.stringify(data));
});

同源策略(Same-Origin)

同源：协议、域名、端口号必须与服务器url的完全相同

违背同源策略的就是跨域

同源策略html

<!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>
    <h1>小田的同源测试</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function () {
            const x = new XMLHttpRequest();
            //这里简写，是因为满足同源策略
            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>

Sameorigin.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('服务已经启动...');
})

执行是在 127.0.0.1:9000/home界面点击按钮获取用户数据，控制台则输出用户数据

AJAX-JSONP实现原理

JSONP 是一个非官方的跨域解决方案，

在网页上有一些标签天生就具有跨域的能力， img link iframe script

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

JSONP使用

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

var script=document.createElement("script");

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

script.src="http://localhost:3000/testAJAX?callback=abc",

<!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: 1px solid #78b;
        }
    </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/JSONP/app.js">
    </script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

</html>

server.js

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

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>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: 1px solid #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>
        $('button').eq(0).click(function () {
            $.getJSON('http://127.0.0.1:8000/jqeury-jsonp-server?callback=?', function (data) {
                $('#result').html(`
                   名称：${data.name}<br>
                   校区: ${data.city[0]}
               `)
            })
        });
    </script>
</body>

</html>

server.js

//JQuery-jsonp请求服务
app.all('/jqeury-jsonp-server',(request,response)=>{
    // response.send('hi jsonp-server');
    const data={
     name:'xiao~tian~',
     city:['沣惠','阎良']
    };
    // 将数据转化为字符串
    let str=JSON.stringify(data);
    //接受callback参数
    let cb=request.query.callback;
    //返回结果
    response.end(`${cb}(${str})`);
})

返回结果

设置CORS响应头实现跨域

CORS (Cross-Origin Response Sharing),跨域资源共享

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

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

Cors文件

<!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 () {
            //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>

cors.js

//Cors请求服务
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.send('cors-server');
    
})

结果

喜欢阳光，更喜欢你~

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：JS实现双击内容变为可编辑状态

下一篇：Android——Intent

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯