目录
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();
}
});