简单说了一下，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. ArrayList、LinkList、Vector的区别

    ArrayList.LinkedList和Vector均实现了List接口,均为可伸缩数组(均为可动态改变长度的数组).它们是有序的集合,并且其中的元素允许重复. 从底层实现来看: (1)ArrayL ...

  2. Luogu P2463 [SDOI2008]Sandy的卡片

    题目链接 \(Click\) \(Here\) 真的好麻烦啊..事实证明,理解是理解,一定要认认真真把板子打牢,不然调锅的时候真的会很痛苦..(最好是八分钟能无脑把\(SA\)码对的程度\(QAQ\) ...

  3. 测试一下多线程同时往list中添加元素会不会出问题

    # encoding: utf-8 import decimal import requests import logging import logging.config import random ...

  4. mysql存储过程造数据取一个基准用户的各种类型都取一条数据作为基准数据，循环插入

    CREATE DEFINER=`user`@`%` PROCEDURE `create_upload_data`(in start_userid integer,in create_counter i ...

  5. Jz2440开发板熟悉

    title: Jz2440开发板熟悉 tags: ARM date: 2018-10-14 15:05:56 --- 概述 外部晶振为12M Nand Flash 256M,Nor Flash 2M, ...

  6. python 计算机发展史,线程Process使用 for循环创建 2种传参方式 jion方法 __main__的解释

    ########################总结################## #一 操作系统的作用: 1:隐藏丑陋复杂的硬件接口,提供良好的抽象接口 2:管理.调度进程,并且将多个进程对硬 ...

  7. zepto.min.js

    /* Zepto v1.1.3 - zepto event ajax form ie - zeptojs.com/license */var Zepto=function(){function L(t ...

  8. 解决pycharm启动慢

    xms -xmx相关参数设置 打开pycharm的安装目录 D:\PyCharm\PyCharm 2018.2.3\bin下文件pycharm.exe.vmoptions修改默认(版本2016.2)的 ...

  9. jira7通过全局js给编辑区自定义快捷键【原】

    jira7编辑区自定义快捷键 本文主要描述了jira7如何通过添加全局js引用,给文本编辑区自定义快捷键用以快速填充模板内容. jira 3/4/5可参考官方api https://developer ...

  10. springBoot的事物管理

    springBoot的事物管理 1:springBoot 整合单数据源事物: Spring Boot 使用事务非常简单,首先使用注解 @EnableTransactionManagement 开启事务 ...