简单说了一下，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的更多相关文章

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

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

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

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

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

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

  4. ajax跨域请求-jsonp

    1. 同源策略 ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫“同源”或者“同域”呢?——协议.域名.端口号都必须相同 ...

  5. ajax跨域请求--jsonp实例

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

  6. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  7. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  8. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

  9. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

随机推荐

  1. 利用sys打印进度条

    在很多常见中,需要对当前处理的进度进行显示,这个时候就需要进度条了,在python中,也有封装好的进度条模块,当然,也可以自己编写一个简单的进度条来帮助理解进度条的实现. 首先,需要理解一个概念,就是 ...

  2. 选择排序Java版

    package dataStructureAlgorithmReview.day01; import java.util.Arrays; /** * * @author shundong * */ p ...

  3. 2018 icpc-ecfinal后记

    打完这场终于可以回校0基础预习一个学期的课程了.    安详.jpg 可惜了,差了点罚时没有拿银,不过有了徐州差一分钟银牌的经历之后,已经没有什么能让我遗憾了. 仿佛又打了一场半年前的西安邀请赛,区别 ...

  4. pandas知识点

    1.选择对象 1.选择特定列和行的数据 a['x'] 那么将会返回columns为x的列,注意这种方式一次只能返回一个列.a.x与a['x']意思一样. 取行数据,通过切片[]来选择 如:a[0:3] ...

  5. webpack打包内存溢出的解决方法

    由于项目文件越来越多,最终导致在打包时报javaScript heap out of memory错误 解决方案: 1.增加v8内存 使用increase-memory-limit 1)安装 npm ...

  6. Elastic Stack之FileBeat使用实战

    Elastic Stack之FileBeat使用实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任.   本篇博客数据流走向:FileBeat ===>logstash == ...

  7. 利用 JMetal 实现大规模聚类问题的研究（二） JMetal代码总览

    之前完成了导入JMetal到自己的工程这一步. 在开始我们研究的问题之前,我们先对JMetal的源代码一个全局的认识. JMetal很好地利用了面向对象的特性,对所有的优化问题做了高度的抽象,建议有空 ...

  8. MyBatis-parameterType 取出入参值

    SQL 映射文件的几种入参情况 一.单个基本类型参数 public MyUser selectMyUser(Integer id); <!-- #{参数名或任意名}:取出参数值 --> & ...

  9. Eclipse复制web项目怎么改

    在学习中,做一个项目时 , 完成到了某一阶段 实现了部分功能,有必要保存这一项目, 1  在以后的学习中如果能顺利的完成后续部分,可以在需要特定功能时 复习这个项目,  (必要性) 2  如果在后续的 ...

  10. axis 入门【原】

    Call call = (Call) service.createCall();call.setOperationName(new QName("命名空间地址", "方法 ...