用Ajava非同步請求

一. 前言

在前上一章教程中，我們把HTML頁面放到了伺服器端。
本章將在上一章的基礎上，進一步擴充套件程式。

注：
1.本文針對初學Java的同學訓練學習思路，請不要太糾結於細節問題。
2.本文旨在達到拋磚引玉的效果，希望大家擴充套件本例子，以學到更多知識的精髓。

學習本章需要準備的知識：
1.讀完本系列教程的前面章節。
2.理解JavaScript基本語法。
3.理解Ajax請求。

二. 步入正題
話不多說，大家自己理解，下面步入正題：

本章我們講客戶端的同步請求轉化為非同步請求。
我們先看一下同步請求和非同步請求的區別：

按鈕的提交屬於同步請求，從點選按鈕到伺服器傳回結果之間，瀏覽器是不能響應任何事件。
本章我們讓按鈕點選後，不提交頁面，而是通過Ajax發起非同步請求來獲取資料，並顯示到本頁面上。

不同的瀏覽器對Ajax的實現控制元件不同：
比如IE瀏覽器：

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

Chrome瀏覽器：

xmlHttp = new XMLHttpRequest();

我們用Chrome方式給大家例子：
首先，點選按鈕後不提交頁面，而是呼叫JavaScript程式碼。
我們做如下修改：

修改前：<input type="submit" value="query"/>
修改後：<input type="button" value="query" onclick="doQuery()"/>

如果input型別是submit，則點選後會提交其所屬的form。

接下來我們實現doQuery()方法如下：

 1 <script type="text/javascript">
 2 function doQuery(){
 3     // 點選後，首先顯示loading...
 4     document.getElementById("result").innerHTML = "loading...";
 5     
 6     // 生成Ajax物件
 7     var xmlhttp = new XMLHttpRequest();
 8
 
     
 9     // 定義狀態改變時的回撥函式(在發起請求後，伺服器會向客戶端請求這個函式。這裡只是定義)
10     xmlhttp.onreadystatechange = function() {
11         
12         // 在伺服器處理請求完畢後，xmlhttp.readyState值為4(XMLHttpRequest.DONE)
13         if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
14             
15             // 200 表示正常返回
16            if (xmlhttp.status == 200) {
17                    // 顯示伺服器返回的資料
18                document.getElementById("result").innerHTML = xmlhttp.responseText;
19            }else {
20                    // 顯示loading data error.
21                document.getElementById("result").innerHTML = "loading data error.";
22            }
23         }
24     };
25     
26     // 獲取頁面上的personid的值
27     var personid = document.getElementById("personid").value;
28     
29     // 發起ajax請求
30     xmlhttp.open("GET", "/person?personid="+personid, true);
31     xmlhttp.send();
32 }
33 </script>

三. 測試

啟動伺服器：

向伺服器請求person.html檔案，在瀏覽器端輸入1，點query按鈕：

顯示查詢結果：

完整程式請大家從[這裡]下載

如有問題，大家來我的網站進行提問。
https://www.java123.vip/qa

版權宣告：本教程版權歸java123.vip所有，禁止任何形式的轉載與引用。