`
wxw850227
  • 浏览: 70572 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

轻松利用JQuery实现ajax跨域访问

    博客分类:
  • js
阅读更多
被访问的服务器(简称 A)
test.html
Java代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     
<html>     
    <head>     
        <title>test.html</title>     
    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     
        <meta http-equiv="description" content="this is my page">     
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">     
    
        <script type="text/javascript" src="jquery-1.2.5.js"></script>     
    
        <script type="text/javascript">        
            function test(){     
                $.getJSON("http://192.168.61.135:8080/struts2/testKuaYu.jsp?jsonpCallback=?",     
                    function(json){  
                      $.each(json, function(i){  
                       //$("#images").append(json[i]);  
                       $("#images").append(json[i].name+"--"+json[i].password+"<br/>");  
                        if ( i == 2 ){ return false;}  
                      });  
                });       
            }     
                  
                 
        </script>     
    </head>     
    
    <body>     
             
        <input type="button" value="跨域" id="test" onclick="test()"/>     
        <div id="images">  
        </div>  
    </body>     
</html>   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
        <title>test.html</title>  
 
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="this is my page">  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
 
        <script type="text/javascript" src="jquery-1.2.5.js"></script>  
 
        <script type="text/javascript">     
            function test(){  
                $.getJSON("http://192.168.61.135:8080/struts2/testKuaYu.jsp?jsonpCallback=?",  
                    function(json){
          $.each(json, function(i){
           //$("#images").append(json[i]);
           $("#images").append(json[i].name+"--"+json[i].password+"<br/>");
            if ( i == 2 ){ return false;}
          });
                });    
            }  
               
              
        </script>  
    </head>  
 
    <body>  
          
        <input type="button" value="跨域" id="test" onclick="test()"/>  
  <div id="images">
  </div>
    </body>  
</html> 




跨域的服务器(http://192.168.61.135:8080)(简称 B)
testKuaYu.jsp
Java代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>     
<%     
    String callback = request.getParameter("jsonpCallback");     
    out.print(callback + "([ { name:\"John\",password:'xuxiangpan'},{ name:'111',password:'111'},{ name:'222',password:'222'},{ name:'333',password:'333'} ] )");     
%>  

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
    String callback = request.getParameter("jsonpCallback");  
    out.print(callback + "([ { name:\"John\",password:'xuxiangpan'},{ name:'111',password:'111'},{ name:'222',password:'222'},{ name:'333',password:'333'} ] )");  
%>

直接访问服务器 A 的 test.html就可以了
分享到:
评论

相关推荐

    jquery ajax跨域html前台 php后台

    在解决跨域问题时,我们可以利用jQuery的`jsonp`模式。JSONP(JSON with Padding)是一种绕过同源策略的方法,它利用`&lt;script&gt;`标签可以跨域加载脚本的特性。 在描述中提到的"jquery ajax json 跨域不解释,代码很...

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...

    用YQL和Jquery实现的跨域html页面截取

    标题提到的"用YQL和Jquery实现的跨域html页面截取"是一个解决方案,它利用了Yahoo Query Language(YQL)和jQuery库来解决这个问题。下面我们将详细探讨这些知识点。 首先,让我们了解什么是跨域。在Web开发中,...

    asp.net 利用jquery-ajax调用后台方法

    下面将详细介绍如何利用jQuery-AJAX调用ASP.NET后台方法。 1. **创建WebMethod** 在ASP.NET的C#或VB.NET代码中,我们可以创建一个静态的WebMethod,标记为 `[WebMethod]` 或 `[ScriptMethod]`,以便可以从...

    Ajax +jquery跨域获取JSON

    总的来说,"Ajax + jQuery跨域获取JSON"的技术实现是Web开发中的常见实践,它使得网页能够动态地、无刷新地获取并显示远程数据,提高了用户体验。通过合理利用JSONP或CORS,开发者可以突破同源策略的限制,实现丰富...

    js+jsp+json+tomcat跨域访问

    在跨域访问中,JSON通常作为数据传输的载体,因为它可以被JavaScript轻松处理。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在处理跨域请求时,jQuery提供了$.ajax...

    基于jQuery的Ajax在线词典

    总的来说,这个基于jQuery的Ajax在线词典项目利用了Ajax技术实现了无刷新的单词查询功能,通过GETXML.PHP解决了跨域问题,使得用户能够在不离开当前页面的情况下获取和查看单词的详细信息。这种技术在现代Web应用中...

    利用jQuery实现网页开启摄像机

    在现代Web开发中,利用JavaScript库如jQuery可以方便地与用户设备的硬件功能进行交互,例如访问摄像头。本文将深入探讨如何使用jQuery实现网页开启摄像机的功能,这在创建互动式应用、在线视频聊天或者拍照上传等...

    轻松搞定jQuery+JSONP跨域请求的解决方案

    在使用jQuery处理JSONP请求时,可以通过jQuery提供的Ajax方法来实现。而$.getJSON方法可以看作是$.ajax的一个简化版本,专门用于发送GET请求。当调用$.getJSON方法时,会自动在请求的URL中添加callback参数,而该...

    jquery ajax跨域解决方法(json方式)

    本文将针对jquery ajax跨域解决方法进行详细介绍,特别是以JSON方式处理跨域请求。 ### 跨域问题基础 在理解jquery如何处理跨域问题之前,需要明白什么是跨域问题。跨域问题是指当一个Web页面尝试访问另一个域的...

    aula-jquery-ajax

    9. **跨域请求**:jQuery 支持 CORS(跨源资源共享),允许 AJAX 请求访问不同源的资源。 在"aula-jquery-ajax"中,你可能会学到如何设置和发送 AJAX 请求,处理响应数据,以及如何利用 jQuery 的 AJAX 功能来优化...

    jQuery实现的移动设备图片裁剪功能源码.zip

    7. **跨域问题**:由于同源策略的限制,若图片源来自其他域名,可能需要服务器端配合设置CORS(跨源资源共享)来允许JavaScript访问。 在压缩包中的文件"132689901389675865"可能是源代码文件,包含了实现以上功能...

    jquery的ajax异步请求接收返回json数据实例

    总之,jQuery的`$.ajax`方法提供了灵活且强大的异步请求功能,能够轻松地处理JSON数据,是前端开发中不可或缺的一部分。正确配置`dataType`和其他相关选项,可以确保高效、安全地与服务器进行数据交换。

    轻松使用jquery解析XML

    标题中的“轻松使用jQuery解析XML”意味着我们将探讨如何利用JavaScript库jQuery处理XML文档,以便在Web应用程序中方便地获取和操作数据。XML(可扩展标记语言)是一种结构化数据格式,常用于存储和传输数据。jQuery...

    java ajax angular jquery ionic 框架视频教程

    - **动画效果**:使用jQuery可以轻松实现网页元素的动画效果。 - **AJAX支持**:jQuery提供了强大的AJAX功能,可以方便地与服务器进行异步通信。 ### Ajax Ajax(Asynchronous JavaScript and XML)是指一种创建...

    ajax_in_action

    jQuery提供了便捷的$.ajax()方法,使得开发者可以轻松创建Ajax请求。书中可能包含如何使用jQuery进行Ajax开发的实例和最佳实践。 4. **XML与JSON**:早期Ajax使用XML传输数据,但现在更常见的是使用JSON...

    jquery+struts2实现异步刷新实例

    本实例将详细讲解如何利用jQuery库与Struts2框架结合,实现异步刷新功能。jQuery以其简洁易用的API深受开发者喜爱,而Struts2作为Java Web开发中的MVC框架,提供了丰富的动作和结果类型,便于构建动态网站。 首先,...

    ASPNET_JSONP_demo(jq跨域)

    在 Web 开发中,由于浏览器的同源策略限制,JavaScript 无法直接跨域访问数据。为了解决这个问题,开发者常常使用 JSONP(JSON with Padding) 技术。ASP.NET 和 jQuery 结合使用 JSONP 可以实现跨域数据交互。本示例...

    jquery中AJAX请求 $.post方法的使用

    jQuery中的$.post方法是实现AJAX(异步JavaScript和XML)通信的一种简便方式。通过$.post方法,开发者可以轻松地以POST方式向服务器发送数据,并接收服务器返回的信息。 $.post方法的特点在于它是一种异步的请求...

Global site tag (gtag.js) - Google Analytics