小渣渣的json和jsonp和ajax的实质和区别
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的实质和区别的更多相关文章
- JSON、JSONP、Ajax的区别
什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...
- json和jsonp以及ajax
简单的说: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后 ...
- json和jsonp的区别，ajax和jsonp的区别
json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...
- Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...
- ajax、json、jsonp
这章分享下ajax.json.jsonp的学习记录,不得不说这真是些令人激动的技术. 推荐文章: https://segmentfault.com/a/1190000012469713 http:// ...
- jsonp，ajax，json问题
JSONP技术 JSONP是解决跨域问题的一种常见方式 跨域问题,因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 同源策略:只有在同协议.同域名.同端口的情况下才能进去数据交互 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- 说说JSON和JSONP，浅析JSONP解决AJAX跨域问题
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- AJAX 中JSON 和JSONP 的区别 以及请求原理
AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web Asynchronous JavaScript and X ...
随机推荐
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- [转][MVC4]ASP.NET MVC4+EF5(Lambda/Linq)读取数据
本文转自:https://blog.csdn.net/dingxiaowei2013/article/details/29405687 继续上一节初始ASP.NET MVC4,继续深入学习,感受了一下 ...
- Spring Security认证配置(二)
学习本章之前,可以先了解下上篇Spring Security基本配置. 本篇想要达到这样几个目的: 1.访问调用者服务时,如果是html请求,则跳转到登录页,否则返回401状态码和错误信息 2.调用方 ...
- C#调用百度地图API经验分享（四）
这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...
- [日常] Go语言圣经-错误,函数值习题
Go语言圣经-错误 1.panic异常.panic是来自被调函数的信号,表示发生了某个已知的bug 2.任何进行I/O操作的函数都会面临出现错误的可能 3.错误是软件包API和应用程序用户界面的一个重 ...
- Docker初次使用与安装过程
Docker入门 Docker 简介 Docker有两个版本: 社区版(CE) 企业版(EE) Docker Community Edition(CE)非常适合希望开始使用Docker并尝试使用基于容 ...
- 大数据之 Hadoop学习笔记
1 hadoop生态系统 hdfs 分布式文件系统 hadoop-hdfs-2.7.2.jar mapreduce 分布式计算框架 hadoop-mapreduce-client-app-2.7.2. ...
- putty连接ubuntu：network error:connection refused
原因: ubuntu存在一个bug:在/var/run/目录下缺少一个文件夹sshd 解决方法: 在命令行输入: sudo mkdir /var/run/sshd sudo /usr/sbin/ssh ...
- python-状态模式
源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 在软件开发过程中,各种应用程序可能会根据不同的情况做出不同的处理.最直接的方案就 ...
- js实现禁止右键 禁止f12 查看源代码
document.oncontextmenu = function () { return false; }; document.onkeydown = function () { if (windo ...