AJAX案例

最新推荐文章于 2024-09-22 21:46:54 发布

Baker-Chen

最新推荐文章于 2024-09-22 21:46:54 发布

阅读量149

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/m0_51969330/article/details/114099839

版权

同源策略： 协议，域名，端口号必须完全相同。
违背同源策略就是跨域

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

案例代码：

AJAX JS代码

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


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

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
//这里为get方法
app.get('/home1', (request, response) => {
    //设置响应头 设置允许跨域
    //*表示接受所有域名，*号可换成指定地址，仅该地址能访问服务端
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX1');
    //     //响应一个数据
    //     var data = {
    //         name: 'hhh'
    //     };
    //     //对对象进行字符串转换
    //     var str = JSON.stringify(data);
    //     //设置响应体
    //     response.send(str);


});

//post方法
app.post('/home2', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX2');


});

//all方法：可以接受任意类型的请求
app.all('/home3', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    var data = {
        name: 'HELLO AJAX3'
    };
    //对对象进行字符串转换
    var str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//延时响应
app.all('/time', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        //json类型数据
        var data = { name: '爹' };
        response.send(JSON.stringify(data));
        // response.send('HELLO AJAX4');
    }, 2000); //2秒延迟

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


});

//jQuery服务
app.all('/jquery-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    //json数据
    var data = { name: '爹' };
    response.send(JSON.stringify(data));

});

//axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    //json数据
    var data = { name: '爹' };
    response.send(JSON.stringify(data));

});

//fetch服务
app.all('/fetch-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    //允许自定义响应头 *表示所有类型的请求头都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    //json数据
    var data = { name: '爹' };
    response.send(JSON.stringify(data));

});

// jsonp服务
app.all('/jsonp', (request, response) => {
    //使用jsonp跨域，服务端返回的响应体应为js代码
    // 由进行请求的script标签进行编译
    // response.send('console.log("Hello jsonp")');
    var data = {
            name: '爹'
        }
        //将数据转化为字符串
    var str = JSON.stringify(data);
    //返回结果 形式为函数调用
    // 函数要提前声明，函数参数为想要返回的数据
    response.end(`fn(${str})`);
});

// jQuery-jsonp服务
app.all('/jsonp2', (request, response) => {
    var data = {
        name: '爹',
        age: 66
    };

    //将数据转化为字符串
    var str = JSON.stringify(data);
    // 接收callback参数
    var cb = request.query.callback;

    //返回结果 形式为函数调用
    // 函数要提前声明，函数参数为想要返回的数据
    response.end(`${cb}(${str})`);
});

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

1.标准方法发送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: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        var btn = document.getElementsByTagName('button');
        var result = document.querySelector('#result');
        //将xhr变量写到外部便于两个按钮都能用
        var xhr = null;
        //标识变量，解决重复请求问题
        var isSending = false; //是否正在发送请求 false未，true正在
        //绑定事件
        btn[0].onclick = function() {
                //判断标识变量
                if (isSending) {
                    //如果上个请求正在发送，则取消上个请求
                    xhr.abort()
                };

                //AJAX操作
                //1.创建对象
                xhr = new XMLHttpRequest(); //xhr为自定义名
                //修改 标识变量
                isSending = true;

                //设置响应体数据类型 自动将服务端数据转换成json数据
                // xhr.responseType = 'json';

                //超时设置 2s设置
                // xhr.timeout = 2000;
                //超时回调
                // xhr.ontimeout = function() {
                //     alert('请求超时！');
                // };
                //网络异常回调
                xhr.onerror = function() {
                    //网络未连接时提醒
                    alert('您的网络异常！');
                };

                //2.初始化 设置请求的方法(这里方法为GET)和url
                xhr.open("GET", "http://127.0.0.1:1000/home1");

                //用下条代码解决ie浏览器缓存问题
                // xhr.open("GET", 'http://127.0.0.1:1000/home?t='+Date.now());

                //post方法如下
                // xhr.open("POST", "http://127.0.0.1:1000/home");

                //url后可以加GET请求参数 如下
                // xhr.open("GET", "http://127.0.0.1:1000/home?a=100&b=200");

                //设置请求头
                // xhr.setRequestHeader('头的名字', '值');

                //3.发送
                xhr.send();
                //请求体可以发送post请求参数
                // xhr.send('a=100&b=200&...');
                // xhr.send('a:100&b:200&...');
                // xhr.send('123');

                //4.事件绑定 处理服务端返回的结果
                xhr.onreadystatechange = function() {

                    //判断 (服务端返回了所有的结果)
                    if (xhr.readyState === 4) {
                        //修改标识变量
                        isSending = false;
                        //判断响应状态码  200 404 403 401 500
                        if (xhr.status >= 200 && xhr.status < 300) {

                            //处理结果 行 头 空行 体
                            // console.log(xhr.status); //状态码
                            // console.log(xhr.statusText); //状态字符串
                            // console.log(xhr.getAllResponseHeaders); //所有响应头
                            // console.log(xhr.response); //响应体

                            //手动对数据转化
                            // var data=JSON.parse(xhr.response);
                            // result.innerHTML=data.name;  

                            //设置result文本
                            result.innerHTML = xhr.response;

                        } else {

                        }
                    }
                }

            }
            //abort方法，取消请求
        btn[1].onclick = function() {
            xhr.abort();
        }
    </script>
</body>

</html>

2.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>
    <!-- 引入cdn 远程jQuery -->
    <!-- crossorigin="anonymous"为跨源请求的属性设置 -->

    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>

    </style>
</head>

<body>
    <button>点击发送请求1</button>
    <button>点击发送请求2</button>

    <script>
        //get，post发送请求
        $('button').eq(0).click(function() {
                //发送get请求  发送post请求只需把get改为post
                //第一个参数给谁发
                //第二个参数为发送的参数，对象格式
                //第三个参数是一个回调，回调函数中的参数为响应体
                //第四个参数为响应体类型
                $.get('http://127.0.0.1:1000/jquery-server', {
                    a: 100,
                    b: 200
                }, function(date) {
                    console.log(date);
                }, 'json');
            })
            //jQuery通用方法，Ajax方法发送请求
        $('button').eq(1).click(function() {
            $.ajax({
                //url
                url: 'http://127.0.0.1:1000/time',
                //参数 对象格式
                data: {
                    a: 100,
                    b: 200
                },
                //请求类型
                type: 'GET',
                //响应体结果类型
                dataType: 'json',
                //成功的回调
                success: function(data) {
                    console.log(data);

                },
                //超时时间
                timeout: 5000,
                //失败的回调
                error: function() {
                    console.log('出错了！');
                },
                //头信息 自定义的头信息
                headers: {
                    c: 300,
                    d: 400
                }

            })
        })
    </script>
</body>

</html>

3.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>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>

<body>
    <button>GET点击发送1</button>
    <button>post点击发送2</button>
    <button>AJAX通用点击发送3</button>
    <script>
        var btns = document.querySelectorAll('button');
        //配置baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:1000';
        btns[0].onclick = function() {
            //GET 请求
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 1
                },
                //请求头信息
                headers: {
                    name: 'die',
                    age: 18
                }
            }).then(value => {
                console.log(value);
            })
        };
        btns[1].onclick = function() {
            //post 请求
            //第二个参数为请求体信息，第三个参数才是其它配置
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url参数
                params: {
                    id: 100,
                    vip: 1
                },
                //请求头信息
                headers: {
                    height: 180,
                    weight: 200,
                },

            }).then(value => {
                console.log(value);
            })
        };
        btns[2].onclick = function() {
            axios({
                //请求方法
                method: 'POST',
                //url
                url: '/axios-server',
                // url参数
                params: {
                    a: 10,
                    b: 20
                },
                //头信息
                headers: {
                    c: 200,
                    b: 3000
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response => {
                //全部信息
                console.log(response);
                //响应状态码
                console.log(response.status);
                // 响应状态字符串
                console.log(response.statusText);
                // 响应头信息
                console.log(response.headers);
                // 响应体
                console.log(response.data);
            })
        }
    </script>

</body>

</html>

4.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>请求</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            // ?c=10 ?后为参数
            fetch('http://127.0.0.1:1000/fetch-server?c=10', {
                //请求方法
                method: 'POST',
                // 请求头
                headers: {
                    name: '666'
                },
                // 请求体
                body: 'a=100&b=200'
            }).then(response => {
                // json为fetch中的一个方法，可以获得json数据
                return response.json();
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

</html>

5.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>jsonp跨域</title>
    <style>
        #thisdiv {
            height: 200px;
            width: 200px;
            border: solid 2px #90b;
        }
    </style>
</head>

<body>
    <div id="thisdiv"></div>
    <script>
        //处理数据
        function fn(data) {
            var div = document.querySelector('#thisdiv');
            div.innerHTML = data.name;
        }
        // 用script标签进行跨域时在script标签内时这样写
        // 1.创建script标签
        // var script = document.createElement('script');
        // 2.设置script标签src
        // script.src = 'http://127.0.0.1:1000/jsonp';
        // 3.将script标签插入文档中
        // document.body.appendChild(script);
    </script>
    <!-- 用script标签进行跨域时在script标签外时这样写 -->
    <script src="http://127.0.0.1:1000/jsonp"></script>



</body>

</html>

6.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>
        #dddd {
            width: 200px;
            height: 200px;
            border: solid 3px #90c;
        }
    </style>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <button>点击发送jsonp请求</button>
    <div id="dddd"></div>
    <script>
        $('button').eq(0).click(function() {
            // callback=?参数为固定形式
            $.getJSON('http://127.0.0.1:1000/jsonp2?callback=?', function(data) {
                $('#dddd').html(`
                    名称:${data.name},
                    年龄:${data.age}
                `)
            });
        });
    </script>
</body>

</html>