黑马程序员技术交流社区

标题: 【济南校区】前端就业班笔记服务器与Ajax:day05 [打印本页]

---

作者: 小鲁哥哥    时间: 2018-3-16 11:22
标题: 【济南校区】前端就业班笔记服务器与Ajax:day05

【济南校区】前端就业班笔记服务器与Ajax:day05

什么是跨域
同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口号都相同，只要其中之一不相同就是跨域。
同源策略主要是为了保证浏览器的安全性
在同源策略下，浏览器不允许Ajax跨域获取服务器数据
说简单点：跨域是指从一个域名的网页去请求另一个域名的资源。只要协议、域名、端口有任何一个的不同，就被当作是跨域。

跨域解决方案
    1、jsonp，
    2、document.domain + iframe
    3、location.hash + iframe
    4、window.name + iframe
    5、window.postMessage
    6、flash 等第三方插件
   注：前端解决跨域问题的8种方案（有兴趣的同学课下研究）
   http://www.cnblogs.com/JChen666/p/3399951.html

JSONP的原理
静态script标签的src属性进行跨域请求
如果使用src这种方法进行跨域的话，一定要把这段获取数据的代码上面线先行加载，使用数据的方法放在后加载这种方法的缺点就是非常的不灵活，
这种方法已经极少使用，了解即可
利用script标签的跨域能力，这就是jsonp的基础。
利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。

JSONP的原理（2）
动态创建script标签，通过标签的src属性发送请求
动态创建script标签发出去的请求是异步请求
服务器响应的内容【函数调用】

JSONP的原理（3）
1、jsonp的本质：动态创建script标签，然后通过它src属性发送跨域请求，然后服务器响应的数据格式为【函数调用（foo实参）】所以在发送请求之前必须显示先声明一个函数，并且函数的名字与参数中传递的名字要一致，这里声明的函数是由服务器响应的内容，（实际就是一段js代码-函数调用）来调用
2、注意：ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、贺师俊 --- JSONP 的工作原理是什么就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。
当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：

[JavaScript] 纯文本查看 复制代码

<script src="http://www.example.net/api?param1=1¶m2=2"></script> 

并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
     

[JavaScript] 纯文本查看 复制代码

   callback({"name":"hax","gender":"Male"}) 

这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
4、定义函数，一定要写在调用JSONP之前。也就是，调用任何外部js，都没有函数声明头的提升。

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2