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
　　　　　　　　日期比较特殊？？？？？？

  1.              var person = { //一个人的描述
  2.                  "name":"Bob",
  3.                  "Age":32,
  4.                  "Company":"IBM",
  5.                  "Engineer":true
  6.              }
  7.              var personAge = person.Age;
  8.              var conference = {        //描述一次会议
  9.                  "Conference": "Future Marketing",
  10.                  "Date": "2012-6-1",
  11.                  "Address": "Beijing",
  12.                  "Members":
  13.                      [
  14.                          {
  15.                              "Name": "Bob",
  16.                              "Age": 32,
  17.                              "Company": "IBM",
  18.                              "Engineer": true
  19.                          },
  20.                          {
  21.                              "Name": "John",
  22.                              "Age": 20,
  23.                              "Company": "Oracle",
  24.                              "Engineer": false
  25.                          },
  26.                          {
  27.                              "Name": "Henry",
  28.                              "Age": 45,
  29.                              "Company": "Microsoft",
  30.                              "Engineer": false
  31.                          }
  32.                      ]
  33.                  }
  34.                  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数据 这样客户端就可以随意定制自己的函数来自动处理返回数据

  1.      <!DOCTYPE html>
  2.          <html>
  3.              <head>
  4.               <title></title>
  5.              </head>
  6.              <body>
  7.                  <script>
  8.                  var flightHandler = function (data) {
  9.                      alert('您查到的信息：票价' + data.price + '元，余票' + data.tickets + '张。');
  10.                  };
  11.                  var url = "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler";
  12.                  var script = document.createElement('script');
  13.                      script.setAttribute('scr',url);
  14.                  document.getElementsByTagName('head')[0].appendChild(script);
  15.  
  16.                  </script>
  17.              </body>
  18.          </html>

　　jsonp.html

  1.              flightHandler({
  2.                  "code":"1991",
  3.                  "price":1991,
  4.                  "tickets":5
  5.              });

　　jQuery如何实现jsonp调用

  1.      <!DOCTYPE html>
  2.      <html>
  3.      <head>
  4.          <title>123</title>
  5.          <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  6.          <script>
  7.              $(document).ready(function () {
  8.                  $.ajax({
  9.                      type: "get",
  10.                      async: false,
  11.                      url: "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler",
  12.                      dataType: "jsonp",
  13.                      jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
  14.                      jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  15.                      success: function(json) {
  16.                          alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
  17.                      },
  18.                      error: function() {
  19.                          alert("123456");
  20.                      }
  21.  
  22.                  });
  23.              });
  24.          </script>
  25.      </head>
  26.      <body>
  27.      </body>
  28.      </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. dom操作------操作元素属性的若干方法

    // 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)let div = docum ...

  2. python常用内置函数1

    1,abs 求绝对值 >>> abs( -1 ) 1 >>> abs( 1 ) 1 >>> 2,max, min求序列最大值与最小值 >&g ...

  3. AngularJS table 按照表头字段排序功能（升序和降序）

    一.表格按照表头排序 <!doctype html> <html ng-app="a3_4"> <head> <title>表头排序 ...

  4. PHP 绘制验证码

    使用PHP绘制验证码  可直接使用 // 验证码 <?php $checkCode = ""; for ($i=0; $i < 4; $i++) { // 十进制转换为 ...

  5. js 动态声明变量

    var  object = {}; for(var i=0; i<5; i++){ object['attr'+i] = i; }

  6. 优雅高效的免费在线APP原型工具

    前往:xiaopiu 打开浏览器即可享受软件级的流畅体验!云端组件库.交互动效自定义.高效友好的操作方式让您的创意即刻呈现!

  7. 转 .md即markdown文件的基本常用编写语法（图文并茂）

    原文链接:.md即markdown文件的基本常用编写语法(图文并茂) 序言: 很久没有写博客了,感觉只要是不写博客,人就很变得很懒,学的知识点感觉还是记不住,渐渐地让我明白,看的越多,懂的越少(你这话 ...

  8. CentOS6.5搭建ldap及pdc的过程

    linux   centos6.5,,配置的是本地yum,采用光盘自带的rpm包进行安装 安装openldap server 以及client yum install openldap-server ...

  9. 葡萄城报表介绍：矩表（Tablix）

    一.矩表(Tablix)定义 Tablix 即表(Table)+矩阵(Matrix)+列表(List),它是报表中展示数据的一种工具,由表.矩阵.列表这三个具有相似性的报表项组成. 二.矩表(Tabl ...

  10. Python学习笔记之——requests库

    requests库一个优雅而简单的用于Python的HTTP库,可以极大的简化我们发送http请求及获取响应的代码. requests是python的第三方库,所以使用之前需要先安装. 1.安装之后就 ...