Ajax 和 Json

(参考遇见狂神说b站视频）

Web 1.0 时代

注册的时候，发现手机已经注册过了，但是你只是输入了，没有提交，他就提示了。

Web 2.0 时代

最重要的一个因素，就是Ajax。
————————————————————————————————————

JSON （它和xml一样都是一种数据交换格式）

百度百科

前后端分离，数据交互变得异常重要；JSON就是王者！

JavaScript Object Notation，JS对象标记。是一种轻量级的数据交换格式，目前使用特别广泛。

采用完全独立于编程语言的文本格式，来存储和表示数据。简洁和清晰的层次结构，使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JS语言中，一切都是对象。因此，任何JS支持的类型都可以通过JSON来表示。例如：字符串，数字，对象，数组等。看看他的要求和语法格式：

对象表示为键值对
数据由逗号分隔（最后一个数据不用逗号）
花括号保存对象
方括号保存数组

Json键值对是用来保存JS对象的一种方式，和JS对象的写法也大同小异。键 / 值对组合中，键名写在前面，用双引号“ ”包裹，使用冒号：分隔，然后紧接着值：

{“name”：“sako”}
{“age”：“3”}

Json是JS对象的字符串表示法，他使用文本表示一个JS对象的信息，本质是一个字符串。

var obj = {a: 'Hello' , b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的。
var Json = ' {"a": "Hello" , "b": "World"} '; //这是一个Json字符串，本质是一个字符串。

JSON 和 JS对象互转

要实现从JSON字符串转换为 JS对象，使用JSON.parse() 方法：

var obj = JSON.parse(' {"a": "Hello", "b" : "World"} ');  // 结果是 {a: 'Hello' , b: 'World'}

要实现从 JS对象转换为 JSON字符串，使用JSON.stringify() 方法：

var Json= JSON.stringify({a: 'Hello', b : 'World'});  // 结果是 '{"a": "Hello", "b" : "World"}'

JSON 后端传到前端（后台版）

可以写成工具类util（将java对象，转换为String，再转换为JSON对象后返回）

精简版

乱码怎么办？

1.方法一

给@RequestMapping 加一个属性

produces:指定响应体返回类型和编码

@RequestMapping（value = “/json”, produces = “application/json;charset=utf-8”）

2.方法二

@ResponseBody 格式化 JSON对象

3.Date时间

4.封装成工具类

重复代码太多，给他编写一个工具类。

直接使用自己写的工具类

（前端 / Response：每几秒刷新一次页面）（response容易炸。。）

总结

都是用的@ResponseBody注解，他就是把后台的对象转换成Json对象，返回到页面。
和它对应的当然是@RequestBody，一般用来负责接收前台的Json数据，把Json数据自动封装到pojo中。

之后Ajax来测试这一块，这两个注解，一般都会在异步获取数据中使用到。

–——————————————————————————————————

Ajax (增强B/S的体验性）

type = xhr 异步交互

B/S：未来的主流，并且会爆发式的持续增长；
产品链：H5 + 网页 + 客户端 + 手机端（Android、IOS）+ 小程序（40-50w）

简介

Ajax （Asynchronous JavaScript and XML）异步的JavaScript 和 XML
AJAX 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种：用于创建更好、更快、以及交互性更强的Web应用程序的技术。

在2005年，Google通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用AJAX创造出动态性极强的web界面：当您在谷歌的搜索框输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

————————————————————————————————————

传统网页和使用Ajax网页的区别

传统的网页（即不用Ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用 Ajax技术的网页，通过在后台 服务器 进行少量的数据交换，就可以实现异步局部更新。

使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

使用Ajax可以这么做：

注册时，输入用户名自动检测用户是否已经存在。
登录时，提示用户名密码错误
删除数据行时，将行ID发到后台，后台在数据库中删除——>数据库删除成功后，在页面DOM中也将数据行也删除。

我们可以使用前端的一个标签来伪造一个AJAX的样子，iframe标签

AJAX的核心是XMLHttpRequest对象（XHR）

纯JS实现AJAX不讲。
直接使用JQuery提供的，更方便学习，避免重复造轮子。有兴趣的同学就可以了解下本质XMLHttpRequest！

AJAX的核心是XMLHttpRequest对象（XHR）。
XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步的方式，从服务器获取新数据。

———————————————————————————————————————————

JQuery

JQuer提供多个与AJAX有关的方法。
通过JQuery AJAX方法，您能够使用Http Get 和 Http Post从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

JQuery不是生产者，而是大自然搬运工。
JQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！他的方法如下：

使用

需要去官网下载，导入JQuery的 js文件；

script

前端页面

实现异步刷新

Ajax总结

使用JQuery需要导入JQuery；使用Vue需要导入Vue；两个都不用，自己原生态实现。

SpringMVC
- Controller
- springmvc配置文件
- web.xml
JavaScript
- 引入JavaScript，<script>
- 函数
选择器
- 标签选择器
- 类选择器 .
- id选择器 #
JQuery 公式
- $(选择器).事件(参数)
- $(select).action(…)

三部曲

编写对应的处理Controller，返回消息 or 字符串 or JSON格式的数据
编写AJAX请求
1. url：Controller请求
2. data：键值对
3. success：回调函数
给AJAX绑定事件，点击click，失去焦点onblur，键盘弹起keyup

AJAX 和 JSON学习笔记相关推荐

JSON学习笔记（六）- JSONP
JSONP 教程本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
JSON学习笔记（四）- JSON.parse()
JSON.parse() JSON 通常用于与服务端交换数据. 在接收服务器数据时一般是字符串. 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象. 语法 JSON ...
JSON学习笔记-处理空白字符（使用 SSE4.2 优化字符串扫描）
背景:一些JSON含有大量的空白字符(whitspace),在解析JSON时需要跳过这些空白字符. 那么如果我们只是简单的进行处理,当遇在输入流中到这四种空白字符( ,\t,\n,\r,)时,直接跳过 ...
telerik grid ajax,Telerik ajax 控件学习笔记 - Ajax
产品版本:RadControls for ASP.NET Ajax Q1 2009 Telerik 的控件实现 Ajax 的方式比 asp.net ajax 要简单些.有如下特点: 1. 不需要拖放很 ...
jQuery与Ajax应用（学习笔记）
内容:摘自<锋利的jQuery>第一版第六章 Ajax全称为 "Asynchronous Javascript and XML" (异步Javascript与XML ...
JSON学习笔记-3
JSON 对象 1.对象语法 JSON 对象使用在大括号({})中书写. 对象可以包含多个 key/value(键/值)对. key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串 ...
JSON学习笔记（五）- JSON.stringify()
JSON.stringify() JSON 通常用于与服务端交换数据. 在向服务器发送数据时一般是字符串. 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符 ...
JSON学习笔记（三）- 数组
JSON 数组数组作为 JSON 对象实例 [ "Google","Runoob","Taobao"] JSON 数组在中括号中书写. ...
JSON学习笔记（二）- 对象
JSON 对象对象语法实例 { "name":"runoob","alexa":10000,"site":null} ...

AJAX 和 JSON学习笔记

Ajax 和 Json

Web 1.0 时代

Web 2.0 时代

JSON （它和xml一样都是一种数据交换格式）

JSON 和 JS对象互转

JSON 后端传到前端（后台版）

精简版

乱码怎么办？

1.方法一

2.方法二

3.Date时间

4.封装成工具类

总结

Ajax (增强B/S的体验性）

简介

传统网页和使用Ajax网页的区别

使用Ajax可以这么做：

AJAX的核心是XMLHttpRequest对象（XHR）

JQuery

使用

实现异步刷新

Ajax总结

三部曲

AJAX 和 JSON学习笔记相关推荐

最新文章

热门文章

AJAX 和 JSON学习笔记

Ajax 和 Json

Web 1.0 时代

Web 2.0 时代

JSON （它和xml一样都是一种数据交换格式）

JSON 和 JS对象互转

JSON 后端 传到 前端（后台版）

精简版

乱码怎么办？

1.方法一

2.方法二

3.Date时间

4.封装成工具类

总结

Ajax (增强B/S的体验性）

简介

传统网页 和 使用Ajax网页的 区别

使用Ajax可以这么做：

AJAX的核心是XMLHttpRequest对象（XHR）

JQuery

使用

实现异步刷新

Ajax总结

三部曲

AJAX 和 JSON学习笔记相关推荐

最新文章

热门文章

JSON 后端传到前端（后台版）

传统网页和使用Ajax网页的区别