ajax跨域请求のJSONP

时间：2022-01-30 02:37:17

简单说了一下，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. WINFORM 输出txt文件

    SaveFileDialog saveFile1 = new SaveFileDialog(); saveFile1.Filter = "文本文件(.txt)|*.txt"; sa ...

  2. BZOJ 1042 硬币购物（完全背包&plus;DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1042 题意:给出四种面值的硬币c1,c2,c3,c4.n个询问.每次询问用d1.d2.d ...

  3. MVC中的HtmlHelper

    authour: chenboyi updatetime: 2015-04-27 21:57:17 friendly link:   目录: 1,思维导图 2,CodeSimple 1.思维导图:

  4. CSS3 transform的demo1

    <!DOCTYPE html> <html> <head> <title>弹出层演示</title> <meta charset=&q ...

  5. oracle 数据的导入导出

    一.数据导出 1.为输出路径建立一个数据库的directory对象. create or replace directory dumpdir as 'd:\'; 可以通过:select * from ...

  6. docker学习------swarm集群虚机异常关机，node状态为down

    1.因昨天虚机异常关闭,导致今天上去查看时,node节点状态显示为down 2.查了些相关资料,找到处理办法(因我的节点没有任何数据,所以直接对其进行清除) docker swarm leave -- ...

  7. mongoDB的使用A

    一.[连接mongo服务].[连接数据库].[连接集合] #一.[连接Mongo] import pymongo #方法一 client = pymongo.MongoClient(host='loc ...

  8. wpf DataTemplate ColumnDefinition width equal

    <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="col1" /> <Colum ...

  9. MVC ---- IEnumerable&lt&semi;T&gt&semi;、List&lt&semi;T&gt&semi; 前台遍历展示

    突然做前台数据展示,发现IEnumerable 对一个列表的展示还是可以,但要是多个类型放在一个表中如何处理呢,如下: 一个类IEnumerable遍历 后台 public IEnumerable&l ...

  10. eclipse中build path与Web Deployment Assembly的作用，区别

    转自:https://blog.csdn.net/heart_mine/article/details/79402792 以下内容只为做个笔记记录已下,有问题可以留言,欢迎补充. 今天在eclipse ...

相关文章