AJAX—跨域解决之JSONP

一、跨域的问题：

      1.域：域名                                                                                                                                               2.跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域       

二、跨域问题本质：同源策略

        Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名、协议、端口相同。当一个浏览器的两个tab页分别来打开百度和谷歌的页面。当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会执行。同源策略保证了用户的信息安全，浏览器打开多个站点时，互相之间不能利用JavaScript获取对方站点的敏感信息。

三、跨域的解决：

       1.script标签                                                                                                                                          2.用script标签加载资源是没有跨域问题的

       在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情。然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当做这个函数的参数传入进去。

        3.当按钮被点击时再去加载远程资源

四、JSON和JSONP：

       JSON ： （JavaScript Object Notation）是一种轻量级的数据交换模式。

       JSONP :  

        1.JSON With Padding的略称。它是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过JavaScript callback的形式实现跨域访问。                                                                         2.JSONP就像是JSON+Padding一样（padding这里我们理解为填充）。<script>标签的src属性并不被同源策略所约束，所以可以获取任何服务上的脚本并执行。

五、JSONP的简单实现模式，或者说是JSONP的原型：

       创建一个回调函数，然后在远程服务上调用这个函数并且将JSON数据形式作为参数传递，完成回调。将JSON数据填充进回调函数，这就是JSON+Padding。

      test.js中的代码：调用callback函数，并以JSON数据形式callback({message:'"success"});作为参数传参，完成回调。

六、真正的JSONP服务

      百度的AJAX搜索接口：                                                                                                                               https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=?&cb=?  

      接口获取方法：

1.进入百度搜索页 2.按下f12，点击Network 3.点击百度搜索输入框，出现以上数据 4.点击数据后，右边的Request URL即为接口

      wd=?这个问号表示你要搜索的内容，最重要的是第二个cb=?,这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义回调函数的函数名传给服务端，服务端则会返回你定义的回调函数名的方法，将获取的JSON数据传入这个方法完成回调。

通过JSONP跨域获取的数据

七、JSONP与AJAX: 

       JSONP方式使用的是script标签请求网络资源，AJAX是主动请求网络资源。JSONP不使用XMLHttpRequest对象加载资源，不属于真正意义上的AJAX。