Java菜鸟补给站---AJAX和JSON
目录
JSON
JSON(JavaScript Object Notation, JS 对象标记)
与 XML 相同之处
与 XML 不同之处
为什么使用 JSON？
为什么 JSON 比 XML 更好？
JSON 语法
JSON 语法规则
JSON 名称/值对
JSON 值
JSON 数字
JSON 对象
JSON 数组
JSON 布尔值
JSON null
JSON 使用 JavaScript 语法
实例
JSON 对象
对象语法
实例
JSON 数组
数组作为 JSON 对象
JSON 对象中的数组
json对象有三种数据格式
AJAX
AJAX请求方式
jQuery中AJAX请求
$.ajax方法
$.get()
$.post()
AJAX 工作原理
AJAX是基于现有的Internet标准
AJAX 实例解析
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();}
});Java菜鸟补给站---AJAX和JSON相关推荐
- Java菜鸟补给站--常见面试简答题( 一 )
1.关于JDK,JRE 和 JVM的认识理解 2.Java 和 c++的区别? 3.Java 应用程序与小程序之间有那些差别? 4.字符型常量和字符串常量的区别? 5. Java中有那些常见的关键字? ...
- Java菜鸟补给站--HTML,XML,以及解析XML
目录 HTML,XML的区别 解析XML DOM解析 SAX解析 选择DOM还是选择SAX? DOM4J解析 JDOM解析 HTML,XML的区别 1. XML是区分大小写字母的,HTML不区分. 2 ...
- Java菜鸟补给站---MySQL数据库 SQL 语句补充( 一 )
目录 SQL 语句 truncate 语句 不属于DML语句 1>作用 截断名 2>语法: truncate table 表名 3>和 delete 语句的区别 对于自增长字段,使用 ...
- Java菜鸟补给站---VARCHAR与CHAR的区别
共性 在数据库中,varchar和char都是用于存储字符串类型的数据的,并且,在创建数据表时,使用这2种类型时都必须显式的指定长度! 区别 varchar是变长的,即:存储的字符串的长度可变,例如设 ...
- 菜鸟补给站 - -Java 常见笔试题
目录 ( 一 )写一个算法统计出一个字符串中某子串出现的次数.(注意,目标字符串不一定有逗号) ( 二 )以下代码的输出结果是什么: -- Java内存管理 ( 三 )有数列:1 1 2 3 5 8 ...
- Java面试补给站——Map一家亲
Map,几乎是使用最广的一个数据结构了,他通过键值对应的方式存储数据.小到各种算法题,大到Redis数据库都是用这种存储方式.可以说,键值对应存储是存储格式发展的一个小趋势.因此掌握Java中各种Ma ...
- Java面试补给站——final、volatile、synchronized三大关键字
如果说语法是一个编程语言的骨架,那么关键字就是骨架的关节. 在Java中有各种功能的关键字,最常用的int,break,public这些关键字都是在编程过程中必不可少的. 本文从面试提问的角度聊一下f ...
- java后台解析json并保存到数据库_[Java教程]ajax 发送json 后台接收 遍历保存进数据库...
[Java教程]ajax 发送json 后台接收 遍历保存进数据库 0 2017-09-25 15:00:23 前台怎么拿参数的我就不管了我也不会 反正用这个ajax没错 ajax 代码 一定要写 ...
- 返回ajax有几种方式,java ajax返回 Json 的 几种方式
方式 1. : 自写代码转 Json 需要 HttpHttpServletRequest request HttpServletResponse response 后台 : @RequestMap ...
最新文章
- 高级打字机【主席树】【滚动数组】【块状链表】
- trace分析优化器执行计划 || optimizer
- FTP 两种传输模式 Binary 和 ASCII 的区别
- 串口转换器的工作方式及通讯模式介绍
- Leetcode-区域和检索-数组不可变
- 【内购篇】5 分钟教你成为会赚钱的独立开发者
- ERROR 1044 (42000)
- c语言算开方程序,C语言计算开方
- 2018百度之星程序设计大赛初赛B——1002hex
- 2014校园招聘之一(8月华为机试题)
- 沙漠之花--华莉丝·迪里
- 删除姓名、年龄重复的记录——数据库
- Django中如何使用Mysql数据库
- scikit-image库-- 圆形和椭圆形霍夫变换（十七）
- 笔记本的屏幕能不能当作台式机的显示器
- 公民身份号码 校验码 检证程序
- 对电脑笑了二十分钟的帖子
- 【Axure教程】穿梭框拖动选择器
- Android Framework层播放器评分机制
- 台式win7f1到f12热键取消_win7系统关闭f1-f12功能键的操作方法