AJAX

什么是跨域

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

跨域解决方案

1、jsonp,
2、document.domain + iframe
3、location.hash + iframe
4、window.name + iframe
5、window.postMessage
6、flash 等第三方插件
​
99%的公司都在使用jsonp。
​
注:前端解决跨域问题的8种方案(有兴趣的同学课下研究)
http://www.cnblogs.com/JChen666/p/3399951.html

5、JSONP的原理(1)

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

6、JSONP的原理(2)

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

7、JSONP的原理(3)

1、jsonp的本质:动态创建script标签,然后通过它src属性发送跨域请求,然后服务器响应的数据格式为【函数调用(foo实参)】
  所以在发送请求之前必须显示先声明一个函数,并且函数的名字与参数中传递的名字要一致,这里声明的函数是由服务器响应的内容,
  (实际就是一段js代码-函数调用)来调用
2、注意:ajax和jsonp其实本质上是不同的东西。
ajax的核心是通过XmlHttpRequest获取非本页内容,
而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
​
3、贺师俊 --- JSONP 的工作原理是什么
就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。
当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,
    形如: <script src="http://www.example.net/api?param1=1&param2=2"></script> 
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: 
    callback({"name":"hax","gender":"Male"}) 
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 
​
4、定义函数,一定要写在调用JSONP之前。也就是,调用任何外部js,都没有函数声明头的提升。

 

原文地址:https://www.cnblogs.com/famensaodiseng/p/7192547.html