AJAX跨域与JSONP的一点实践经验

前几个周,项目中遇到了AJAX跨域的问题,然后找资料解决了。

首先要说明一点,关于AJAX的跨域原理和实践,我的经验还是比较少的,我只是大致看了下网上的资料,结合自己的理解,找到了解决办法,暂时不去仔细研究,因为要做的事情太多了,不可能把所有的问题都给研究透彻了。

问题场景:

a.com访问二级域名cms.a.com上的AJAX请求,遇到了跨域问题,Chrome-Firefox都没有问题,IE7-8-9都没有数据,直接报错了。貌似AJAX跨域不同浏览器的机制不一样。

网上有提到一种叫“JSONP”的技术,大概的意思是,我们可以直接修改<script src=""></script>的src属性,从而绕过AJAX跨域这个限制。

$.getJSON("http://cms.a.com/post/recentpost.json?jsoncallback=?",{count:count,categoryid:categoryid}, function(data){

});

});

getJSON是jquery提供的API,专门用来获得JSON格式的数据,貌似是JSONP原理实现,尚未研究。

大致的思路是,在向后端发送请求的时候,多发送一个参数,即回调函数的名字,我自己取的名字是jsoncallback,后台响应方式:

//对外提供的服务接口

@RequestMapping(value = "recentpost")

public void recentPost(Integer categoryid,String jsoncallback,Integer count,Model model,HttpServletResponse response) {

List<Map<String,Object>> list = postService.listRecent(categoryid,count);

String str=JSONObject.toJSONString(list);

str =jsoncallback+"("+str+")";

super.returnMessage(response, str);

}

返回的格式是,myCallback({a:1,b:2}) ,myCallback是回调函数的值。

后端那个响应方法有点局限,应该需要做下判断,如果前端传入了jsoncallbak就按照jsonp的方式返回,如果是正常是非跨域AJAX请求,没有callback参数,就返回另外一种格式的数据。

参考资料:
http://blog.csdn.net/hemingwang0902/article/details/4811064
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
http://www.cnblogs.com/IT-Cristian/archive/2010/01/28/1658363.html
http://blog.jobbole.com/53487/

时间: 2024-08-09 09:23:09

AJAX跨域与JSONP的一点实践经验的相关文章

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

解决Ajax 跨域问题 - JSONP原理解析

解决Ajax 跨域问题 - JSONP原理解析 为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一不相同就是跨域 同源策略主要为了保证浏览器的安全性 在同源策略下,浏览器**不允许**Ajax跨域获取服务器数据 http://www.example.com/detail.html 跨域请求: http://api.example.com/detail.html 域名不同 http://www.

ajax跨域请求--jsonp实例

ajax请求代码: //区域事件选择配送点 function changeDistrict(value){ if(value == 0){ $('#transport_node').empty(); $('#transport_node').append('<option value="0">请选择</option>'); return; } $('#transport_node').empty(); $('#transport_node').append('&

Ajax跨域:Jsonp原理解析

推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得

【跨域请求】Ajax跨域请求JSONP

前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白呢?--网上那些介绍资料都写的太复杂了! 我是能多简单就多简单,争取让你十分钟看完! 1. 同源策略 ajax之所以需要"跨域",罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫"同源"或者"同域"

ajax跨域访问jsonp

ajax跨域访问: 1.前台: try{ $.ajax({ async:false, cache:false, data:{"vote_id":vote_id,"shareholder_card":shareholder_card,"stock_type":stock_type,"currency_type":currency_type}, url:sivrs_hasCard_url, dataType:'jsonp', js

ajax跨域之jsonp

跨域之jsonp jsonp跨域原理 script便签可以跨域,基于这个机制,可以在A域的页面中定义jsonp函数,script标签返回这个函数的调用 如下代码所示A域页面代码 <body> <div>正在获取数据--</div> <script>function jsonp(data) { document.querySelector('div').innerHTML = data; } </script> <!--向B域请求数据--&g

AJAX 跨域请求 - JSONP

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器. 不过,由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并

ajax跨域问题-----jsonp

1.浏览器的同源策略:域名,协议,端口均相同,叫做同源 举个例子: http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域) http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域) http://abc.123.com/index.html 调用 http://def.123.com/server.php (子