网站跨域传递的原理+同源策略+src跨域+callback回调函数

小灰灰 2022-03-26 06:44 191阅读 0赞

一，传输数据的几种数据格式  
1，Html  
Html由一些普通文本组成。如果服务器通过XMLHTTPRequest发送html，文本将存储在responseText属性中。  
从服务器端发送的html的代码在浏览器端不需要用JavaScript进行解析。  
可以直接使用innerHTML属性把服务器传输过来的html文本插入到页面中。  
2，XML  
是一种通用的数据格式  
不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记  
利用dom可以完全掌控文档  
Xml是当前编程中最为流行的数据交换格式，拥有跨平台，跨语言的优势。

<?xml version=’1.0’ encoding=”utf-8”?> 苏靖凯 http://abs.com/ sujingkai@qq.com 3，json 什么是json？ Json是一种轻量级的数据交换格式，它是基于JavaScript的一个子集。 Json的优点 同xml或html片段相比，json提供更好的间断性和灵活性，在JavaScript地盘内，json毕竟是主战场，其优势当然要远远优越于xml 非常适合服务器于JavaScript的交互

Json数据的数据格式  
1）并列数据之间用‘，’分割  
2）映射用冒号：分割  
3）并列数据的集合用\[\]表示  
4）映射的集合用\{\}表示

实际上JavaScript是将服务器端返回的json数据赋值给一个js变量，将js变量输出即可在页面中显示服务器端返回的数据。

三者对比  
若应用程序不需要与其他应用程序共享数据的时候，使用html片段来返回数据时最简单。  
如果数据需要重用，json文件是个不错的选择，其在性能和文件大小方面有优势。  
当远程应用程序未知时，xml文档是首选

YAMl（自学）

二，跨域传值的同源策略 
同源策略 
1）什么是源 
源就是协议，域名和端口号。 
[http://www.baidu.com:80][http_www.baidu.com_80] 
若地址里面的协议，域名，端口号均相同则属于同源。 
对于 [http://www.baidu.com/test/a.html][http_www.baidu.com_test_a.html] 的同源检测 
[http://www.baidu.com/dir/b.html][http_www.baidu.com_dir_b.html] 成功 
[http://www.baidubaidu.com/test/a.html][http_www.baidubaidu.com_test_a.html] 失败 域名不同 
[https://www.baidu.com/test/a.html][https_www.baidu.com_test_a.html] 失败 协议不同 
[http://www.baidu.com:9090/test/b.html][http_www.baidu.com_9090_test_b.html] 失败 端口号不同 
2）什么是同源策略？ 
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。所谓的同源是指，域名，协议，端口相同。 
不受同源策略限制的： 
（1）页面中的链接，重定向以及表单提交是不会受到同源策略限制的。 
（2）跨域资源的引入是可以的。 > &\#10;&\#21516;&\#28304;&\#31574;&\#30053;&\#30340;&\#35299;&\#20915;&\#26041;&\#27861;&\#24120;&\#29992;&\#30340;&\#23601;&\#26159;&\#36328;&\#22495;&\#65292;jsonp &\#10;3&\#65289;&\#20160;&\#20040;&\#26159;&\#36328;&\#22495; &\#10;&\#21681;&\#20204;&\#21018;&\#25165;&\#25152;&\#35762;&\#30340;&\#27983;&\#35272;&\#22120;&\#21516;&\#28304;&\#31574;&\#30053;&\#65292;&\#19981;&\#26159;&\#21516;&\#28304;&\#30340;&\#33050;&\#26412;&\#19981;&\#33021;&\#25805;&\#20316;&\#20854;&\#20182;&\#28304;&\#19979;&\#38754;&\#30340;&\#23545;&\#35937;&\#12290;&\#24819;&\#35201;&\#25805;&\#20316;&\#21478;&\#19968;&\#20010;&\#28304;&\#19979;&\#30340;&\#23545;&\#35937;&\#23601;&\#38656;&\#35201;&\#36328;&\#22495;&\#12290; &\#10;&\#19977;&\#65292;&\#36328;&\#22495;&\#20256;&\#20540;&\#23454;&\#29616;&\#26041;&\#27861;&\#65292;src&\#36328;&\#22495; &\#10;Scr&\#36328;&\#22495; &\#10;&\#22312;html&\#20803;&\#32032;&\#20013;&\#25317;&\#26377;src&\#23646;&\#24615;&\#30340;&\#20803;&\#32032;&\#26159;&\#21487;&\#20197;&\#36328;&\#22495;&\#35775;&\#38382;&\#36164;&\#28304;&\#30340;&\#12290; &\#10;&\#36890;&\#36807;src&\#23646;&\#24615;&\#65292;img&\#21487;&\#20197;&\#24341;&\#29992;&\#20854;&\#20182;&\#31449;&\#28857;&\#30340;&\#22270;&\#29255;&\#12290; &\#10;&\#36890;&\#36807;src&\#23646;&\#24615;&\#65292;script&\#21487;&\#20197;&\#24341;&\#29992;&\#30334;&\#24230;&\#30340;js&\#25991;&\#20214; &\#10;&\#36890;&\#36807;src&\#23646;&\#24615;&\#65292;iframe&\#21487;&\#20197;&\#23884;&\#20837;&\#20854;&\#20182;&\#31449;&\#28857;&\#30340;&\#39029;&\#38754;&\#65292;&\#21487;&\#20197;&\#35753;&\#39029;&\#38754;&\#30340;&\#26694;&\#26550;&\#21644;&\#21487;&\#21464;&\#20869;&\#23481;&\#20998;&\#31163;&\#65292;&\#20869;&\#23481;&\#24341;&\#29992;&\#36739;&\#20026;&\#28789;&\#27963;&\#65292;&\#26041;&\#20415;&\#24341;&\#29992;&\#20854;&\#20182;&\#30340;&\#31449;&\#28857;&\#65292;&\#34429;&\#28982;&\#29616;&\#22312;&\#36234;&\#26469;&\#36234;&\#19981;&\#24314;&\#35758;&\#20351;&\#29992;&\#23427; &\#10;&\#32780;jsonp&\#27491;&\#26159;&\#21033;&\#29992;&\#20102;script&\#26631;&\#31614;&\#30340;&\#36328;&\#22495;&\#33021;&\#21147;&\#12290;

跨域实现常用的就是jsonp  
Jsonp的基本原理  
动态添加一个

Jsonp的实现流程：（举栗子：[a.com/jsonp.html想得到b.com/jsonp.php中的数据）][a.com_jsonp.html_b.com_jsonp.php]  
在a.com的jsonp.html里创建一个回调函数XXX，动态添加

json是一种数据交换格式，描述的是信息的格式，json返回的是一串数据，json可以理解为是一种格式，它的键必须用双引号。json格式的对象必须写在\{\}花括号里面，json格式的数组写在\[\]大括号里面。  
四，ajax的json通信原生的方式获取跨域数据

接口地址  
[http://www.bejson.com/knownjson/webInterface/][http_www.bejson.com_knownjson_webInterface]

五，Jq框架中jsonp的数据传输  
$.ajax  
$.getJSON

用户在当前系统登录后，通过跨域访问的方式实现积分系统追加积分功能。  
1）用户登录：

![用户登录][20190116090004757.png]

2）积分列表

![积分列表][20190116090035686.png]

利用百度开放平台提供的翻译接口，做本地系统的在线翻译功能。实现跨域获取翻译数据的效果。

[http_www.baidu.com_80]: http://www.baidu.com:80
[http_www.baidu.com_test_a.html]: http://www.baidu.com/test/a.html
[http_www.baidu.com_dir_b.html]: http://www.baidu.com/dir/b.html
[http_www.baidubaidu.com_test_a.html]: http://www.baidubaidu.com/test/a.html
[https_www.baidu.com_test_a.html]: https://www.baidu.com/test/a.html
[http_www.baidu.com_9090_test_b.html]: http://www.baidu.com:9090/test/b.html
[a.com_jsonp.html_b.com_jsonp.php]: http://a.com/jsonp.html%E6%83%B3%E5%BE%97%E5%88%B0b.com/jsonp.php%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%89
[http_www.bejson.com_knownjson_webInterface]: http://www.bejson.com/knownjson/webInterface/
[20190116090004757.png]: /images/20220326/1a0bd8ce50c3465c82c3219f4f37b85a.png
[20190116090035686.png]: /images/20220326/81743b0deba54eab8370e439cc9ebdec.png