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跨域请求
前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
随机推荐
- pt-online-schema-change 测试使用-包含生成测试数据
pt-online-schema-change 测试使用-包含生成测试数据 # 参考网址: https://www.2cto.com/database/201703/618280.html 一.简要描 ...
- xlrd(excel导入mysql数据库）
一.xlrd模块: python 对 excel 文件进行读操作 1.下载xlrd 并安装 http://pypi.python.org/pypi/xlrd wget https://pypi.pyt ...
- JavaSE_坚持读源码_HashMap对象_put_Java1.7
当你往HashMap里面put时,你其实在干什么? /** * Associates the specified value with the specified key in this map. * ...
- awk 处理文本：行转列，列转行
[root@centos ~]# cat f 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 51 2 3 4 5 awk '{for(i=1;i<=NF;i++)a ...
- MyBatis-Helloworld
一.依赖配置 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...
- JAVA核心技术I---JAVA基础知识（数据类型）
一:基本类型 –boolean 布尔 –byte 字节 –short/int/long 短整数/整数/长整数 –float/double 浮点数 –char 字符 (一)boolean 只有true, ...
- vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined
TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...
- 完美解决distinct中使用多个字段的方法
众所周知,distinct可以列出不重复的记录,对于单个字段来说distinct使用比较简单,但是对于多个字段来说,distinct使用起来会使人发狂.而且貌似也没有见到微软对distinct使用多字 ...
- 谈谈关于PHP连接数据库的两种方法(PDO&Mysqli)
前言:在我们之前学习sql语句的时候都是停留在黑窗口的,怎样才能让mysql与程序代码发生联系呢?此时PDO和Mysqli应运而生,为了解决这个问题 (一)开启其中(pdo或者mysqli)的php扩 ...
- canvas意料之外获得降龙十八掌的效果
瞎整本来是要点击编辑多张图片的,没想到弄成这样.这不是电视剧里的降龙十八掌吗 特此记录留着以后用,看来canvas做游戏特效都不错啊. <!DOCTYPE html><html la ...