前几个周,项目中遇到了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. PatentTips - Maintaining shadow page tables in a sequestered memory region

    BACKGROUND Malicious code, known as malware, which includes viruses, worms, adware, etc., may attack ...

  2. 强大的xUtils工具类整理

    xUtils简单介绍 xUtils 包括了非常多有用的android工具. xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,很多其它的事件注解支持且不受 ...

  3. Android开发人员应该知道的Kotlin

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/01/kotlin-android Android开发人员在语言限制方面面临着 ...

  4. .NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来(一)

    原文:.NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来(一) 写下此文章只为了记录Surging微服务学习过程,并且分享给广大想学习surging的基友,方便广大 ...

  5. Redis实现Mybatis的二级缓存

    一.Mybatis的缓存 通大多数ORM层框架一样,Mybatis自然也提供了对一级缓存和二级缓存的支持.一下是一级缓存和二级缓存的作用于和定义. 1.一级缓存是SqlSession级别的缓存.在操作 ...

  6. UWP 新手教程1——UWP的前世今生

    文件夹 引言 设备族群 UI 和通用输入模式 通用控件和布局面板 工具 自适应扩展 通用输入处理 引言 在本篇文章中,可以掌握下面知识: 设备族群,怎样决定目标设备 新的UI控件和新面板帮助你适应不同 ...

  7. 模拟登录QQ推断是否须要验证码

    老生常谈的问题了,在模拟登录之前,推断是否须要验证码: https://ssl.ptlogin2.qq.com/check? uin=QQ号码&appid=1003903&js_ver ...

  8. 【拆分版】 Docker-compose构建Logstash多实例,基于7.1.0

    [拆分版]Docker-compose构建Logstash多实例 写在最前 说起Logstash,这个组件并没有什么集群的概念,与其说是集群,不如说是各自去收集日志分析过滤存储到Elasticsear ...

  9. linux安装anaconda

    打开网址:https://repo.continuum.io/archive/ 下载对应版本: 然后把下载的文件放到linux系统上 在终端执行: bash Anaconda3-5.1.0-Linux ...

  10. 10.3、android输入系统_必备Linux编程知识_任意进程双向通信(scoketpair+binder)

    3. 任意进程间通信(socketpair_binder) 进程每执行一次open打开文件,都会在内核中有一个file结构体表示它: 对每一个进程在内核中都会有一个task_struct表示进程,这个 ...