jsonp的工作原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
             src 属性他自带有跨域功能,浏览器没有限制。
    -->
    <script>
        function jsonp(info) {
            //已经帮我转成对象。
            console.log(info);
        }

        /*
         * 我的目的是什么:
         *   http://www.baidu.com/asdfsadf/asdf.php
         *   然后这个地址返回,我想把这个返回的数据获取。
         *   我的目的是获取第三方网站的资源数据。
         *
         * */
    </script>
    <!--
           这个标签没有跨域的限制,浏览器没有对这个标签进行一个禁用。

           jQuery
           //之前这段代码是写在http://www.wu.com
           $.ajax({
               url:"http://www.baidu.com/asdfasdfasdf",
               type:"get",

               success:function(){

               }
           })
           //假设没有加dataType:jsonp
           //这个jQuery 底层默认是去发送一个XMLHttpRequest 的请求
           //但是请求的资源是http://www.baidu.com 的资源 ,直接跨域的。
           //现在我是dataType:jsonp
           //jQuery 底层 var srcipt=document.createElement("srcipt");
           //srcipt.src="http://www.baidu.com" //跨域
    -->
    <script src="http://api.wu.com/api/04jsonp1.php?callback=jsonp"></script>
</head>
<body>
</body>
</html>







 

跨域:
      我在www.xiaoyanzi.com 站点下面的一个页面想去访问  http://www.baidu.com 下面的一个资源.
      http://www.xiaoyanzi.com   a.html
      http://www.baidu.com  b.html

      1:document
      a.html 想访问b.html 下面的元素  顶级域名都不一样。

      http://www.xiaoyanzi.com   a.html
      http://api.xiaoyanzi.com   b.html  主域名一样。

      a.html 想访问b.html 默认不允许。
      同源:域名,端口,协议必须一样。
      (不同源就跨域)
      但是主域名都一样。
      所以我怎么去解决这个跨域的问题。
      http://www.z.com   a.html 使用js 添加一个document.domian ="zhuwu.com";
      http://api.z.com   b.html 使用js 添加一个document.domian ="zhuwu.com";
       2:ajax 跨域
       在http://www.z.com  有一个a.html 想去访问http://www.baidu.com/afads.php
 有跨域的特性。(浏览器觉得会有安全问题。)
       a.html
       $.ajax({
            url:"http://www.baidu.com",
            type:"",
       })
       请求可以发送出去,数据回不来。
         $.ajax({
                    url:"http://www.baidu.com",
                    type:"",
                    dataType:"jsonp",

       })
       底层的原理
       在jQuery 的参数不加   dataType:"jsonp",
       默认是发送一个xmlHttpRequest 请求,使用这个对象去发送请求。你浏览器根本就接收不到数据。
       添加了:dataType:"jsonp",
       jQuery 里面
       var script=document.createElement("script");
       script.src="http://www.baidu.com/demo.js";

跨域访问是我们以后比较常见的操作:
       1: 在我的网站下面去访问一些其它网站提供的一些服务。
       2: 天气预报,查询机票,查询火车票。 查询ip 地址。电话号码归属地

 

posted @ 2017-11-04 23:52  Lonely,lonelyBurning  阅读(411)  评论(0编辑  收藏  举报