`
eminoda
  • 浏览: 10365 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery JSONP解决跨域

阅读更多
1.模拟跨域
<script type="text/javascript">
	$(function(){
		// 同域请求
		/*
		$.get("${pageContext.request.contextPath}/demo5.action", function(data){
			alert(data);
		});
		*/
		
		// 跨域请求 当前域名 localhost
		
		// $.get 无法跨域
		/*
		$.get("http://www.test.cn:8080/jquery_ajax_day2/demo5.action", function(data){
			alert(data);
		});
		*/
		
		// 使用$.getJSON 实现跨域
		$.getJSON("http://www.test.cn:8080/jquery_ajax_day2/demo5.action","callback=?", function(data){
			alert(data.name);
		});
	});
</script>


2.getJson解决跨域
// 跨域请求问题
public class Demo5Action extends ActionSupport {
	// 回调函数名
	private String callback;

	public void setCallback(String callback) {
		this.callback = callback;
	}

	@Override
	public String execute() throws Exception {
		ServletActionContext.getResponse().setContentType("text/javascript;charset=utf-8");
		ServletActionContext.getResponse().getWriter().print(callback + "({\"name\":\"xxx\"})");
		return NONE;
	}
}


3.跨域原理
问题:localhost使用jsp,而该jsp访问test域名,服务器处理的数据会返回到localhost,而非test。造成跨域问题
原理:jsonp底层桶过javascript可以读取“任何”地址的js脚本片段
1:在jsp使用getJSON发送请求,拼接callback参数给服务器
2:服务器拼接getJSON的callback函数的参数,返回给jsp
3:jsp执行返回的js脚本片段(回调)
4:相当于ajax异步处理了这次请求

差不过这意思,如有不对请谅解。

分享到:
评论

相关推荐

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

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许...虽然有一些限制,但在许多场景下,JSONP仍然是一个实用的跨域解决方案。

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin ...在实际开发中,开发者应根据项目需求和浏览器兼容性选择合适的跨域解决方案。

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    JSONP(JSON with Padding)是一种解决跨域请求的方法,即在客户端通过 script 标签请求服务器端的数据,然后服务器端将数据以 JSON 格式返回,并在返回数据中包含一个回调函数,以便客户端可以将数据处理。...

    跨域访问解决方法-jsonp

    总结,JSONP是一种简单且广泛使用的跨域解决方案,尤其适用于那些不支持CORS的旧版本浏览器。然而,考虑到安全性和灵活性,CORS在现代Web开发中已成为更推荐的选择。理解JSONP的工作原理和使用方法对于任何Web开发者...

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

    以上是基于jQuery和JSONP实现跨域请求的解决方案。具体到代码层面,可以通过示例来更清晰地展示如何操作。在这个例子中,客户端页面需要从另一域下的服务端接口获取数据,并将这些数据显示在页面中。通过上述提到的...

    JQuery跨域访问解决方案

    JQuery的跨域解决方案主要依赖于JSONP(JSON with Padding)技术。JSONP是一种绕过同源策略的方式,它利用HTML中的`&lt;script&gt;`标签没有同源策略限制的特点。当jQuery使用`dataType: 'jsonp'`时,它实际上是在做以下几...

    jQuery使用JSONP实现跨域获取数据的三种方法详解

    本文将详细介绍使用jQuery实现JSONP跨域获取数据的三种方法。 ### 第一种方法:$.ajax()函数 $.ajax()是jQuery中最为通用的Ajax实现方式。要使用JSONP方法,我们需要在$.ajax()函数中设置`dataType`为'jsonp'。...

    使用Jsonp方式跨域获取json

    综上所述,JSONP是解决跨域问题的一种传统手段,虽然现在有CORS等更安全的解决方案,但在某些情况下,尤其是需要兼容老版本浏览器或者无需POST请求时,JSONP仍然是一个实用的选择。在实际项目中,了解和掌握JSONP的...

    jsonp和跨域1

    1.3.3 jQuery-JSONP跨域 jQuery提供了JSONP的支持,通过$.ajax方法的dataType参数设置为"jsonp",可以轻松发起JSONP请求。jQuery会自动生成一个唯一的回调函数名,并将其作为参数传递给服务器,服务器返回的数据应以...

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

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术,尤其在jQuery中得到了广泛的应用。...但随着技术的发展,CORS已成为更推荐的跨域解决方案,因为它提供了更多的控制和安全性。

    jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友

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

    综上所述,"用YQL和Jquery实现的跨域html页面截取"的解决方案巧妙地结合了YQL的跨域能力和jQuery的JSONP请求功能,实现了在前端获取和处理其他域的HTML内容,这对于数据聚合、分析或者构建Web应用等场景十分有用。...

    jQuery Jsonp跨域模拟搜索引擎

    1. jQuery Jsonp跨域概念: - jQuery Jsonp是一种用于跨域请求的技术手段。在Web开发中,出于安全考虑,浏览器实施了同源策略,限制了一个域下的脚本与另一个域下的资源进行交互。而Jsonp(JSON with Padding)技术...

    jquery.jsonp插件

    ajax跨域请求,jquery.jsonp插件

    jquery ajax跨域html前台 php后台

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

    ASPNET_JSONP_demo(jq跨域)

    所有这些组件协同工作,构成了一个完整的 ASP.NET JSONP 跨域解决方案。 总之,通过 ASP.NET 和 jQuery 实现 JSONP 跨域通信,开发者可以轻松地跨越同源策略的限制,实现前后端数据交互。这个示例项目提供了一个...

Global site tag (gtag.js) - Google Analytics