`

jquery + jsonp +ajax 跨域访问

 
阅读更多

js跨域访问有时候确实不好搞定,所以在特定的情形下就能跨域访问,这里我用的是简单的get提交,post很难搞,不借助其他手段根本实现不了,这里只讲get提交,然后获取返回数据,下面一组代码,我验证过的,直接运行即可,一个页面,一个后台java,java用的springmvc实现

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=charset=utf-8">
   <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<title>控制台</title>

</head>
<script type="text/javascript">

	$(function(){
		$.ajax({
				data:{status:22,schedulerId:33},
				url:"http://127.0.0.1:8080/consoleAction/a.do",
				type : "get",
				cache : false,
				dataType : 'jsonp',
				jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数 
				success:function(data){
					alert(data.result);
				},
				error:function(msg){
					alert("error!!");
				}
			});
	});
	
	function callback(data){
		alert(data);
	}
</script>
<body>
	
</body>
</html>

 java代码

 

 

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.alibaba.fastjson.JSON;
/**
 * 
 * @author songxiuliang
 *
 */
@Controller
@RequestMapping("consoleAction")
public class ConsoleAction {
	
	
	@RequestMapping(value="a.do" ,method=RequestMethod.GET)
	public void a(HttpServletRequest request, HttpServletResponse response) throws IOException {
		try {  
	        Map<String,String> map = new HashMap<String,String>();   
	        map.put("result", "contentdddrrr");  
	        String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
	        response.getWriter().print(jsonpCallback+"("+JSON.toJSONString(map)+")");//返回jsonp格式数据 (这个格式必须这样写,否则跨域访问返回ajax会进入error函数,这个跟不跨越有点区别,其他都一样) 
	     } catch (IOException e) {  
	       e.printStackTrace();  
	     }

	}
}

 

 

分享到:
评论

相关推荐

    浅谈JQuery+ajax+jsonp 跨域访问

    本文将详细介绍JQuery、ajax以及jsonp跨域访问的知识。 首先,jQuery作为一个广泛使用的JavaScript库,其提供的ajax方法极大地简化了HTTP通信操作。然而,当尝试通过ajax访问不同域下的资源时,就会遇到跨域限制...

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

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

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

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

    JSONP实现Ajax跨域访问

    ### JSONP实现Ajax跨域访问 #### 一、引言 JSONP(JSON with Padding)是一种用于解决跨域数据访问的技术。由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据...

    Jquery跨域Ajax请求测试

    总之,jQuery提供了一种简单易用的方式来处理跨域Ajax请求,无论是通过JSONP还是CORS。理解并熟练掌握这些技术,对于构建现代Web应用至关重要。在实际项目中,根据具体需求和安全考虑选择合适的方法,确保数据能够...

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...

    jquery-jsonp.js

     3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用...

    跨域访问解决方法-jsonp

    跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...

    Ajax跨域访问(ASP.NET Web)

    Ajax跨域访问是Web开发中常见的需求,可以通过JSONP或CORS来实现。在ASP.NET Web中,可以方便地配置服务器以支持这些跨域解决方案。同时,需要注意安全问题,防止恶意网站利用跨域访问获取或篡改数据。

    ajax跨域解决办法

    AJAX跨域问题的出现是由于浏览器的安全机制,旨在防止恶意网站通过脚本访问其他网站的数据,保护用户隐私。但是,在某些场景下,比如前后端分离的应用、API接口调用等,跨域请求是必要的。针对这一需求,有多种解决...

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

    JSONP(JSON with Padding)...总之,JSONP是jQuery中实现跨域访问的一种常见方法,尤其在不支持CORS的旧浏览器环境中非常有用。但随着技术的发展,CORS已成为更推荐的跨域解决方案,因为它提供了更多的控制和安全性。

    Ajax + Servlet 跨域访问(Jsonp技术)

    **Ajax + Servlet 跨域访问 (Jsonp技术)** 在Web开发中,浏览器的同源策略(Same-origin policy)限制了JavaScript对不同源(协议、域名、端口)的资源进行请求,这在一定程度上保障了安全性。然而,随着Web应用的...

    JQury实现Ajax跨域访问

    **jQuery实现Ajax跨域访问** 在Web开发中,由于同源策略的限制,JavaScript通常只能对同一域名下的资源进行操作。然而,有时我们需要从不同源获取数据,这就是跨域访问的需求。jQuery通过Ajax提供了跨域请求的能力...

    jquery ajax跨域html前台 php后台

    1. **jQuery的Ajax设置**:在使用Ajax进行跨域请求时,我们需要在`$.ajax()`方法中设置`dataType: 'jsonp'`。这告诉jQuery我们期望服务器返回JSON格式的数据,并通过JSONP机制来处理。 2. **JSONP原理**:JSONP的...

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

    通过上述分析,我们可以总结出jQuery结合Ajax实现跨域请求的过程主要分为两部分:前台的Ajax调用以及后台对于JSONP请求的处理。前台通过设置`dataType`为`jsonp`,并通过`jsonp`选项指定一个回调函数名称,使得Ajax...

    JQuery跨域访问解决方案

    jQuery作为流行的JavaScript库,提供了一些机制来处理跨域访问。 JQuery的跨域解决方案主要依赖于JSONP(JSON with Padding)技术。JSONP是一种绕过同源策略的方式,它利用HTML中的`&lt;script&gt;`标签没有同源策略限制...

    bboss mvc 通过jsonp实现跨站跨域远程访问

    2. **客户端调用**:在客户端JavaScript代码中,可以通过创建`&lt;script&gt;`标签或者使用AJAX(如jQuery的`$.getJSON()`)发起JSONP请求。 ```javascript function handleData(data) { console.log('Received data:'...

Global site tag (gtag.js) - Google Analytics