跟我学JSON相关技术及在项目中的应用示例——应用JSONP协议实现JavaScript跨域访问技术的应用示例.docVIP

跟我学JSON相关技术及在项目中的应用示例——应用JSONP协议实现JavaScript跨域访问技术的应用示例 JSONP协议及相关实现技术 1、JSONP协议 （1）JSONP是什么 JSONP是JSON with Padding（含义是将JSON数据填充进回调函数）的简称，它是一个非官方的协议，该协议允许在Web服务器端集成脚本标签并返回至Web客户端，最后通过JavaScript回调（CallBack）的形式实现跨域访问。 （2）为什么要提出JSONP 随着公开提供的 Web 服务 API 不断增加，对Web开发者来说可重用的资源也将越来越多，从而可以轻松地从不同 Web 源中获取所需要的资源并构建自己的应用系统。但要达到此目标，不可避免地要解决跨域访问（访问不同Web服务器中相关的资源）的技术问题。 2、在什么应用中需要应用JSONP协议 （1）什么是同源（域）请求 请求的目标URL 的域必须要与当前发起请求的Web页面的域相同，这意味着浏览器将会隔离来自不同源的内容，以防止它们之间的操作，从而提高Web应用的数据访问的安全性。 （2）在什么应用中需要应用JSONP协议 在Web应用系统的开发中，有时会遇到这种情况，比如要从A 服务器所在的Web网站收集用户信息，提交给B服务器所在的Web网站处理，这个时候就会涉及到跨域提交数据的问题，此时可以应用JSONP协议。 3、跨域访问时所可能存在的主要技术问题 （1）安全问题 由于JSONP是一种脚本注入（Script Injection）行为——JSONP 服务返回打包在函数调用中的 JSON 响应，所以应用JSONP协议时也有一定的安全隐患，这使宿主 Web 应用程序更容易受到各类攻击。 但跨域访问的安全限制都是指浏览器客户端，而远程Web服务器端相关程序是不存在跨域安全限制的。 （2）支持Get和Post请求 目前新版本的jQuery.ajax()函数不仅支持Get方式的跨域请求，也还支持POST方式的跨域请求； 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 早期实现跨域HTTP请求的技术实现基本上都采用Web代理技术，也就是在自己的Web服务器端的Servlet等程序中获得本Web系统的客户端的AJAX Post请求，然后解析相关的请求参数再提交给远程Web服务器以完成实际的请求，最后在Servlet程序中将远程Web服务器响应返回的数据再输出到本Web应用的客户端。 （3）错误响应不良好 没有关于 JSONP 调用的错误处理——如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。 4、构建本文档相关技术应用的实验环境 （1）构建跨域访问的运行环境 所谓同源是指标识Web服务器的三要素“域名、协议和端口”都相同，因此如果“域名和协议相同但访问的端口不相同时”，将不再是同源访问，而是跨域访问。 因此，可以在开发中的同一台主机中启动两个Tomcat服务器，但采用不同的TCP/IP的端口号；部署在两个不同的Tomcat服务器内的Web程序相互访问，就可以模拟跨域访问的运行环境。 （2）分别设置两个不同的Tomcat的端口号 1）第1个Tomcat服务器的端口号选择为8080。 2）第2个Tomcat服务器的端口号选择为8081。 这可以通过修改Tomcat服务器程序conf目录内的server.xml文件中的相关端口号，从而避免在同一主机中启动的两个Tomcat产生TCP/IP端口方面的冲突。 主要涉及如下三个方面的端口（红色数字为原始的值） Server port=8005 shutdown=SHUTDOWN Connector connectionTimeout=20000 port=8080 protocol=HTTP/1.1 redirectPort=8443/ Connector port=8009 protocol=AJP/1.3 redirectPort=8443/ 5、HTML中的script标签可以请求跨域的JS脚本程序 script标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并动态执行该JS脚本程序。如下的script标签示例表示在端口为8080的Web服务器内的Web程序页面中可以访问端口为8081的另一个Web服务器内的Web程序中的JS程序代码： script type=text/javascript src=http://localhost:8081/someOneJavaScript.js/script 而如果所调用的远程服务器端的someOneJavaScript