AJAX教程

AJAX工作原理 AJAX教程

AJAX實例

用戶頁面發(fā)起一個請求，使用servlet輸出數(shù)據(jù)到jsp

練習使用HttpServletResposne輸出。pint

使用servlet輸出一個字符串響應ajax請求

根據(jù)省份id查詢省份名稱

需求：用戶在文本框架輸入省份的編號id，在其他文本框顯示省份名稱

● 項目環(huán)境準備：

數(shù)據(jù)庫：springdb

數(shù)據(jù)表：

● 省份信息表：

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;

表數(shù)據(jù)在課件資源目錄\數(shù)據(jù)庫文件\xxx.sql文件

● 項目結構：

項目是一個web應用， index.jsp發(fā)送請求， SearchServlet接收請求，調用ProvinceDao從數(shù)據(jù)庫獲取指定id的省份名稱。

實現(xiàn)步驟：

1.在idea新建 web application : 項目名稱 ajaxweb

2. 配置tomcat服務器

3. 創(chuàng)建library

項目中需要訪問數(shù)據(jù)庫，需要加入myql驅動

第一步：點擊“Project Structure”按鈕

第二步：添加jar

第三步：Modules添加依賴庫

在彈出的窗口選擇上面創(chuàng)建的庫mylib ，同時把tomcat庫也加入到當前項目

4. 在index.jsp中創(chuàng)建XMLHttpRequest對象

定義表單：

創(chuàng)建XMLHttpRequest對象

5. 創(chuàng)建ProvinceDao訪問數(shù)據(jù)庫

方法定義：

定義變量：

訪問數(shù)據(jù)庫：

finally 關閉資源

返回結果：

6. 創(chuàng)建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. 部署項目，在瀏覽器訪問應用