本篇文章将继续上篇Ajax知识点进行更新，上篇Ajax传送门👇：

根据省份id 查询省份名称

需求：用户在文本框架输入省份的编号 id，在其他文本框显示省份名称

项目环境准备：  

1）数据库：springdb 

2）数据表：

省份信息表：

CREATE TABLE `province` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL COMMENT '省份名称',

`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',

`shenghui` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

 城市信息表：

CREATE TABLE `city` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL,

`provinceid` int(11) DEFAULT NULL, PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;

表数据在课件资源目录\数据库文件\xxx.sql 文件

项目结构：

项目是一个web 应用， index.jsp 发送请求， SearchServlet 接收请求， 调用ProvinceDao 从数据库获取指定 id 的省份名称

实现步骤：

1. 在idea 新建 web application : 项目名称 ajaxweb

2. 配置tomcat 服务器

3. 在index.jsp 中创建 XMLHttpRequest 对象

定义表单：

4. 创建XMLHttpRequest 对象

5. 创建Servlet 处理Ajax 请求。

6. web.xml 文件，注册servlet

<servlet>

<servlet-name>SearchServlet</servlet-name>

<servlet- class>com.bjpowernode.controller.SearchServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SearchServlet</servlet-name>

<url-pattern>/searchProvince</url-pattern>

</servlet-mapping>

 

7. 发布应用到tomcat 服务器，在浏览器访问index.jsp，得到省份名称

8. 添加mysql 驱动

可以在WEB-INF 目录下创建lib 文件，用来存放jar 文件，把准备好的mysql-connector-java-5.1.6.jar 拷贝到lib 目录下。

在Project Structure 窗口中，选择你的modules，选择Dependencies

确认修改：

点击“Fix”后选择 Add lib to the artifact

9. 创建类ProvinceDao 访问数据库

方法定义：

定义变量：

访问数据库：

finally 关闭资源

返回结果：

10. 修改之前创建的Servlet

11. 修改index.jsp 的 js 代码

 12. 部署项目，在浏览器访问应用

使用json 作为数据交换格式

需求：根据省份编号 id，查询省份的全部数据，数据格式 json 

项目结构：

实现步骤：

1. 添加处理json 的工具库

jackson：是非常有名的处理 json 的工具库。使用jackson 可以实现 java 对象到json 格式字符串的转换，也可以实现 json 字符串转为json 对象。

把下面三个jar 文件复制到/WEB-INF/lib 目录中。

2. 创建实体类Province

3. 在ProvinceDao 中增加方法，返回对象

 方法定义：

数据库操作：

其他代码同selectProvinceName()方法。

4. 创建新的Servlet 对象

5. 创建searchJson.jsp，获取 json 数据

页面定义：

AJAX 请求处理：

6. 部署应用，浏览器访问

异步请求

XMLHttpRequest 对象open( method , url, true ) 第三个参数 true 表示异步请求

异步请求特点：

1) 某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。

2) 浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令。

3) 当响应就绪后再对响应结果进行处理

实现步骤：

1. 设置异步对象open 方法第三个参数为true

//初始请求参数 

xmlHttp.open("get","searchProvinceJson?proid="+proid,true);

2. send()后面，增加 alert()

//发送请求 

xmlHttp.send();

alert("我是在异步请求之后的执行代码"）

3. SearchServletJson 类的 doGet 方法第一个加入断点

4. 部署应用，在浏览器访问应用。

    点击“搜索”按钮，请求发送到 Servlet，程序暂停执行， js 中 alert 执行继续执行，没有等待请求处理完成，浏览器窗口弹窗“我是在异步请求之后的执行代码”字符串。 

 

同步请求

XMLHttpRequest 对象open( method , url, false ) 第三个参数 false 表示同步请求

同步请求特点：

1) 某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成。

2) 浏览器委托异步请求对象工作期间，浏览器处于等待状态。不能执行其他命令。

3) 不推荐使用。

实现步骤：同 1.4.3 步骤，需要open(method,url,false)第三个参数设为false

 练习

1. 在文本框内输入省份名称中的某几个字，把符合条件的省份名称显示一个<div>中

2. 在文本框输入省份名称，点击按钮使用alert 显示出这个省份的城市数量， 例如输入山西，alert 弹窗显示 

3. 表示山西省在 city 表中有三个城市。

最后奉上视频教程👇，视频观看效果更佳！！走过路过别忘素质三连哦~~