Ajax跨域和JSONP

跨域与JSONP

了解同源策略和跨域

同源策略

1.什么是同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

判断下表给出的URL地址与http://www.test.com/index.html页面是否同源

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaJj9q4N-1647429113674)(Ajax笔记.assets/同源的判断.png)]

2.什么是同源策略

同源策略是浏览器提供的一个安全功能。

MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗理解：浏览器规定，A网站的JavaScript，不允许和非同源十五网站C之间，进行资源的交互，例如：

1、无法读取非同源网页的Cookie、LocalStora和IndexedDB

2、无法接触非同源网页的DOM

3、无法向非同源地址发送Ajax请求

跨域

什么是跨域

当两个协议、域名、端口不一致的URL进行交互时，就会出现跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源交互。

例如网页：http://www.test.com/index.html 想要访问接口：http://www.api.com/userlist 里的内容，但以为二者的域名不同，就出现了跨域。

浏览器对跨域请求的拦截

如果不对跨域请求做任何的操作，浏览器就会报错，去阻止你的跨域请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckHR8jDa-1647429113675)(Ajax笔记.assets/浏览器对跨域的拦截.png)]

注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！

如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS。

JSONP：出现的早，兼容性好。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持GET请求，不支持POST请求。

CORS：出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。

JSONP

什么是JSONP

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是< script >标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本

因此，JSONP的实现原理，就是通过< script >标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

剖析JSONP的实现原理

1.先定义函数

<script>
    function abc(data){
        console.log('拿到了Data数据：')
        console.log(data)
    }
</script>

2.通过script标签的src属性去向服务器请求一个函数的调用，同时把函数的名字传过去

<script src="./js/getdata.js?jsoncallback=abc"></script> <!-- 函数的名字通过键值对的形式传递给服务器 -->

3.服务器返回一个函数的调用，在调用里面把数据传进发起请求的页面

abc({name:'ls',age:30})

4.服务器为什么会返回一个函数调用

因为在服务器端程序员用php语言写了一段代码，这段代码就是用来调用函数的，代码如下：（摘自“菜鸟教程”）

<?php
header('Content-type: application/json');
//获取回调函数名(就是第2步里面script标签里写的“jsoncallback=abc”，这个时候jsoncallback就被赋值为了abc)
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); 
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

自己实现一个简单的JSONP

定义一个success回调函数：

<script>
    function success(data){
        console.log('获取到了data数据：')
        console.log(data)
    }
</script>

通过script标签，请求接口数据：

<script src="http://ajax.frontend.itLjh.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

JSONP的缺点

只能实现GET请求不能实现POST请求

注意：JSONP和Ajax之间没有任何关系，不能把JSONP叫做Ajax请求，以为它没有用到XMLHttpRequest这个对象

jQuery中的JSONP

jQuery提供的$.ajax()函数，除了可以发起真正的Ajax数据请求之外，还能够发起JSONP数据请求，例如：

$.ajax({
    url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    //如果要使用$.ajax()发起JSONP请求，必须指定datatype为jsonp
    dataType: 'jsonp',
    success:function(res){
        console.log(res)
    }
})

默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，jQueryxxx是u随机生成的一个回调函数名称。

自定义参数及回调函数名称

$.ajax({
    url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType:'jsonp',
    //发起到服务器的参数名称，默认值为callback
    jsonp:'callback',
    //自定义的回调函数名称，默认值为jQueryxxx 格式
    jsonpCallback:'abc',
    success:function(res){
        console.log(res)
    }
})

jQuery中JSONP的实现过程

jQuery中的JSONP，也是通过script标签的src属性实现跨域数据访问的，只不过，jQuery采用的是动态创建和移除script标签的方式，来发起JSONP数据请求

• 在发起JSONP请求的时候，动态向< header >中append一个< script >标签：
• 在JSONP请求成功以后，动态从< header >中移除刚才append进去的< script >标签