如何进行js的跨域数据传输

如何跨域进行数据的传输？

1.首先什么是跨域？

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

JavaScript出于安全的考虑，不允许其他域的页面互相调用js方法。

  2.利用jsonp进行跨域

         Jsonp，利用jQuery的jsonp进行跨域

              客户端使用：

[javascript]  view plain  copy

 

1. <script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>  
2. <scripttype="text/javascript">  
3.    $.ajax({  
4.         url:"http://localhost:8080/MyTest?callback=?",    
5.         dataType:"jsonp",  
6.         jsonpCallback:"person",  
7.         success:function(data){  
8.             alert(data.name + " is aa" + data.sex);  
9.         }  
10.    });  
11. </script>  

服务端返回数据格式：

person({jsonobject}) 即回调方法名称（json参数）

如果不指定callback的函数名称，jquery会动态的生成函数名称。

原理：jsonp其实是利用<script src=”url”></script> 动态的指定url，用 get方法去进行http请求，获取js代码之后，这边就是一个函数的调用，外加参数。

代码如下：

[javascript]  view plain  copy

 

1. <scripttype="text/javascript">   
2.         function jsonp(data) {   
3.            console.log(data);   
4.             
5.         }   
6. </script>   

 <!—url就是不同域的js代码，-->

[javascript]  view plain  copy

 

1. <script id="jsonp" src=”url”type="text/javascript"></script>  
2.    
3. /*请求加载完成的之后的代码(服务端返回的代码)：*/  
4. <script id="jsonp" src=”url”type="text/javascript">  
5. Jsonp({code:”1”,status:”200”})  
6.    
7. </script>  

这样就可以完成跨域了。

3.利用iframe的get请求。

通过这个方式可以解决，form跨域提交文件或者普通的form提交之后，返回参数的获取。

 

上代码：

[javascript]  view plain  copy

 

1. <%  
2.          String path =request.getContextPath();  
3.          String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;  
4.          //获取服务器的协议端口，和项目名称  
5.    
6. %>  
7. <form name='resourceform' id='resourceform'action='跨域的url' method='post' enctype='multipart/form-data' class="searchbar"target="savaFrame">  
8.               <table class="table">  
9.                                    <thead>  
10.                                           <tr>  
11.                                                  <th colspan="2">  
12.                                                         选择并上传资源文件：  
13.                                                  </th>  
14.                                           </tr>  
15.                                    </thead>  
16.                                    <tbody>  
17.                                           <tr>  
18.                                                  <td align="right" width="20%">资源文件：</td>  
19.                                                  <td class="edit" width="80%"><input type='file' id="resource_file"name='resource_file' value='' class="ipt-2"/><span class="warning">* </span></td>  
20.                                           </tr>  
21.                                           <tr>  
22.                                                  <td align="right">资源名称：</td>  
23.                                                  <td class="edit"><input type="text"style="line-height: 23px;" name="resource_name"  value=""/>  
24.                                                   
25.                                                  </td>  
26.                                           </tr>  
27.                                           <tr>  
28.                                                  <td colspan="2" >  
29.                                                         <div style="text-align:center;width:100%;">  
30.                                                   
31.                                                                <input type="hidden" id="callack"name="backurl" value="<%=basePath+"/deal_callback.jsp" %>"></input>  
32.                                                                 
33.                                                                                                   <button type="button" οnclick="formSubmit();"class="btn btn-blue">确定上传</button>  
34.                                                         </div>  
35.                                                  </td>  
36.                                           </tr>  
37.                                    </tbody>  
38.                             </table>  
39. </form>  
40. /隐藏的iframe*/  
41.       <div style="display:none"><iframe id="savaFrame"name="savaFrame" style="width:0px;height:0px;" src=""></iframe>  
42.      </div>  
43.       /*回调函数的编写*/  
44.    <script>  
45.  function jsonp(data){  
46.          //  
47.         alert("回调函数")  
48.             var status = data['status'];  
49.             var code = data['code'];  
50.             alert(JSON.stringify(data));  
51.             if(status == '1'){  
52.                 alert("上传成功");  
53.                 goBack();  
54.             }else{  
55.                 alert("上传失败");  
56.                 //doRefreshPage();  
57.             }         
58.          }  
59.    </script>  

这个页面主要就是将数据提交到savaFrame的iframe中去。

在这个服务下还应该有一个页面deal_callback.jsp代码如下

[java]  view plain  copy

 

1. <%@ pagelanguage="java" import="java.util.*"pageEncoding="utf-8"%>  
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
3. <html>  
4.   <head>  
5.     <base href="<%=basePath%>">    
6.        <meta http-equiv="pragma" content="no-cache">  
7.    <meta http-equiv="cache-control"content="no-cache">  
8.    <meta http-equiv="expires"content="0">     
9.    <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">  
10.    <meta http-equiv="description"content="This is my page">  
11.   </head>   
12.   <body><br>  
13.   </body>   
14.   <script type="text/javascript">  
15.   var rs =window.location.search.split('?').slice(1);  
16.   rs =rs.toString().split('&');  
17.   var data = {};  
18.   for(var i in rs){  
19.       var map = rs[i].split("=");  
20.       data[map[0]]= map[1];  
21.   }  
22.   window.parent.jsonp(data);  
23. </script>  
24. </html>

跨域的url，对form提交玩的数据进行处理完毕之后，返回一个页面，这个页面将window.location.href=<%=basePath+"/deal_callback.jsp" %>?msg=success，之前传递过来的请求页面的同域的页面。并且将需要返回的参数拼凑在跳转页面的后面，这样就可以完成，通过回调将参数返回了。