如何跨域进行数据的传输？
1.首先什么是跨域？
概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。
JavaScript出于安全的考虑，不允许其他域的页面互相调用js方法。
2.利用jsonp进行跨域
Jsonp，利用jQuery的jsonp进行跨域
客户端使用：
[javascript] view plain copy <script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script> <scripttype="text/javascript"> $.ajax({ url:"http://localhost:8080/MyTest?callback=?", dataType:"jsonp", jsonpCallback:"person", success:function(data){ alert(data.name + " is aa" + data.sex); } }); </script>
服务端返回数据格式：
person({jsonobject}) 即回调方法名称（json参数）
如果不指定callback的函数名称，jquery会动态的生成函数名称。
原理：jsonp其实是利用<script src=”url”></script> 动态的指定url，用 get方法去进行http请求，获取js代码之后，这边就是一个函数的调用，外加参数。
代码如下：
[javascript] view plain copy <scripttype="text/javascript"> function jsonp(data) { console.log(data); } </script>
<!—url就是不同域的js代码，-->
[javascript] view plain copy <script id="jsonp" src=”url”type="text/javascript"></script> /*请求加载完成的之后的代码(服务端返回的代码)：*/ <script id="jsonp" src=”url”type="text/javascript"> Jsonp({code:”1”,status:”200”}) </script>
这样就可以完成跨域了。
3.利用iframe的get请求。
通过这个方式可以解决，form跨域提交文件或者普通的form提交之后，返回参数的获取。
上代码：
[javascript] view plain copy <% String path =request.getContextPath(); String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; //获取服务器的协议端口，和项目名称 %> <form name='resourceform' id='resourceform'action='跨域的url' method='post' enctype='multipart/form-data' class="searchbar"target="savaFrame"> <table class="table"> <thead> <tr> <th colspan="2"> 选择并上传资源文件： </th> </tr> </thead> <tbody> <tr> <td align="right" width="20%">资源文件：</td> <td class="edit" width="80%"><input type='file' id="resource_file"name='resource_file' value='' class="ipt-2"/><span class="warning">* </span></td> </tr> <tr> <td align="right">资源名称：</td> <td class="edit"><input type="text"style="line-height: 23px;" name="resource_name" value=""/> </td> </tr> <tr> <td colspan="2" > <div style="text-align:center;width:100%;"> <input type="hidden" id="callack"name="backurl" value="<%=basePath+"/deal_callback.jsp" %>"></input> <button type="button" οnclick="formSubmit();"class="btn btn-blue">确定上传</button> </div> </td> </tr> </tbody> </table> </form> /隐藏的iframe*/ <div style="display:none"><iframe id="savaFrame"name="savaFrame" style="width:0px;height:0px;" src=""></iframe> </div> /*回调函数的编写*/ <script> function jsonp(data){ // alert("回调函数") var status = data['status']; var code = data['code']; alert(JSON.stringify(data)); if(status == '1'){ alert("上传成功"); goBack(); }else{ alert("上传失败"); //doRefreshPage(); } } </script>
这个页面主要就是将数据提交到savaFrame的iframe中去。
在这个服务下还应该有一个页面deal_callback.jsp代码如下
[java] view plain copy <%@ pagelanguage="java" import="java.util.*"pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control"content="no-cache"> <meta http-equiv="expires"content="0"> <meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="This is my page"> </head> <body><br> </body> <script type="text/javascript"> var rs =window.location.search.split('?').slice(1); rs =rs.toString().split('&'); var data = {}; for(var i in rs){ var map = rs[i].split("="); data[map[0]]= map[1]; } window.parent.jsonp(data); </script> </html> 跨域的url，对form提交玩的数据进行处理完毕之后，返回一个页面，这个页面将window.location.href=<%=basePath+"/deal_callback.jsp" %>?msg=success，之前传递过来的请求页面的同域的页面。并且将需要返回的参数拼凑在跳转页面的后面，这样就可以完成，通过回调将参数返回了。
