zoukankan      html  css  js  c++  java
  • JSONP的原理

     As we know,浏览器的同源策略,不允许访问非同源页面。ajax中,不允许请求非同源的URL,JSONP就是来解决跨域请求问题的,实现方法:

    script标签src属性中的链接可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式数据,而是返回一段调用某个函数的js代码,在src中进行调用,这样实现跨域调用。

    可以动态的给页面添加一个script标签,src指向服务器(php)脚本执行返回的js代码,所以JSONP将访问跨域请求变成了执行远程的js代码,服务端不再返回JSON格式的数据,而是返回一段将JSON数据作为传入参数的函数执行代码
    所以JSONP只能解决GET请求的跨域请求。

    举个栗子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
        var localHandler = function(data){
            alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
        };
        </script>
        <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
    </head>
    <body>
     
    </body>
    </html>

    而服务器的remote.js文件内容是:

    localHandler({"result":"我是远程js带来的数据"});

    将response写在callback函数的参数里面,页面动态执行js文件时候直接就执行了这句代码。

    其实原理就是:动态生成js脚本是服务端返回的,服务端给返回的js脚本里面的callback函数传参,一般就是开发者自己在GET请求服务器代码时候加个callback参数告诉服务器我需要执行哪个函数,服务器就返回哪个函数的传参调用。

    那么,ajax也是请求一个url,然后响应服务器的response然后执行callback函数,跟JSONP有什么不同过呢?

    首先,本质上面的不同,Ajax的核心是通过XHR对象获取响应,而jsonp是通过动态添加一段js的返回函数自执行。

    【完】

    三乘五性皆醒悟,方知自有珍珠库。

  • 相关阅读:
    PyPDF2 编码问题 PyPDF2.utils.PdfReadError Illegal character in Name Object
    使用PyPDF2结合pdfminer拆分PDF,并提取关键字重命名拆分出来的文件
    最全面的常用正则表达式大全
    idea setting
    java基础-静态,非静态(构造)代码块,类加载
    利用复制(分发订阅)延时计算业务数据
    sql server 数据库复制实现数据同步常见问题(不定期更新)
    api接口写好了?想过(Accept,Content-Type)?返回类型json|xml?
    install brew cask
    idea 找不到 没有 tomcat server
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9001463.html
Copyright © 2011-2022 走看看