Ajax跨域问题解决方案

Ajax跨域问题有三种解决方案：

 

1.通过中间过渡层解决跨域问题

 

（1）通过Web代理服务器将不同域的应用统一通过代理服务器进行隔离，所有的应用都在一个域名下面了。（比如apache，nginx等）

 

 

（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。

 

 

2.通过<script>标签解决跨域问题

注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

示例：

前台脚本：

 

 <script type="text/javascript">
	    var flightHandler = function(data){
	        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
	    };
	    
	    var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler";
	   
	    var script = document.createElement('script');
	    script.setAttribute('src', url);
	    
	    document.getElementsByTagName('head')[0].appendChild(script); 
 </script>

 

后台data.jsp内容：

 

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String callback = request.getParameter("callback");

StringBuilder builder = new StringBuilder();
builder.append(callback).append("({").append("\"code\": \"CA1998\",").append("\"price\": 1780,").append("\"tickets\": 5").append("});");
    out.println(builder.toString());
%>

 

 

使用jquery的jsonp来实现跨域访问，例子如下：

<script type="text/javascript">
     $(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp",
             dataType: "jsonp",
             jsonp: "callback",
             jsonpCallback:"flightHandler",
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     
     </script>