JAVA WEB 重学day08

学习目标

1. 能够理解异步的概念
2. 能够了解原生 js 的 ajax
3. 能够使用 jQuery 的$.get()进行访问
4. 能够使用 jQuery 的$.post()进行访问
5. 能够使用 jQuery 的$.ajax()进行访问
6. 能够使用 jQuery3.0 的$.get()新增签名进行访问
7. 能够使用 jQuery3.0 的$.post()新增签名进行访问
8. 能够掌握 json 的三种数据格式
9. 能够使用 json 转换工具 Jackson 进行json 格式字符串的转换
10. 能够完成用户名是否存在的查重案例

ajax 概述

概念：Asynchronous JavaScript And XML 异步的 JavaScript 和 XML
作用：发送异步请求到服务器获取数据实现网页的局部刷新

⚫ JavaScript 作用：以前由浏览器直接将数据发送给服务器。现在由 JavaScript 后台发送请求给服务器，并且接收服务器返回结果。
⚫ XML 的作用：早期使用 XML 将服务器端的数据返回给浏览器。由浏览器通过 JS 去解析 XML 文件，在页面上显示出来。目前不用了，现在使用 JSON 格式来代替 XML 文件。用来接收服务器返回的数据。

同步请求与异步请求的区别

同步请求：浏览器发送的请求，请求如果没有响应回来则用户只能等待，无法执行其他操作。
异步请求：由JS发送的请求，用户不需要等待请求响应回来就可以继续执行其他操作。

jQuery异步请求方法1-全局get方法

1. get异步请求的参数有几个? 哪个参数是必须的?
   四个，url参数必须：请求地址

2. 请求参数的数据格式有几种? 分别是什么?
   格式1：键=值&…
   格式2：{键:值,…}

jQuery异步请求方法2-全局post方法

post方法提交异步请求相比get方法有什么好处？

 POST提交相对安全，而且没有数据大小限制。

jQuery异步请求方法3-全局ajax方法

服务器端实现

1. 设置响应类型和获取打印流对象
2. 获得用户名和密码
3. 判断用户名和密码是否正确
4. 如果正确则返回：欢迎您，admin，登录成功
5. 错误则返回：登录失败
   

** 前端页面实现**

1. 页面上有一个登录的表单数据。注：登录按钮是一个普通的button
2. 给登录按钮添加点击事件
3. 得到表单中所有的数据项
4. 使用$.ajax方法提交数据给服务器，设置url请求地址,data数据,method发送方式,dataType返回数据类型,success成功的回调函数，等属性。
5. 在回调函数中直接使用alert弹出服务器返回的数据
   

jQuery3.0新增方法-全局get和post方法

GET方法

POST方法

jQuery3.0新增get/post方法比原有ajax方法更好在什么地方?
直接写明了请求方法类型，代码更加简洁。
以后推荐大家使用jQuery3.0的新增的get或post方式发送异步请求。

JSON概述

• JSON本质上，就是一个“特殊格式”的字符串。
• JSON是网络上用来传输数据使用最广泛的数据格式之一。
• JSON出生草根，是Javascript的子集，是Javascript的SON，专门用来描述数据结构。

json的类型和语法

1. JSON是什么：一个特殊格式字符串

2. JSON的作用：用于异步请求时服务器与浏览器之间的数据传输

JSON转换工具-Jackson的使用

1. 导入json相关jar包

   jackson-annotations-2.2.3.jar
   jackson-core-2.2.3.jar
   jackson-databind-2.2.3.jar

2. 创建java对象或集合

3. 使用jackson的ObjectMapper对象的writeValueAsString方法进行转换

ObjectMapper对象中的方法	说明
String writeValueAsString(Object o)	将对象转成一个JSON格式的字符串形式

例子
实体类：User

测试类

JavaScrpit操作JSON的方法

语法	功能
JSON.parse(字符串)	将一个字符串转成JSON对象
JSON.stringify(JSON对象)	将一个JSON对象转成字符串