AJAX教程
AJAX工作原理 AJAX教程

AJAX实例

用户页面发起一个请求， 使用servlet输出数据到jsp

练习使用HttpServletResposne输出。pint

使用servlet输出一个字符串响应ajax请求

根据省份id查询省份名称

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

● 项目环境准备：

数据库：springdb

数据表：

● 省份信息表：

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. 创建library

项目中需要访问数据库，需要加入myql驱动

第一步：点击“Project Structure”按钮

第二步：添加jar

第三步：Modules添加依赖库

在弹出的窗口选择上面创建的库mylib ，同时把tomcat库也加入到当前项目

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

定义表单：

创建XMLHttpRequest对象

5. 创建ProvinceDao访问数据库

方法定义：

定义变量：

访问数据库：

finally 关闭资源

返回结果：

6. 创建Servlet 处理请求，返回结果给XMLHttpRequest对象

7. web.xml文件注册SearchServlet

<servlet>
        <servlet-name>SearchServlet</servlet-name>
        <servlet-class>com.sxbdqn.controller.SearchServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>SearchServlet</servlet-name>
        <url-pattern>/searchProvince</url-pattern>
    </servlet-mapping>

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

 

使用json作为数据交换格式

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

项目结构：

 

实现步骤：

1. 添加处理json的工具库

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

添加jackson后

2.创建实体类Province

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

方法定义：

数据库操作：

其他代码同selectProvinceName()方法。

4.创建新的Servlet对象

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

表单定义：

AJAX请求处理：

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

 

练习

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

2.在html中加入一个<select>内容是省份名称， 通过onchange()事件，把所有省份名称添加到中。 把这个省份下的所有市名称添加到另一个<select>, 这叫做级联查询。

AJAX工作原理 AJAX教程