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.bjpowernode.controller.SearchServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>SearchServlet</servlet-name>
        <url-pattern>/searchProvince</url-pattern>
    </servlet-mapping>

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