现在的位置: 首页 > 综合 > 正文

jsonp跨域

2018年01月24日 ⁄ 综合 ⁄ 共 1293字 ⁄ 字号 评论关闭

Query jsonp跨域原理

        实际上jQuery是实现不了跨域加载数据的,由于XMLHttpRequest的安全设置,是不允许直接跨域的。jQuery的jsonp虽然能跨域,但是还得请求的页面支持才行,如果请求的页面不理会jQuery发送的参数,是无法跨域的,实际上来说是获取不到输出的页面内容。

  jQuery jsonp跨域原理实际就是使用script标签加载配置对象中的跨域url(<script>标签的src属性不存在跨域的问题),再使用script标签加载之前,会在客户端中注册一个新的函数作为回调函数提供给跨域页面使用,然后将函数名称替换掉url中jsoncallback=?后面的问号,最后请求的页面获取发送的回调函数名称,输出类似“回调函数名称(json数据)”的JavaScript代码来执行回调函数,参数为json数据。和代理意义差不多,jsonp需要代理页面输出执行回调函数的js代码。

  通过jQuery的跨域原来我们知道,如果跨域页面不理会回调函数,不执行它,那么就无法获取到跨域页面输出的json函数,甚至可能会出现脚本错误,因为是使用script来加载跨域页面。


实例:

前端页面: 

  1. <script type="text/javascript" src="js/jquery.js"></script>  
  2.   
  3. <script type="text/javascript">  
  4. function do_jsonp(){  
  5. $.getJSON("http://192.168.0.110:8080/zjres/test.jsp?callback=?",             //调用JSONP   数据来源  
  6. function(json){   
  7.   alert(json.length);  
  8.  $('#result').val('My name is: ' + json[0].name);     
  9.   
  10. });  
  11. }  
  12. </script>  
  13.   </head>  
  14.     
  15.   <body>  
  16.   <a href="javascript:do_jsonp();">Click me</a><br />    
  17.   <textarea id="result" cols="50" rows="3"></textarea>   
  18.   </body>  
  19. </html>  



Test.jsp 页面 

生成json对象 

Java代码  收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>     
  2. <%String callback=request.getParameter("callback"); %>     
  3. <%   out.print(callback+"([ { name:\"testJohn\"} ,{name:\"testJohn1\"}] )");%>  


附1:jquery getJson官方api:http://api.jquery.com/jQuery.getJSON/

抱歉!评论已关闭.