摘要:同源策略使用发送网络请求有一个条件,那就是同源策略。同源策略要求协议类型相同等等主机地址相同或者自己的主机地址端口号相同等等例如平常使用进行调试的时候,会开一个本地服务器,但是如果你使用去访问之类的服务器你是无法拿到数据的。
json和jsonp的关系
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
json和jsonp缩写只相差一个字母,但是两者却完全不同。前者是一种数据的表达方式,后者则是网络请求的一种解决方案。
同源策略使用ajax发送网络请求有一个条件,那就是同源策略。
同源策略要求:
协议类型相同 -> http、https、ftp等等
主机地址相同 -> https://www.baidu.com/ 或者自己的主机ip地址
端口号相同 -> 8080、80等等
例如平常使用webstorm进行调试的时候,webstorm会开一个本地服务器http://localhost:63342/xxxx,但是如果你使用ajax去访问https://www.baidu.com/之类的服务器你是无法拿到数据的。实际上浏览器已经拿到数据,但是做了一层隔离,不给你数据。
jsonp原理在说原理之前首先要了解两个关于的特点
标签可以使用cdn加速(根据浏览器所在网络地区,从最近的服务器下载js脚本,一般下载框架和库),那么cdn的服务器毫无疑问是不同源的。所以,标签可以跨域访问别的服务器。
标签是通过src节点属性获取js代码的,并且获取到的代码可以直接执行。
在了解了上面的2个的特点之后大概都能猜出来,jsonp就是使用以上两个特点来实现的,具体的实现方式有2种。
方式一
创建一个函数(名字随机生成,避免多次请求被覆盖),并且接收一个参数(服务器返回的数据)。
利用标签发送请求,拼接上callback=方法名参数。
后端要求接收这个callback参数,拿到方法名后在方法名后拼接(),并且传入返回的数据
这种方式对于php来说就是字符串拼接,但是传回来的时候则是被js解析成调用对应的方法了。
// php $res = file_get_contents($url); $func = $_GET[callback]; echo callback."(".$res.")";
方式二
使用php或者nodejs去访问需要跨域的请求
用ajax访问这个php或者nodejs脚本
方式一示例jsonp无论如何都要后端支持(要么是自己的后端写的php,要么是别人接口支持jsonp跨域的回调方法),否则无法使用。
// 1. 创建一个script标签 var script = document.createElement("script"); // 2. 随机生成一个方法 // 用时间戳作为种子,这样随机生成的方法名绝对没有重复的。 var funcName = "jsonpFunc" + Math.floor(new Date().getTime() * Math.random()); window[funcName] = function (json) { console.log(json); // 把请求完的标签从文档中移除 document.head.removeChild(script); }; // 3. 拼接请求地址,加上回调 script.src = "http://api.douban.com/v2/movie/in_theaters?callback=" + funcName; // 4. 把script标签放到文档中,就会发送请求 document.head.appendChild(script);
封装一下:
window.myJsonp = function (opt) { // 简单的容错 if (!opt || !opt.url) return; opt.callback = opt.callback || "callback"; opt.params = opt.params || {}; opt.callback = opt.callback || function () {}; // 1. 创建一个script标签 var script = document.createElement("script"); // 2. 随机生成一个方法 var funcName = "jsonpFunc" + Math.floor(new Date().getTime() * Math.random()); window[funcName] = function (json) { // 5. 把请求完的标签从文档中移除 document.head.removeChild(script); // 6. 删除添加到window的方法名称,避免污染 delete window[funcName]; // 7. 把获取到的数据通过回调的方式传出去 opt.callback(json); }; // 3. 拼接请求地址,加上回调(参数拼接和get请求一致) var params = ""; for (var key in opt.params) { params += key + "=" + opt.params[key] + "&"; } script.src = opt.url + "?" + params + "callback=" + funcName; // 4. 把script标签放到文档中,就会发送请求 document.head.appendChild(script); }; // 使用 myJsonp({ url: "http://api.douban.com/v2/movie/in_theaters", callback: function (json) { console.log(json); } });方式二
待续。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87226.html
var jsonp = function() { var extend = function(obj, attrs) { for (var name in attrs) { obj[name] = attrs[name]; } }; var jsonp = function() { jsonp_imp.apply(null, arguments); ...
摘要:前提是的方法名与引入的文件方法名一致。简单描述就是先定义一个方法,然后引入外部调用这个方法并携带数据。 JSONP 被用于跨域获取数据。在讲解它之前,先讲讲它与 JSON 之间的区别 什么是JSON? JSON 是一种基于文本的数据交换方式,或者叫做数据描述格式。 其优点是: 1、基于纯文本,跨平台传递极其简单; 2、Javascript 原生支持,后台语言几乎全部支持; 3、轻量级数...
摘要:为请求指定一个回调函数名。这主要用来让生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。在回调函数中,通常我们只需通过判断请求是否完成,如果已完成,再根据判断是否是一个成功的响应。 本篇文章借鉴自 博客园文章 原文地址 AJAX即Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的...
摘要:产生跨域问题的原因跨域问题是浏览器同源策略限制,当前域名的只能读取同域下的窗口属性。比如,其中是协议名,是子域名,是主域名,端口号是,当在在页面中从一个请求数据时,如果这个的协议名子域名主域名端口号任意一个有一个不同,就会产生跨域问题。 产生跨域问题的原因 跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性。 跨域问题产生的场景 当要在在页面中使用js获取其他网...
阅读 4674·2021-09-22 16:06
阅读 2073·2021-09-22 15:22
阅读 1409·2019-08-30 15:54
阅读 2510·2019-08-30 15:44
阅读 2341·2019-08-29 16:31
阅读 2009·2019-08-29 16:26
阅读 2327·2019-08-29 12:41
阅读 729·2019-08-29 12:22