AJAX_jQuery发送ajax请求_fetch函数_解决跨域问题

最新推荐文章于 2023-01-15 14:44:19 发布

liaoai

最新推荐文章于 2023-01-15 14:44:19 发布

阅读量594

点赞数

分类专栏： ajax 文章标签：前端 ajax

本文链接：https://blog.csdn.net/liaoai/article/details/123317149

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、jQuery中的AJAX

1.get请求

$.get(url, [data], [callback], [type])

url：请求的 URL 地址

data：请求携带的参数

callback：载入成功时回调函数。

type：设置返回内容格式（xml, html, script, json, text, _default）

例：

$.get('http://127:0.0.1:8000/jquery-server',{a:100,b:200},function(data){
		console.log(data);
	},'json');
	//在接收时通过设置返回数据格式为json，也可以通过JSON.parse(xhr.response)将数据类型转为json对象

路由规则：

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:'尚硅谷'};
    //send方法的参数类型是字符串，需要先对json数据进行转换
    //在接收时通过设置返回数据格式为json，也可以通过JSON.parse(xhr.response)将数据类型转为json对象
    
    //设置响应体
    response.send(JSON.stringify(data));
});

2.post请求

$.post(url, [data], [callback], [type])

3.通用方法

$.ajax({
	url:					//url				
	data:					//参数
	type:					//请求类型
	dataType:				//响应体结果
	success:function(){}	//成功的回调
	timeout:				//超时时间
	error:function(){}		//失败的回调
	headers:				//头信息
})

script发送请求过去得到的应该是js代码

二、fetch函数

<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick=function(){
            fetch('http://127.0.0.1:8000/fetch-server',{
                method:'POST',
                headers:{
                    name:'孙悟空'
                },
                //请求体
                body:'username=a&password=b'
            }).then(response=>{
         		//字符串格式转化
                return response.text();
                //json格式转化
                //return response.json();
            }).then(response=>{
                console.log(response)
            })
        }
    </script>
</body>

路由规则：

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:'猪八戒'};
    response.send(JSON.stringify(data));
});

三、跨域

1.同源策略

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

2.解决跨域

1）JSONP

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

① JSONP的使用

// 1.动态的创建一个 script 标签
var script = document.createElement("script");
// 2.设置 script 的 src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name);
};
// 3.将 script 添加到 body 中
document.body.appendChild(script);


// 4.服务器中路由的处理
app.all('/jquery-jsonp-server',(request,response)=>{
    const data = {
        name:'孙悟空',
        age:18
    };
    //数据转化为字符串
    let str = JSON.stringify(data);
    //接收callback参数
    let callback = request.query.callback;
    //返回结果
    response.send(callback+"("+JSON.stringify(obj)+")");
});

② 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: solid 1px #089;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="result"></div>

    <script>
        $('button').eq(0).click(function(){
            //固定写法?callback=?
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                $('#result').html(`${data.name},${data.age}`)
            })
        })
    </script>
</body>
</html>

2）CORS

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

主要是对服务器端的设置

app.all('/xx',(request,response)=>{
    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send("返回的响应");
});

liaoai

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX_jQuery发送ajax请求_fetch函数_解决跨域问题

文章目录一、jQuery中的AJAX1.get请求2.post请求3.通用方法二、fetch函数三、跨域1.同源策略2.解决跨域1）JSONP① JSONP的使用② jQuery中的JSONP2）CORS一、jQuery中的AJAX1.get请求$.get(url, [data], [callback], [type])url：请求的 URL 地址data：请求携带的参数callback：载入成功时回调函数。type：设置返回内容格式（xml, html, script, json, tex
复制链接

扫一扫