本篇文章將繼續(xù)上篇Ajax知識點進行更新，上篇Ajax傳送門??：

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

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

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

1）數(shù)據(jù)庫：springdb?

2）數(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 文件

項目結(jié)構：

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

實現(xiàn)步驟：

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

2.?配置tomcat?服務器

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

定義表單：

4. 創(chuàng)建XMLHttpRequest 對象

5.?創(chuàng)建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.?發(fā)布應用到tomcat?服務器，在瀏覽器訪問index.jsp，得到省份名稱

8.?添加mysql?驅(qū)動

可以在WEB-INF 目錄下創(chuàng)建lib 文件，用來存放jar 文件，把準備好的mysql-connector-java-5.1.6.jar 拷貝到lib 目錄下。

在Project Structure?窗口中，選擇你的modules，選擇Dependencies

確認修改：

點擊“Fix”后選擇 Add lib to the artifact

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

方法定義：

定義變量：

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

finally 關閉資源

返回結(jié)果：

10.?修改之前創(chuàng)建的Servlet

11.?修改index.jsp?的 js?代碼

?12.?部署項目，在瀏覽器訪問應用

使用json?作為數(shù)據(jù)交換格式

需求：根據(jù)省份編號 id，查詢省份的全部數(shù)據(jù)，數(shù)據(jù)格式 json?

項目結(jié)構：

實現(xiàn)步驟：

1.?添加處理json?的工具庫

jackson：是非常有名的處理 json 的工具庫。使用jackson 可以實現(xiàn) java 對象到json 格式字符串的轉(zhuǎn)換，也可以實現(xiàn) json 字符串轉(zhuǎn)為json 對象。

把下面三個jar 文件復制到/WEB-INF/lib 目錄中。

2.?創(chuàng)建實體類Province

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

?方法定義：

數(shù)據(jù)庫操作：

其他代碼同selectProvinceName()方法。

4.?創(chuàng)建新的Servlet?對象

5.?創(chuàng)建searchJson.jsp，獲取 json?數(shù)據(jù)

頁面定義：

AJAX 請求處理：

6.?部署應用，瀏覽器訪問

異步請求

XMLHttpRequest 對象open( method , url, true ) 第三個參數(shù) true 表示異步請求

異步請求特點：

1)?某一個時刻，瀏覽器可以委托多個異步請求對象發(fā)送請求，無需等待請求處理完成。

2)?瀏覽器委托異步請求對象工作期間，瀏覽器處于活躍狀態(tài)。可以繼續(xù)向下執(zhí)行其他命令。

3) 當響應就緒后再對響應結(jié)果進行處理

實現(xiàn)步驟：

1.?設置異步對象open?方法第三個參數(shù)為true

//初始請求參數(shù)?

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

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

//發(fā)送請求?

xmlHttp.send();

alert("我是在異步請求之后的執(zhí)行代碼"）

3.?SearchServletJson?類的 doGet?方法第一個加入斷點

4. 部署應用，在瀏覽器訪問應用。

????點擊“搜索”按鈕，請求發(fā)送到 Servlet，程序暫停執(zhí)行， js?中 alert?執(zhí)行繼續(xù)執(zhí)行，沒有等待請求處理完成，瀏覽器窗口彈窗“我是在異步請求之后的執(zhí)行代碼”字符串。?

?

同步請求

XMLHttpRequest 對象open( method , url, false ) 第三個參數(shù) false 表示同步請求

同步請求特點：

1)?某一個時刻，瀏覽器只能委托一個異步請求對象發(fā)送請求，必須等待請求處理完成。

2)?瀏覽器委托異步請求對象工作期間，瀏覽器處于等待狀態(tài)。不能執(zhí)行其他命令。

3)?不推薦使用。

實現(xiàn)步驟：同 1.4.3 步驟，需要open(method,url,false)第三個參數(shù)設為false

?練習

1.?在文本框內(nèi)輸入省份名稱中的某幾個字，把符合條件的省份名稱顯示一個<div>中

2.?在文本框輸入省份名稱，點擊按鈕使用alert?顯示出這個省份的城市數(shù)量， 例如輸入山西，alert?彈窗顯示?

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

最后奉上視頻教程??，視頻觀看效果更佳?。∽哌^路過別忘素質(zhì)三連哦~~