"tickets":"20"});如果直接这样的json格式{ "price":"120"
1.json与jsonp的引入
在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。
备注:跨域也可以通过处事器端代办代理来解决;
理解:JSON是一种数据交换格局,而JSONP是一种依靠开发人员的聪明材干缔造出的一种非官方跨域数据交互协议。
2.JSON:是一种基于文本的数据交换方法,或者叫做数据描述格局,,是否该选用它首先必定要存眷它所拥有的长处。
JSON的长处:
1) 基于纯文本,跨平台通报极其简单;
2) Javascript原生撑持,后台语言几乎全部撑持;
3) 轻量级数据格局,占用字符数量极少,出格适合互联网通报;
4) 可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识另外;
5) 容易编写和解析,固然前提是你要知道数据布局;
JSON的格局或者叫法则:
JSON能够以非常简单的方法来描述数据布局,XML能做的它都能做,因此在跨平台方面两者完全不分昆季。
1) JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔断绝分手符,英文双引号""是界说符。
2) 大括号{}用来描述一组“差别类型的无序键值对调集”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“不异类型的有序数据调集”(可对应OOP的数组)。
3) 上述两种调集中若有多个子项,则通过英文逗号,进行分隔断绝分手。
4) 键值对以英文冒号:进行分隔断绝分手,并且建议键名都加上英文双引号"",以便于差别语言的解析。
5) JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必需用双引号引起来,其余的都不用,日期类型对照特殊,这里就不展开讲述了,
只是建议如果客户端没有按日期排序成果需求的话,那么把日期时间直接作为字符勾串报就好,可以省去很多麻烦。
示列1:{} 用来描述一组“差别类型的无序键值对调集”
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
示列2:[] 用来描述一组“不异类型的有序数据调集”
var 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
}
]
//读取此中John的公司名称
var johnsCompany = members[1].Company;
示列3:{}中包罗的[]使用
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
}
]
}
// 读取参会者Henry是否工程师
var henryIsAnEngineer = conference.Members[2].Engineer;
3.什么是JSONP
JSONP(JSON with Padding)是资料格局 JSON 的一种“使用模式”,可以让网页从另外网域要资料。由于同源计谋,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的处事器相同,而 HTML 的 <script> 元素是一个例外。操作<script> 元素的这个开放计谋,网页可以得到从其他来源动态孕育产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
3.1 JSOPN跨域的道理:script标签的src属性,撑持跨域;它的根基思想是,网页通过添加一个<script>元素,向处事器请求JSON数据,这种做法不受同源政策限制;处事器收到请求后,将数据放在一个指命名字的回调函数里传回来。
3.2 JSOP包罗两部分:回调函数和数据,回调函数是在响应到来时应该挪用的函数,一般通过盘问字符串添加; 数据就是传入回调函数中的JSON数据,确切的说,是一个JSON东西,可以直接访谒。
3.3 JSONP的错误谬误:
1) 只能实现GET,没有POST;
2) 从其他域中加载的代码可能不安适;难以确定JSONP请求是否掉败(XHR有error事件),常见做法是使用按时器指定响应的允许时间,超过时间认为响应掉败。
为了便利客户端使用数据逐渐形成非正式传输协议jsonp该协议的一个要点就是允许用户通报一个callback参数给处事端,然后处事端返回数据时会将这个callback参数作为函数名来包裹住json
数据 这样客户端就可以随意定制本身的函数来自动措置惩罚惩罚返回数据
示列:
function ajaxFun(){
var strUrl="http://www.b.com/demo/json.txt";
$.ajax({
type:"get",
url:strUrl,
dataType: ‘jsonp‘,
jsonp: "callback",//通报给请求措置惩罚惩罚措施或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "flightHandler",//自界说的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你措置惩罚惩罚数据
success: function(data){
alert(‘您查到的信息:票价‘ + data.price + ‘元,余-票‘ + data.tickets + ‘张。‘);
},
error: function(XMLHttpRequest,textStatus,errorThrown){
alert("error");
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
});
}
备注:
此中 sucess中的代码片段也可以不写,可以单独成立一个回调函数来挪用返回的数据。如下一样可以获得数据。
var flightHandler = function (data) {
alert(‘您查到的信息:票价‘ + data.price + ‘元,余票‘ + data.tickets + ‘张。‘);
};
需要注意的是,ajax跨域请求(jsonp)中,处事端返回数据格局必需是:flightHandler({ "price":"120","tickets":"20"});如果直接这样的json格局{ "price":"120","tickets":"20"},将会报parser error的错误.请注意这个函数最后的分号";",必需加上,否则,如果同一个页面有多个ajax请求, 并且在数据没有返回时,再发出其它ajax请求时,有可能呈现parsererror堕落提示.这种错误很隐敝,在开发时,不容易发明,在并发测试时,就很容易袒露出.
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/33080.html