ajax学习记录2，fecth函数发送ajax请求， jQuery发送AJAX请求，同源策略，原生jsonp实践，使用jQuery发送jsonp请求，CORS

最新推荐文章于 2024-09-24 11:46:44 发布

小婵婵不怕鬼

最新推荐文章于 2024-09-24 11:46:44 发布

阅读量217

点赞数 2

分类专栏： ajax 文章标签： ajax jquery 学习

本文链接：https://blog.csdn.net/qq_49080239/article/details/125973085

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了前端与后台交互的三种常见方式：AJAX、JSONP和CORS。通过示例代码展示了它们的使用方法，包括fetch API和jQuery的实现。同时，解释了同源策略、JSONP的工作原理以及CORS的配置，帮助读者深入理解跨域请求的处理机制。

摘要由CSDN通过智能技术生成

fecth函数发送ajax请求：

const btn = document.getElementsByTagName('button');
    btn[0].onclick = function () {
        fetch("http://127.0.0.1:8000/fetch-server?vip=10",{
            method:"POST",
            headers:{
                name:"lw",
                age:211
            },
            //请求体
            body:"username=lww&password=lw"
        }).then(response=>{
            return response.text();
            //return response.json();
        }).then(response=>{
            console.log(response);
        })
    }

jQuery发送AJAX请求：

//GET请求
    $('button').eq(0).click(function () {
        $.get('http://127.0.0.1:8000/jquery-server',{
            a:100,b:1000
        },function (data) {//响应体
            console.log(data);
        },'json')//返回JSON类型
    })
    //POST请求
    $('button').eq(1).click(function () {
        $.post('http://127.0.0.1:8000/jquery-server',{
            a:100,b:1000
        },function (data) {//响应体
            console.log(data);
        })
    })
    //通用型方法ajax
    $('button').eq(2).click(function () {
        $.ajax({
           //url
           url: 'http://127.0.0.1:8000/jquery-server',
            //参数
            data:{a:100,b:200},
            //请求类型
            type:'GET',
            //响应体结果设置
            dataType:'json',
            //成功的回调
            success:function (data) {
                console.log(data);
            },
            //超时时间
            timeout:2000,
            //失败的回调
            error:function () {
                console.log('出错了!');
            },
            //头信息设置
            headers:{
               name:"lw",
                password:"lww"
            }
        });
    })

同源策略

同源策略（Same-Origin Policy）最早是由Netscape公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。
jsonp实现原理：

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

<script>
    //处理数据
    function handle(data) {
        const result = document.getElementById("result");
        result.innerHTML = data.name;
    }
</script>
<script src="http://127.0.0.1:8000/jsonp-server"> </script>

原生jsonp实践：

//实践
app.all('/check-username',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    const data = {
        exist:1,
        msg:"用户名已存在"
    }
    let str = JSON.stringify(data);
    response.end(`handle(${str})`);
});

<body>
用户名：<input type="text" id="username">
<p id="ag"></p>
<script>
    //获取元素
    const input = document.getElementById("username");
    const p = document.getElementById("ag");
    //绑定丧失焦点事件
    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-username";
        //3、将script插入到文档中
        document.body.appendChild(script);
    }

    //声明handle函数
    function handle(data){
        input.style.border = "solid 1px red";
        //修改p标签的提示文本
        p.innerHTML = data.msg;
        p.style.color = "red";
    }
</script>
</body>

在这里插入图片描述
使用jQuery发送jsonp请求

//jq发送jsonp
app.all('/jquery-jsonp-server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    const data = {
        name:'lw',
        city:['北京','天津','上海']
    };
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;
    response.end(`${cb}(${str})`);
});

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

CORS

跨域资源共享。

    //设置响应头  设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //任意头部信息
    response.setHeader("Access-Control-Allow-Headers","*");
    //预请求结果缓存
    response.setHeader("Access-Control-Max-Age","delta-seconds");
    //跨域请求时是否携带验证信息
    response.setHeader("Access-Control-Allow-Credentials","true");
    //设置请求允许的方法
    response.setHeader("Access-Control-Allow-Methods","*");
    //暴露头部信息
    response.setHeader("Access-Control-Expose-Headers","*");