ajax跨域请求のJSONP
简单说了一下，JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。
JSON的优点：
1、基于纯文本，跨平台传递极其简单；
2、Javascript原生支持，后台语言几乎全部支持；
3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；
4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；
5、容易编写和解析，当然前提是你要知道数据结构；
JSON的格式或者叫规则：
JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者完全不分伯仲。
1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。
2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。
3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。
4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号""，以便于不同语言的解析。
5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引起来，其余的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议如果客户端没有按日期排序功能需求的话，那么把日期时间直接作为字符串传递就好，可以省去很多麻烦。
JSONP是怎么产生的：
1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；
3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；
5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
***********************转自http://www.cnblogs.com/pandang/p/5341250.html 略有改动***********
浏览器不允许Ajax跨站请求，所以存在Ajax跨域问题，目前主要有两种办法解决。
1、在请求页面上使用Access-Control-Allow-Origin标头。
使用如下标头可以接受全部网站请求：
header('Access-Control-Allow-Origin:*')
使用如下标头可以接受指定网站请求：
header('Access-Control-Allow-Origin:http://www.abc.com')
所以，服务器写法：
header('Access-Control-Allow-Origin:*');
die( json_encode(array('msg'=>'msg....')) );
ajax写法和平常一样：
<!DOCTYPE html>
<html lang="en" class="">
<head>http://i.cnblogs.com/EditPosts.aspx?opt=1
<meta charset="utf-8" />
<title>测试</title>
<script src="http://www.ysont.cn/plugs/cookie/js/jquery-1.11.1.min.js"></script>
<body>
<script>
$.ajax({
url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',
dataType:'json',
success:function(data){
alert(data.msg);
}
});
</script>
</body>
</html>
2、使用jsonp跨域请求。
服务器：
@RequestMapping(value = "bornJson", produces = "application/json; charset=utf-8")
@ResponseBody
public String bornJson(HttpServletRequest request,HttpServletResponse response) {
response.addHeader("Access-Control-Allow-Origin", "*");
String json = "{ "firstName":"John" , "lastName":"Doe" }" ;
json = "flightHandler("+json+")";
return json;
}
ajax请求：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:"微软雅黑"}
#div1{ width:500px; margin:100px auto 0;}
</style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
//ajax分页开始
window.onload=function() {
var div=document.getElementById('div1');
var btn=document.getElementById('btn');
var time=document.getElementById('time');
var num=document.getElementById('num');
var state=document.getElementById('state'); /*var script=document.createElement('script');
script.src='http://192.168.60.107/XSCP/examOutline/tingting.htm';
document.body.appendChild(script);*/ btn.onclick=function(){
$.ajax({
url:'http://192.168.60.104:8080/XSCP/smstudentCon/bornJson.htm',
async:true, //或false,是否异步,true为异步
//data:'',
timeout:1000, //超时时间
dataType:'JSONP',
jsonp: "callback",
jsonpCallback:"flightHandler",
success:function(data){
console.log(data);
},
error:function(data){
console.log('错误');
},
complete:function(){
console.log('结束');
}
});
} };
</script> </head> <body>
<div id="div1">
<button id="btn">查看</button><br />
<!--就诊时间-->
时间：<div id="time"></div><br />
<!--就诊号-->
就诊号：<div id="num"></div><br />
<!--就诊状态 1是挂号 2是预约-->
预约状态<div id="state"></div><br />
数量<div id="count"></div>
</div>
</body>
</html>
在ajax请求中，使用jsonp数据格式，所以讲dataType参数设置为jsonp，平常，还加到了jsonp和jsonpCallback两个参数，结合代码，不难看出这两个参数作用：
jsonp的作用是设置服务器获取回调函数名称参数的下标参数，jsonpCallback的作用就是设置回调函数，相当于input标签中name和value，jsonp对应name，value对应jsonpCallback。
****************end**************************
ajax跨域请求のJSONP的更多相关文章
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 【JS跨域请求】Ajax跨域请求JSONP
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
- ajax跨域请求-jsonp
1. 同源策略 ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫“同源”或者“同域”呢?——协议.域名.端口号都必须相同 ...
- ajax跨域请求--jsonp实例
ajax请求代码: //区域事件选择配送点 function changeDistrict(value){ if(value == 0){ $('#transport_node').empty(); ...
- jsonp其实很简单【ajax跨域请求】
js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...
- JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- 利用jsonp进行Ajax跨域请求
在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...
- JSONP实现Ajax跨域请求
前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
随机推荐
- 递归思维判断数组a[N]是否为一个递增数组
递归的方法:记录当前最大的,并且判断当前的是否比这个还大,大则继续,否则返回false结束: bool fun( int a[], int n ) { ) { return true; } ) { ] ...
- ajax 小练习
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- Django REST Framework限速
官方文档:http://www.django-rest-framework.org/api-guide/throttling/#throttling settings.py配置 REST_FRAMEW ...
- 互斥量、条件变量与pthread_cond_wait()函数的使用，详解(二)
1.Linux“线程” 进程与线程之间是有区别的,不过linux内核只提供了轻量进程的支持,未实现线程模型.Linux是一种“多进程单线程”的操作系统.Linux本身只有进程的概念,而其所谓的“线程” ...
- FeignClient调用POST请求时查询参数被丢失的情况分析与处理
前言 本文没有详细介绍 FeignClient 的知识点,网上有很多优秀的文章介绍了 FeignCient 的知识点,在这里本人就不重复了,只是专注在这个问题点上. 查询参数丢失场景 业务描述: 业务 ...
- HDU - 1255 覆盖的面积 （线段树求面积交）
https://cn.vjudge.net/problem/HDU-1255 题意 给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积. 分析 求面积并的题:https://www.cnbl ...
- linux常用命令说明
1. 基础快捷键使用 ctrl + c:停止进程 ctrl + l:清屏 ctrl + r:搜索历史命令 ctrl + q:退出 2.常用目录或文件夹命令 说明:安装linux时,创建一个itcast ...
- webservice 项目中遇到的问题
redshift database 连接异常 解决方案 url 修改添加参数如下 jdbc:redshift://hostname:5439/dbname?ssl=true&sslfactor ...
- 普通用户从其他主机连接MySQL数据库
一.登陆数据库 mysql -u root -p [超级用户密码]; 二.创建新用户 CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 参 ...
- oracle pivot
select * from (select a.drugname, a.drugform, a.drugspec, a.type flag, max(a.maxzjprice) maxprice, m ...