目录
JSON(JavaScript Object Notation, JS 对象标记)
JSON
JSON(JavaScript Object Notation, JS 对象标记)
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,易于阅读和编写,也易于机器解析和生成。JSON采用完全独立于语言的文本格式,许多语言都提供了对JSON的支持,因此JSON是一种优秀的数据交换(客户端与服务端之间)语言。
它基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
与 XML 相同之处
- JSON 是纯文本
- JSON 具有"自我描述性"(人类可读)
- JSON 具有层级结构(值中存在值)
- JSON 可通过 JavaScript 进行解析
- JSON 数据可使用 AJAX 进行传输
与 XML 不同之处
- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JavaScript eval() 方法进行解析
- 使用数组
- 不使用保留字
为什么使用 JSON?
对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:
使用 XML
- 读取 XML 文档
- 使用 XML DOM 来循环遍历文档
- 读取值并存储在变量中
使用 JSON
- 读取 JSON 字符串
- 用 eval() 处理 JSON 字符串
为什么 JSON 比 XML 更好?
XML 比 JSON 更难解析。
JSON 可以直接使用现有的 JavaScript 对象解析。
针对 AJAX 应用,JSON 比 XML 数据加载更快,而且更简单:
使用 XML
- 获取 XML 文档
- 使用 XML DOM 迭代循环文档
- 接数据解析出来复制给变量
使用 JSON
- 获取 JSON 字符串
- JSON.Parse 解析 JSON 字符串
JSON 语法
JSON 语法是 JavaScript 语法的子集。
JSON 语法规则
JSON 语法是 JavaScript 对象表示语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 大括号保存对象
- 中括号保存数组
JSON 名称/值对
JSON 数据的书写格式是:名称/值对。
名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:
"name" : "程序猿"
这很容易理解,等价于这条 JavaScript 语句:
name = "程序猿"
JSON 值
JSON 值可以是:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在中括号中)
- 对象(在大括号中)
- null
JSON 数字
JSON 数字可以是整型或者浮点型:
{ "age":30 }
JSON 对象
JSON 对象在大括号({})中书写:
对象可以包含多个名称/值对:
{ "name":"程序猿" , "url":"www.runoob.com" }
这一点也容易理解,与这条 JavaScript 语句等价:
name = "程序猿" url = "www.runoob.com"
JSON 数组
JSON 数组在中括号中书写:
数组可包含多个对象:
{ "sites": [ { "name":"程序猿" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" } ] }
在上面的例子中,对象 "sites" 是包含三个对象的数组。每个对象代表一条关于某个网站(name、url)的记录。
JSON 布尔值
JSON 布尔值可以是 true 或者 false:
{ "flag":true }
JSON null
JSON 可以设置 null 值:
{ "runoob":null }
JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:
实例
var sites = [ { "name":"runoob" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" } ];
可以像这样访问 JavaScript 对象数组中的第一项(索引从 0 开始):
sites[0].name;
返回的内容是:
runoob
可以像这样修改数据:
sites[0].name="程序猿";
JSON 对象
对象语法
实例
{ "name":"runoob", "alexa":10000, "site":null }
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value(键/值)对。
key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
JSON 数组
数组作为 JSON 对象
实例
[ "Google", "Runoob", "Taobao" ]
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
JavaScript 中,数组值可以是以上的 JSON 数据类型,也可以是 JavaScript 的表达式,包括函数,日期,及 undefined。
JSON 对象中的数组
对象属性的值可以是一个数组:
实例
{ "name":"网站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] }
json对象有三种数据格式
分别如下:
类型 | 语法 | 解释 |
---|---|---|
对象类型 | {name:value,name:value...} | 其中name是字符串类型,而value是任意类型 |
数组/集合类型 | [value,value,value...]或[{},{}... ...] | 其中value是任何类型(比如js对象,或数组) |
混合类型 | {name:[]... ...} | 合理包裹嵌套对象类型和数组类型 |
json数据格式:主要由对象 { } 和数组 [ ] 组成:
其中对象包括键值对(属性:属性值){key: value},value 可为 str,num,list,obj。取值使用 objcet.key
{key: value, key2:value2,} 键:值用冒号分开,对间用,连接
数组包含元素:num,str,list,objcet 都可以,利用索引访问 [index],用 . 连接各个值:
var stu = {"student": //stu 对象包含student的key,值为一个数组
[ //数组的每一个值为一个具体的学生对象
{"name": "Tom","Grade":1, "age":11, "gender": "M"}, //学生对象的键为名字,值为对应属性
{"name": "Jerry", "Grade":1, "age":10, "gender": "M"} //每个属性对应的是一个key,value对
],
"classroom": {"class1": "room1", "class2": "room2"} //对象的值,嵌套对象
};
读取数据:
document.write(stu.student[1].name); // 输出第二个学生名
document.write(stu.student[0].age); // 输出第一个学生年龄
document.write(stu.classroom.class1); // 输出 classroom 的 class1 值
document.write(stu["classroom"].class2); // 也可用中括号键访问对象值
AJAX
AJAX即 "Asynchronous JavaScript And XML" (异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
AJAX是一种浏览器通过js异步发起请求。局部更新页面的技术.
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
同步:客户端必须等待服务器端响应。等待期间不能进行其他的操作
异步:不需要服务器端的响应
ajax可以无需加载网页时,更新部分网页
AJAX引擎会在不刷新浏览器地址栏的情况下,发送异步请求
1.1 使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象)
1.2 使用js确定请求路径和请求参数
1.3 AJAX引擎对象根据请求路径和请求参数进行发送请求
服务器接收到ajax引擎的请求进行处理
2.1 服务器获得请求参数数据
2.2 服务器处理请求业务(调用业务层代码)
2.3 服务器响应数据给ajax引擎
AJAX引擎获得服务器响应的数据,通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。
3.1 通过设置给AJAX引擎的回调函数获得服务器响应的数据
3.2 使用JavaScript在指定的位置,显示响应数据,从而局部修改页面的数据,达到局部刷新目的。
AJAX请求方式
属性名称 | 解释 |
---|---|
url | 请求的服务器端url地址 |
async | (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false |
data | 发送到服务器的数据,可以是键值对形式,也可以是js对象形式 |
type | (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET" |
dataType | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等 |
success | 请求成功后的回调函数 |
error | 请求失败时调用此函数 |
jQuery中AJAX请求
$.ajax({key:value,key:value})
$.ajax方法
- url 表示请求地址
- type 表示请求类型GET/POST
- data 表示发送给服务器的数据
- name = value & name = value
- {key:value}
- success 请求响应,响应的回调函数
- dataType 响应的数据类型
$.get()
- url
- data
- callback
- type
$.post()
- url
- data
- callback
- type
AJAX 工作原理
AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
AJAX 实例解析
$.ajax({
url:'/api/v1/questions/hits',
type:'get',
dataType:'json',
success:function (json) {
questionApp.questions = json.data;
}
});
Vue.component('v-select', VueSelect.VueSelect);
let createQuestionApp = new Vue({
el: '#createQuestionApp',
data: {
title: null,
tags: [],
selectedTagIds: [],
teachers: [],
selectedTeacherIds: []
},
methods: {
loadTags: function () {
$.ajax({
url: '/api/v1/tags',
type: 'get',
success: function (json) {
let tags = [];
for (let i = 0; i < json.data.length; i++) {
let op = {
label: json.data[i].name,
value: json.data[i].id
};
tags[i] = op;
}
createQuestionApp.tags = tags;
}
});
},
loadTeachers: function () {
$.ajax({
url: '/api/v1/users/teacher/list',
type: 'get',
success: function (json) {
let teachers = [];
for (let i = 0; i < json.data.length; i++) {
let teacher = {
label: json.data[i].nickname,
value: json.data[i].id
}
teachers[i] = teacher;
}
createQuestionApp.teachers = teachers;
}
});
},
createQuestion: function () {
let content = $('#summernote').val();
console.log("标题:" + this.title);
console.log("选中的标签:" + this.selectedTagIds);
console.log("选中的老师:" + this.selectedTeacherIds);
console.log("正文:" + content);
$.ajax({
url:'/api/v1/questions/create',
type:'post',
traditional:true,
data:{
title:createQuestionApp.title,
tagIds:createQuestionApp.selectedTagIds,
teacherIds:createQuestionApp.selectedTeacherIds,
content:content
},
success:function (json) {
if (json.state==2000){
alert("发表问题成功!!!")
}else{
alert(json.message);
}
}
});
}
},
created: function () {
this.loadTags();
this.loadTeachers();
}
});