js学习总结----同源与非同源(jsonp)


JSONP和AJAX相同,都是客户端向服务器端发送请求:给服务器端传递内容 或者 从服务端获取数据

AJAX属于同源策略

JSONP属于非同源策略(跨域请求) ->实现跨域请求的方式有很多种,只不过JSONP是最常用的

区分同源和非同源:

 当前页面的地址 && 数据请求的接口地址

 1)、协议

 2)、域名或者IP

 3)、端口号 

 以上三部分完全相同属于同源策略,我们使用AJAX技术获取数据;只要有一个不一样,就属于非同源,我们一般使用jsonp获取数据。 

如果我们想要在本地文件index.html中把本地的data.txt的内容获取到,直接通过本地URL地址就可以获取到localhost:8080/data.txt

如果想请求本地之外的地址例如www.baidu.com,这就涉及的跨域了。

JSONP的原理:(JSONP请求一定需要对方的服务器做支持才可以)

在script的世界中,没有同源跨域这一说,只要你给我src属性中的地址是一个合法的地址,script标签就可以把对应的内容请求回来。

JSONP就是利用了SCRIPT的这个原理

  1)、我们把需要请求数据的那个跨域的API数据接口的地址赋值给SCRIPT的SRC

  2)、把当前页面中的某一个函数名当做参数值传递给需要跨域请求数据的服务器(URL问号传参:?callback=fn)

  3)、服务器接收到你的请求后,需要进行特殊的处理:把你传递进来的函数名和它需要给你的数据拼接成一个字符串 例如我们传递进去的函数名是fn,它准备好的数据是'fn([{"name":"zhangsan"}])' ->我们传递的函数名(需要给我们的数据)

  4)、最后服务器把准备的数据通过协议返回给我们客户端,客户端发现其实就是让我们的fn执行,而且还给fn传递了一堆的数据,那些数据就是我们想要的

代码如下:

<script>
        function fn(data){
            console.log(data);//这里面就是服务器传递给我们的数据
        }
    </script>
    <script charset='utf-8' type='text/javascript' src='http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn'></script>

模拟后台jsonp处理代码

if(pathname==="/getAll"){
        //接收客户端传递进来的函数名
        var fnName = query["callback"];
        //准备数据
        var con = fs.readFileSync('./custom.json','utf-8');
        //返回给客户端内容
        res.writeHead(200,{'content-type':'text/javascript;charset=utf-8'});
        res.end(fnName+"("+con+")");
    }

在JSONP中服务器端返回给客户端的数据一般都是JSON格式的字符串

优质内容筛选与推荐>>
1、shell3-循环
2、easyUI 多功能datagrid
3、RSA加密,js前端,php后端
4、oracle 触发器 和 常用内置程序包
5、10.functions


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn