前几个周,项目中遇到了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/ 

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

  1. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  2. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  3. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  4. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  5. ajax跨域请求のJSONP

    简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级 ...

  6. 【记录】ajax跨域问题jsonp正确的使用方式

    最近遇到ajax请求跨域问题,解决方案用jsonp,现记录如下: //跨域请求jsonp封装 function doJsonPostCallBack(type, url, data,async, ca ...

  7. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  8. 【转】AJAX 跨域请求 - JSONP获取JSON数据

    来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

  9. Ajax跨域:jsonp还是CORS

    跨域一般用jsonp,兼容性比较好.CORS是html5最新的XHR第二版本,不支持IE8,IE9,对移动端的支持非常好.但是考虑项目后期这部分会转到同域名下,而且网址不需要支持ie8,ie9,所以我 ...

随机推荐

  1. Docker---(8)Docker启动Redis后访问不了

    原文:Docker---(8)Docker启动Redis后访问不了 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/ ...

  2. 看<Asp.net夜话>随笔(2013-10-13)

    1.Asp.net内置对象 1.1Request对象 封装了客户端请求信息 1.2Response对象 代表了服务器响应对象,可以向客户端返回数据 1.3Server对象 是用于获取服务器的相关信息的 ...

  3. 【Educational Codeforces Round 33 C】 Rumor

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然最后会形成多个集合,每个集合里面的人能够可以互相到达. 则维护并查集的时候,顺便维护一下每个集合里面的最小值就好. 最后答案就为 ...

  4. Tomcat redis 配置

    http://www.cnblogs.com/interdrp/p/4868740.html http://blog.csdn.net/qq584852076/article/details/4650 ...

  5. 解决Keystore was tampered with, or password was incorrect

    使用签名文件keystore查看生成的数字签名中报错解决 Keystore was tampered with, or password was incorrect 这是由于android规定自己定义 ...

  6. GO语言学习(五)Go 语言基础语法

    Go 标记 Go 程序可以由多个标记组成,可以是关键字,标识符,常量,字符串,符号.如以下 GO 语句由 6 个标记组成: fmt.Println("Hello, World!") ...

  7. OpenJDK源码研究笔记(十六):在Java中使用JavaScript脚本语言

    友情提示 本文主要参考了51CTO上的一篇文章,代码经过自己的模仿和整理,还算凑合. 本文中的代码注释比较多,不再过多解释. 更多用法,还是得看JDK的API或者看原文http://developer ...

  8. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  9. &lt;九度 OJ&gt;题目1012:畅通project

    题目描写叙述: 某省调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.省政府"畅通project"的目标是使全省不论什么两个城镇间都能够实现交通(但不一定 ...

  10. 快速理解Java中的五种单例模式(转)

    解法一:只适合单线程环境(不好) package test; /** * @author xiaoping * */ public class Singleton { private static S ...