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

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

1.首先什么是跨域？

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

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

  2.利用jsonp进行跨域

         Jsonp，利用jquery的jsonp进行跨域

              客户端使用：

<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代码之后，这边就是一个函数的调用，外加参数。

代码如下：

      <scripttype="text/javascript"> 
              function jsonp(data) { 
                 console.log(data); 
                
              } 
      </script> 

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

<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提交之后，返回参数的获取。

 

上代码：

<%
         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代码如下

<%@ 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，之前传递过来的请求页面的同域的页面。并且将需要返回的参数拼凑在跳转页面的后面，这样就可以完成，通过回调将参数返回了。