json和jsonp和ajax的实质和区别
ajax的两个问题
　　1.ajax以何种格式来交换数据
　　2.跨域的需求如何解决
　　　　数据跨域用自定义字符串或者用XML来描述
　　　　跨域可以用服务器代理来解决
jsonp来跨域
　　json是一种数据交换格式 “暗号” 描述信息格式
　　jsonp是非官方跨域数据交互协议 “接头方式” 信息传递双方约定的方法

　　json是基于文本的数据交换方式或者数据描述格式
　　　　json的优点
　　　　　　1.基于纯文本，跨平台传递极其简单；
　　　　　　2.javascript原生支持，后台语言几乎全部支持
　　　　　　3.轻量级数据格式，占用字符数量极小，特别适合互联网传递
　　　　　　4.可读性比较强，不必xml那么一目了然但在合理的依次缩进之后还是很容易识别的
　　　　　　5.容易编写和解析，当然前提是知道数据结构
　　　　json的格式或者规则
　　　　　　json以非常简单的方式来描述数据结构 xml能做的它都能做
　　　　　　1.json的数据两种数据类型 大括号{}和方括号[] 其余英文冒号,是分隔符 冒号:是映射符 英文双引号""是定义符
　　　　　　2.{}是描述一组 不同类型的无序键值对集合 每个键值对理解为OOP的属性描述
　　　　　　    []是描述一组 相同类型的有序数据的集合 对应OPP的数组
　　　　　　3.{}不同类型无序键值对和[]相同类型有序集合中有有多个子项，通过英文逗号分隔
　　　　　　4.键值对以英文冒号:分隔并且建议键名都加英文双引号""，以便不同语言的解析
　　　　　　5.json内部常用数据类型是字符串(必须用双引号引起来其他不用) 数字 布尔 日期 null
　　　　　　　　日期比较特殊？？？？？？

             var person = { //一个人的描述

                 "name":"Bob",

                 "Age":32,

                 "Company":"IBM",

                 "Engineer":true

             }

             var personAge = person.Age;

             var conference = {        //描述一次会议

                 "Conference": "Future Marketing",

                 "Date": "2012-6-1",

                 "Address": "Beijing",

                 "Members":

                     [

                         {

                             "Name": "Bob",

                             "Age": 32,

                             "Company": "IBM",

                             "Engineer": true

                         },

                         {

                             "Name": "John",

                             "Age": 20,

                             "Company": "Oracle",

                             "Engineer": false

                         },

                         {

                             "Name": "Henry",

                             "Age": 45,

                             "Company": "Microsoft",

                             "Engineer": false

                         }

                     ]

                 }

                 var henryIsAnEngineer = conference.Members[2].Engineer;// 读取参会者Henry是否工程师

jsonp的产生原因
　　1.Ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）
　　2.web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）
　　3.可以判断 现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理；
　　4.json的纯字符数格式可以简洁的描述复杂数据还被js原生支持
　　5.web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去
　　6.客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样
　　7.为了方便客户端使用数据逐渐形成非正式传输协议jsonp
　　　　该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据

     <!DOCTYPE html>

         <html>

             <head>

              <title></title>

             </head>

             <body>

                 <script>

                 var flightHandler = function (data) {

                     alert('您查到的信息：票价' + data.price + '元，余票' + data.tickets + '张。');

                 };

                 var url = "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler";

                 var script = document.createElement('script');

                     script.setAttribute('scr',url);

                 document.getElementsByTagName('head')[0].appendChild(script);

                 </script>

             </body>

         </html>

　　jsonp.html

             flightHandler({

                 "code":"1991",

                 "price":1991,

                 "tickets":5

             });

　　jQuery如何实现jsonp调用

     <!DOCTYPE html>

     <html>

     <head>

         <title>123</title>

         <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

         <script>

             $(document).ready(function () {

                 $.ajax({

                     type: "get",

                     async: false,

                     url: "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler",

                     dataType: "jsonp",

                     jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

                     jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

                     success: function(json) {

                         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

                     },

                     error: function() {

                         alert("123456");

                     }

                 });

             });

         </script>

     </head>

     <body>

     </body>

     </html>

ajax和jsonp的实质核心、区别联系
　　1.ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
　　2.实质不同
　　　　ajax的核心是通过xmlHttpRequest获取非本页内容
　　　　jsonp的核心是动态添加script标签调用服务器提供的js脚本
　　3.区别联系
　　　　不在于是否跨域
　　　　ajax通过服务端代理一样跨域
　　　　jsonp也不并不排斥同域的数据的获取
　　4.jsonp是一种方式或者说非强制性的协议
　　　　ajax也不一定非要用json格式来传递数据

小渣渣的json和jsonp和ajax的实质和区别的更多相关文章

  1. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...

  2. json和jsonp以及ajax

    简单的说: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后 ...

  3. json和jsonp的区别，ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  4. Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  5. ajax、json、jsonp

    这章分享下ajax.json.jsonp的学习记录,不得不说这真是些令人激动的技术. 推荐文章: https://segmentfault.com/a/1190000012469713 http:// ...

  6. jsonp，ajax，json问题

    JSONP技术 JSONP是解决跨域问题的一种常见方式 跨域问题,因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 同源策略:只有在同协议.同域名.同端口的情况下才能进去数据交互 ...

  7. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  8. 说说JSON和JSONP，浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  9. AJAX 中JSON 和JSONP 的区别 以及请求原理

    AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web   Asynchronous JavaScript and X ...

随机推荐

  1. jQuery UI的datepicker()与变更格式

    继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...

  2. 设置了winform的背景图片随窗体的变化而变化

    private void mainform_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; System.Drawi ...

  3. ImageButton设置src图片大小

    需求&起因 有时候没有找到合适大小的资源,需要修改图片大小而且不改变ImageButton的大小.可以通过缩放图片大小的方式改变外观. ImageView的属性android:scaleTyp ...

  4. Java多线程--锁的优化

    Java多线程--锁的优化 提高锁的性能 减少锁的持有时间 一个线程如果持有锁太长时间,其他线程就必须等待相应的时间,如果有多个线程都在等待该资源,整体性能必然下降.所有有必要减少单个线程持有锁的时间 ...

  5. Java 内部类、静态内部类、匿名内部类

    java提高篇(八)----详解内部类 概念 可以将一个类的定义放在另一个类的定义内部,这就是内部类. 为什么要使用内部类?在<Think in java>中有这样一句话:使用内部类最吸引 ...

  6. Java Spring学习笔记----Bean的依赖注入（设值注入方式）1

    Spring常用的两种依赖注入方式:一种是设值注入方式,利用Bean的setter方法设置Bean的属性值:另一种是构造注入,通过给Bean的构造方法传递参数来实现Bean的属性赋值: 1.设值注入方 ...

  7. Code Signal_练习题_alphabeticShift

    Given a string, replace each its character by the next one in the English alphabet (z would be repla ...

  8. Express 框架

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完整功能的网站 ...

  9. Difference between nn.softmax & softmax_cross_entropy_with_logits & softmax_cross_entropy_with_logits_v2

    nn.softmax 和 softmax_cross_entropy_with_logits 和 softmax_cross_entropy_with_logits_v2 的区别   You have ...

  10. 13 款惊艳的 Node.js 框架——第2部分

    [编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 API 以及实时应用的开发流程.本文系国内 ITOM 管理平台 OneAPM ...