一起了解AJAX

  • 注册账号的时候账号不能重复,通过AJAX实现实时验证当前注册的账号是否存在。

1.1register.jsp.

一起了解AJAX_第1张图片


1.2HomeRegisterServlet.

一起了解AJAX_第2张图片


2.JSON概述.

2.1何为JSON.

  • JSONJavaScript 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

一起了解AJAX_第3张图片


3.1.2前端解析.

  • 前端接收后台返回的 json字符串,并解析成 js里面的对象或者数组;

  • 方式一:手动解析(不推荐):

一起了解AJAX_第4张图片

  • 手动解析还有一种是:eval() 方法;

  • 方式二:自动解析(推荐):

一起了解AJAX_第5张图片


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

3.2.1解析JSON数组情况.

  • 前端.

一起了解AJAX_第6张图片

  • 后台:

一起了解AJAX_第7张图片


3.2.2解析JSON对象情况.

  • 前端:

一起了解AJAX_第8张图片

  • 后台:

一起了解AJAX_第9张图片


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

4.1前端.

4.1.1HTML布局.

一起了解AJAX_第10张图片


4.1.2js代码.

一起了解AJAX_第11张图片


4.2后台.

你可能感兴趣的:(servlet,javascript,java)