ajax跨域问题解决方案

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

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

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

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

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

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

示例:

前台脚本:

Java代码

<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>

相关推荐