一、AJAX

概念

AJAX是指异步JavaScript及其XML(Asynchronous JavaScript And XML)

异步：

    局部刷新，可以指定某些元素和服务器同步（用户几乎机会不到刷新）

同步：

    全局刷新，页面所有元素都和服务器同步一次，就是刷新（F5），超链接和表单提交等都属于同步

JavaScript：

    ajax的核心还是js

xml：

    异步数据传输格式，早期使用的较多，因为解析麻烦，后来被json替代、

案例

客户端页面

服务器端

运行

二、jQuery

vue，node等，属于重量级的JavaScript框架，适合前端专业开发者

jQuery是轻量级的JavaScript框架，作为后台开发者，离不开js编码，jQuery可以大大提高js编码效率。

概念

选择器

类似于css的选择器

过滤器

和选择器组合使用，在选择若干元素后，还可以进行过滤

方法

案例

1.输出选中按钮个数

原生JavaScript

jQuery写法

新建存放js文件的包，将jquery类库文件放进去

运行

2.表格隔行换色

运行

3.简易树状菜单

运行

三、jQuery的AJAX

常用的两个方法

案例

基本使用

t19.jsp

t19op.jsp

运行逻辑为t19.jsp中按钮将请求传递给t19op.jsp进行处理，t19.jsp得到回调后再显示再html页面中，jQuery只是简化了代码的编写，与纯AJAX没有太大的区别

省市级联下拉列表

t20.jsp，因为要做到根据选择不同的省来显示不同的市，所以，在前端不直接写死html，而选择异步回调显示对应省中的市

t20op.jsp

运行

四、json

JavaScript Object Notation，其实就是JavaScript的对象表示形式，因为语法比较简洁，后来衍生成了一种通用的数据传输格式。json官网对各个语言都提供了json对象转化的工具。

js的对象表示

json语法

支持两种情况

1，对象

{属性：属性值，属性：属性值，...属性：属性值}

2，集合

[  {属性：属性值，属性：属性值，...属性：属性值}，  {属性：属性值，属性：属性值，...属性：属性值}，  ...  {属性：属性值，属性：属性值，...属性：属性值}]

注意

json字符串（加了引号）和json对象完全不一样，我们一般操作的都是json对象

案例

jQuery的ajax加载json数据，以Course对象为例

java端解析json使用的是，将其放置在lib目录下即可

前端

运行

写在最后：关于用AJAX来进行数据库的CRUD读者可尝试自行完成，业务逻辑代码部分与昨天的基本一致这里知识换了一种请求的形式。

网盘链接：链接: pan.baidu.com/s/1T8Tb8htM… 提取码: 1234