浅谈JSONP

心已赠人 2022-09-29 14:48 7阅读 0赞

1、JSONP的诞生过程综述

1) Ajax无法跨域，引起了开发者的思考。

2) 开发者发现， <script>标签的src属性是可以跨域的，是否可以把跨域服务器写成调用本地的函数，回调数据回来？

3) JavaScript刚好支持JSON（object）。

4) 调用跨域服务器上动态生成的js格式文件（不管是什么样的跨域服务器，最终生成的返回值都是一段js代码）。

5) 这种获取远程数据的方式看起来非常像Ajax，但其实并不一样，逐渐形成了一种非正式传输协议，称作JSONP。

6) 传递一个callback参数给跨域服务器，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据进而返回。

2、JSONP的诞生过程细述

1) 哪怕跨域js文件中的代码，web页面也是可以无条件执行的。

远程服务器www.server.com根目录下的server.js文件：

alert(“我是跨域调用得到的响应”);

本地服务器www.client.com根目录下的client.html文件：

<!DOCTYPE html>
    <html>
    	<head>
        	<title></title>
        	<script src="http://www.server.com/server.js"></script>
    	</head>
    	<body>
    	</body>
    </html>

跨域调用显然可以成功。

问题：跨域远程获取数据如何实现？

2) 在client.html页面定义一个函数，然后在server.js中传入数据进行调用。

远程服务器www.server.com根目录下的server.js文件：

serverResponse({"result":"我是跨域调用得到的响应"});

本地服务器www.client.com根目录下的client.html文件：

<!DOCTYPE html>
    <html >
    	<head>
        	<title></title>
        	<script>
        		var serverResponse = function(data){
            		alert(“跨域调用得到的响应是：” + data.result);
        		};
        	</script>
        	<script src="http://www.server.com/server.js"></script>
    	</head>
    	<body>
    	</body>
    </html>

跨域远程获取数据的目的实现。

问题：JSONP的服务器往往要面对很多客户端，而这些客户端各自的本地函数都不相同，如何让服务器知道它应该调用的本地函数是什么？

3) 服务器提供的JS脚本动态生成，客户端传递一个参数告诉服务器要查询的信息，服务器根据客户端的需求来动态生成JS脚本。

远程服务器www.server.com根目录下的getResult.jsp文件动态生成的JS脚本：

serverResponse({
    	"name":"Amy",
    	"age":23,
    	"school":"BUPT"
    });

本地服务器www.client.com根目录下的client.html文件：

<!DOCTYPE html>
    <html>
    	<head>
        	<title></title>
        	<script>
        		var serverResponse = function(data){
            		alert("跨域调用得到的响应是：" + data.result);
        		};
        		var url = "http://www.server.com/getResult.jsp?name=Amy&callback=serverResponse";
    			var script = document.createElement('script');
    			script.setAttribute('src', url);
    			document.getElementsByTagName('head')[0].appendChild(script);
        	</script>
    	</head>
    	<body>
    	</body>
    </html>

问题：如何实现多次和重复调用？jQuery如何实现JSONP调用？

3、JSONP的基本原理

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。其实，JSONP跨域方式与Ajax XmlHttpRequest协议无关。

4、JSONP的执行过程：

1) 客户端注册一个callback (如:'jsoncallback'), 然后把callback的值（如'jsonpValue'）传给服务器；

2) 服务端得到callback的数值后，要用jsonpValue(......)把将要输出的JSON内容包括起来，此时，服务器生成JSON数据才能被客户端正确接收。

3) 以JavaScript语法的方式，生成一个function，function 名字是传递上来的参数 'jsoncallback'的值'jsonpValue'.

4) 最后将JSON数据直接以参数的方式，放置到function中，生成了一段js格式文件，返回给客户端。

5) 客户端浏览器，解析script标签，并执行返回的js格式文件，此时js格式文件的数据作为参数，传入到了客户端预先定义好的callback函数(如$.ajax()方法封装的success: function(data)里。

5、jQuery用Ajax封装JSONP

远程服务器www.server.com根目录下的getResult.jsp文件动态生成的JS脚本：

serverResponse({
    	"name":"Amy",
    	"age":23,
    	"school":"BUPT"
    });

本地服务器www.client.com根目录下的client.html文件：

<!DOCTYPE html>
    <html>
    	<head>
    		<title></title>
      		<script src=jquery-1.8.2.min.js"></script>
      		<script>
         		$(document).ready(function(){
            		$.ajax({
                		type: "get",
                  		async: false,
                 		url: "http://www.server.com/getResult.jsp?name=Amy",
                 		dataType: "jsonp",
                 		jsonp: "callback",
                 		jsonpCallback:"serverResponse",             
    					success: function(data){
                    		alert('年龄： ' + data.age + '，学校： ' + data.school);
                 		},
                 		error: function(){
                     		alert(“跨域调用失败”);
                 		}
             		});
         		});
    		</script>
       	</head>
    	<body>
      	</body>
    </html>

6、Ajax和JSONP

Ajax和JSONP在调用方式上看起来很像，目的也都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery把JSONP作为Ajax的一种形式进行了封装。

Ajax和JSONP本质上是不同的：Ajax的核心是通过XmlHttpRequest获取非本页内容，而JSONP的核心则是动态添加<script>标签来调用服务器提供的JS脚本。

Ajax和JSONP的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

7、JSONP的优缺点

（1）优点

①　不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；

②　兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持。

③　JSONP在请求完毕后可以通过调用callback的方式回传结果，将回调方法的权限给了调用方，相当于将controller层和view层终于分开了。JSONP服务只提供纯服务的数据，至于提供服务以后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，只需要有不同的渲染逻辑就可以了，逻辑都可以使用同一个JSONP服务。

2）缺点

①　只支持GET请求而不支持POST等其它类型的HTTP请求；

②　只支持跨域HTTP请求，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

③　JSONP在调用失败时不会返回各种HTTP状态码。

④　缺乏安全性。万一假如提供JSONP的服务存在页面注入漏洞，即它返回的JavaScript的内容被人控制的。那么所有调用这个JSONP的网站都会存在漏洞，于是无法把危险控制在一个域名下，所以在使用JSONP的时候必须要保证使用的JSONP服务必须是安全可信的。