JavaWeb14(ajax02判断账号是否存在&JSON介绍&AJAX+JSON字符串和对象之间的转换&JSON实现自动补全)

一.AJAX实现即时检查用户名是否存在

1.1 效果预览

1.2 代码实现

①html代码

②ajax请求

③底层代码

2.JSON概述.

2.1何为JSON.

• JSON即 JavaScript Object Notation （js对象标记） ,是一种轻量级的数据交换格式，是一个序列化的对象或数组，易于人阅读和编写，同时也易于机器解析和生成 。
  

2.2为什么需要JSON.

• 服务器响应给浏览器的数据应该是字符串类型 ，但是如果数据量比较大，我们就需要在服务器端将数据拼接成一个良好格式的字符串数据，响应给浏览器，浏览器根据格式再进行数据的解析和使用。而json格式的字符串就是一种良好的格式， 它能在 JavaScript 对象和字符串之间得以快速转换 。
  

2.3JSON格式介绍.

2.3.1JSON对象格式.

• 格式：{"key":value,"key":value}；
  
• 格式解释：

1. 对象用花括号包裹；
   
2. 对象的内容是一组组键值对：key/value；
   
3. 键必须是字符串类型(加双引号)，值可以是Java任意类型；
   
4. 键值之间用末梢隔开，每对键值对之间用分号隔开。
   

• 如：{ "uname":"王琳凯", "age":20, "info":"泰裤辣椒!" }。
  

2.3.2JSON数组格式.

• 格式：[元素1,元素2,元素3,元素4,元素5];
  
• 格式解释：

1. 数组用中括号包裹；
   
2. 数组的内容是任意类型的元素，元素之间用逗号隔开。
   

• 如：[1,2,3,4,5,6,7,8,9,10].
  

2.3.3JSON对象数组格式.

• 格式：[{"name":"张三","age":28},{"name":"李四","age":38},{"name":"王五","age":48}]
  
• 格式解释：中括号里面包N哥裹花括号，每个花括号就是一个对象，花括号之间用逗号隔开。
  

3.JSON字符串的解析.

3.1前台解析后台传来的JSON字符串.

3.1.1后台处理.

• 后台把 Java对象或者集合解析成 JSON字符串，并传到前台；
  
• 需要通过第三方 jar包：fastjson 或者 jackson，课程使用 fastjson；
  

3.1.2前端解析.

• 前端接收后台返回的 json字符串，并解析成 js里面的对象或者数组；
  
• 方式一：手动解析（不推荐）：
  

• 手动解析还有一种是：eval() 方法；
  
• 方式二：自动解析（推荐）：
  

3.2后台解析前台传来的JSON字符串.

3.2.1解析JSON数组情况.

• 前端.
  

• 后台：
  

3.2.2解析JSON对象情况.

• 前端：
  

• 后台：
  

4.AJAX+JSON实现自动补全.

4.1前端.

4.1.1HTML布局.

4.1.2js代码.

4.2后台.