空间设计说明怎么写,seo厂家电话,中专网站建设与管理就业前景,番禺区画册设计公司JSONP 跨域访问(1), 简介, 原理, 实验, 缺点
一, JSONP 简介
JSONP#xff08;JSON with Padding#xff09;是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。 由于同源策略#xff0c;web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名…JSONP 跨域访问(1), 简介, 原理, 实验, 缺点
一, JSONP 简介
JSONPJSON with Padding是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。 由于同源策略web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名的资源。 JSONP是一种在早期浏览器中绕过这一限制的方法。
script 标签天生就拥有跨域请求的能力这是由浏览器的同源策略所允许的。 这种特性被用于加载来自不同源域名、协议或端口的 JavaScript 文件例如从 CDN内容分发网络加载库或框架。
JSONPJSON with Padding正是基于这个能力来实现跨域请求的。通过动态创建一个
二, JSONP 工作原理
1. 客户端发起请求
客户端通过script标签发起一个GET请求。请求的URL包含一个查询参数通常是callback它的值是一个将被服务器端调用的函数名。
2. 服务器端响应
服务器端收到请求后会将数据封装在一个函数调用中。这个函数就是请求URL中指定的callback参数的值。
3. 客户端处理
响应返回给客户端后由于是script标签的请求所以返回的JavaScript代码会立即执行。 此时客户端已经定义了一个与callback参数值相同名字的函数因此这个函数会被调用并传入解析后的JSON数据作为参数。
4. 完成交互
客户端的回调函数执行处理传入的数据。
三, 代码实验
1. 环境准备
192.168.112.200 html页面 192.168.112.202 php脚本
2. 实验目的:
访问200上的html页面, 由html跨域访问202上的php脚本.
3. 实验过程:
(1)在200服务器上准备一个jsonp.html页面:
!DOCTYPE html
html langen
headmeta charsetUTF-8script typetext/javascript// 这里定义你的回调函数function jsonpCallback(data) {// 处理JSON数据的代码console.log(data);}/script script typetext/javascript srchttp://192.168.112.202/security/jsonp.php?callbackjsonpCallback/script
/headbody/body/html这个页面定义了一个回调函数jsonpCallback(), 它用于处理响应的json. 然后通过一个script标签向202服务器发送GET请求, 通过callback参数传入函数名.
(2) 在202服务器上准备一个jsonp.php脚本.
?php
$person array(name John Doe,age 30,occupation Developer
);
$jsonString json_encode($person);
echo $_GET[callback] . ( . $jsonString . );
?服务器这段代码生成一个叫做jsonString的json字符串, 返回的数据通过拼接而成, 前面是GET传递过来的参数值$_GET[callback], 后面是被括号括起来的json数据( . $jsonString . ).
(3) 访问200服务器上的jsonp.html页面:
http://192.168.112.200/jsonp/jsonp.html上面的url向200服务器发送GET请求访问页面, 传入参数callbackjsonpCallback. 接下来200服务器上的jsonp.php执行, 生成json字符串, $_GET[callback] 的值由前端传过来是jsonpCallback, 那么最后拼接出来就是:
jsonpCallback({name: John Doe, age: 30, occupation: Developer});可以看到服务器就是返回了一段js代码, 因为前端是使用script标签请求的js, 所以响应返回后, 前端会立刻执行返回的js代码, 而这段代码是调用前端定义的jsonpCallback()函数, 并传入服务器生成的json字符串做进一步处理.
四, JSONP的缺点
现在使用 JSONP 进行跨域请求的情况已经不太常见了。主要原因是它的安全问题和功能限制尤其是以下几点
1. 安全性
JSONP 非常容易受到跨站脚本攻击XSS的影响。因为它通过 script 标签接收执行代码如果攻击者可以控制 JSONP 响应他们可以在用户的浏览器中执行恶意代码。
2. 受限的HTTP方法
JSONP 只能进行 GET 请求不能使用 POST、PUT、DELETE 等 HTTP 方法这在现代应用程序中是一个严重的限制。
3. 缺乏错误处理
在 JSONP 中如果请求失败很难准确地捕捉到错误并进行处理因为 script 标签没有提供标准的错误监听机制。
4. 缺乏直接支持
JSONP 需要服务器特别支持返回 JSONP 响应这需要服务器端进行额外的编码工作。
相比之下CORS跨源资源共享是一个 W3C 标准现代浏览器都支持这个标准。 CORS 允许浏览器向另一个域名的服务器发送XMLHttpRequest或 Fetch API 请求只要服务器返回正确的 CORS 响应头就能够实现安全的跨域请求。
因为 CORS 提供了更细粒度的控制更好的安全性和更全面的HTTP方法支持所以它已经成为了处理跨域请求的首选方式。
在新的Web应用中建议使用 CORS 而不是 JSONP。
