`
西北小强
  • 浏览: 345075 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

java+jQuery解决ajax跨域小demo

    博客分类:
  • Java
阅读更多

1、在服务端设置请求头信息

前台JS代码:

$("#but4").click(function(){   

 var vesion=parseInt($.browser.version);

    if($.browser.msie && vesion>=8 && vesion<11){//判断浏览器版本是否为IE

       xdr = new XDomainRequest();

       xdr.open("POST", "http://shop.weibaobei.com/test1/test1!getAjaxData.action?type=IE");

       xdr.send();

       xdr.onload=function(){

           alert("返回结果:"+xdr.responseText);

       }

    }else{

       $.ajax({

    url:'http://shop.weibaobei.com/test1/test1!getAjaxData.action',

           type:'post',

           data:{random:Math.random()},

           success:function(data){

           alert(data);

           }

           });

}

})

后台java代码:

    public void getAjaxData() throws IOException{

       PrintWriter out = this.getResponse().getWriter();

       this.getResponse().setContentType("text/html;charset=UTF-8");

    this.getResponse().addHeader("Access-Control-Allow-Origin","*");//'*'表示允许所有域名访问,可以设置为指定域名访问,多个域名中间用','隔开

       //如果IE浏览器则设置头信息如下

       if("IE".equals(this.getRequest().getParameter("type"))){

           this.getResponse().addHeader("XDomainRequestAllowed","1");

       }

       out.print("success");

       out.close();

    }

注意点:

    a、在使用此方法时在后端为了安全起见最好设置允许那些域进行跨域访问,如“shop.weibaobei.com",多个域名直接用“,”分开;

 
    b、由于IE8-IE10不支持通过设置Access-Control-Allow-Origin头的方式,所以对于IE需要按照IE提供的方案使用XDomainRequest对象解决,
 
2、服务端以js代码的方式给前台返回数据

前台JS代码:

  $("#but6").click(function(){

      $.getScript('http://shop.weibaobei.com/test1/test1!getJavaScriptData.action',function(){

//前台获取后台返回数据

         alert(a);         

         alert(remote.test);

      });

  });

后台java代码:

    public void getJavaScriptData() throws IOException{

       PrintWriter out = this.getResponse().getWriter();

       this.getResponse().setContentType("text/html;charset=UTF-8");

       out.print("var s=23; var a='444'; var f=[2,1];var remote={test:'hello'}; ");//给前台返回js代码

       out.close();

    }

 
分享到:
评论

相关推荐

    ajax跨域请求demo.zip

    这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...

    jquery3.0.min.js+jquery.param.js+跨域代码Demo

    在本示例中,我们关注的是"jquery3.0.min.js"和"jquery.param.js"这两个jQuery库的特定版本,以及如何利用它们来解决跨域数据传输的问题。在"跨域代码Demo"中,我们将探讨如何通过URL参数实现Tomcat服务器与WebStorm...

    demo跨域ajax_DEMO_ajax跨域_

    本示例“demo跨域ajax_DEMO_ajax跨域”着重解决C#后端与JavaScript前端之间的跨域限制。这里我们将深入探讨什么是跨域、为何会产生跨域问题以及如何通过C#和Ajax实现跨域通信。 首先,我们需要了解什么是跨域。根据...

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发...这个小例子展示了如何利用jQuery的JSONP功能与后端JSP服务进行数据交换,同时通过Tomcat的CORS配置确保了跨域的安全性。这个DEMO适合初学者学习和理解跨域访问的基本原理和实践方法。

    jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下: 说明:这里的dataType 为 “jsonp” ;type 只能为 GET 前台请求代码如下: 代码如下:$.ajax({  type: “GET”,  url...

    jQuery使用AJAX Demo

    jQuery使用AJAX的测试Demo,使用JSONP支持跨域。

    ajax使用简单demo

    - **跨域问题**:出于安全考虑,浏览器限制了Ajax的跨域请求,除非服务器允许跨域(CORS策略)。 - **浏览器兼容性**:不同浏览器对XMLHttpRequest的支持程度不同,需要使用polyfill(如jQuery的$.ajax)来确保兼容...

    Jquery和ajax结合使用的小例子

    **jQuery和Ajax结合使用是Web开发中的常见技术组合,它能帮助开发者实现页面无刷新的数据交互,提升用户体验。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...

    jquery ajax demo

    本教程将深入探讨"jquery ajax demo",通过实际示例展示如何利用jQuery AJAX进行数据的发送和接收。 ### 1. AJAX基础概念 AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载...

    Ajax_Json_jQuery详细Demo

    综上所述,"Ajax_Json_jQuery详细Demo"包含了一系列关于这三者如何协同工作的实例,对初学者来说是极好的学习资源。通过这些示例,你可以了解如何使用jQuery简化Ajax调用,以及如何处理JSON数据,从而更好地构建交互...

    Ajax_Jquery_Demo

    "Ajax_Jquery_Demo"这个压缩包文件提供了学习和实践这两个技术的机会。下面,我们将深入探讨Ajax和jQuery的核心概念、用法及其在Web开发中的应用。 ### Ajax Ajax的核心理念是局部刷新,它通过XMLHttpRequest对象...

    jquery解决客户端跨域访问问题

    由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题。便记录下来,以供查阅。  jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的。 ...

    jquery ajax源代码

    ### jQuery AJAX 源代码分析 #### 一、概述 jQuery 是一款优秀的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载...

    ajax jQuery demo

    【Ajax jQuery Demo】是一个关于如何在Web开发中利用Ajax技术和jQuery库进行数据交互的示例项目。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个网页的情况下,通过JavaScript与服务器进行异步...

    ajax demo ajax实例

    8. **jQuery的$.ajax()**:jQuery库提供了方便的`$.ajax()`方法,简化了Ajax操作,例如: ```javascript $.ajax({ url: 'url_to_server', type: 'GET', success: function(response) { // 处理响应数据 }, ...

    各种ajax提交demo

    在"各种ajax提交demo"中,我们可以探讨以下几个关键知识点: 1. **XMLHttpRequest对象**:它是Ajax的基础,负责在后台与服务器进行通信。创建XMLHttpRequest对象,然后设置其open()方法来指定请求类型(GET或POST)...

    跨域访问demo.rar

    我一篇博文关于跨域访问前端的demo,主要就是为了说明,ajax请求,需要加上参数crossDomain: true, 和xhrFields: {withCredentials: true}, 以实现cookie的会话跟踪 ...

    Ajax的jquery与后台交互

    JSONP(JSON with Padding)是一种解决跨域问题的方式,通过动态插入`&lt;script&gt;`标签来实现。jQuery的`$.ajax()`支持JSONP,只需设置`dataType`为`'jsonp'`。 ### 5. Promise和`.done()/.fail()` jQuery的Ajax函数...

    jquery父子窗口互相获取元素demo

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个“jquery父子窗口互相获取元素demo”中,我们将深入探讨如何利用jQuery来实现在父窗口与子窗口之间...

    jquery_demo03:ajax学习

    此外,jQuery的Ajax还支持JSONP(JSON with Padding)跨域请求,这对于从不同域名获取数据非常有用。JSONP的工作原理是通过在请求的URL中添加一个回调函数名,服务器返回包裹在该函数内的JSON数据。 通过实践...

Global site tag (gtag.js) - Google Analytics