目錄

一. node.js和express

?二. 使用express創建后端服務

三. 創建前端

---

一. node.js和express

ajax是前端在不刷新的情況下訪問后端的技術，所以首先需要配置一個后端服務，可以使用node.js和express。

首先生成一個空項目，新建main目錄，如圖所示。

下載安裝node就不演示了。

接下來使用node安裝express，直接在終端輸入npm i express即可，該java包會下載到項目根目錄下的node_modules目錄中（可以看到項目下多了node_modules目錄和package.json和package_lock.json，這些是node安裝了包后就會自動創建的，不用管）

二. 使用express創建后端服務

1. 使用require導入express
2. const app = express()創建app
3. 使用app.get對前端的url請求生成相應的回調函數
4. 使用app.listen開啟服務進行監聽
5. 在終端輸入node ××.js開啟服務

如下圖所示，特別要注意需要使用res.setHeader()開啟跨域訪問

三. 創建前端

首先創建按鈕和展示框，如圖所示

接下來編寫ajax請求和處理代碼

1. 使用const xhr = new XMLHttpRequest()生成示例對象，使用該對象發送請求和處理回復
2. 使用xhr.open('GET',???'http://localhost:8080/hello')配置請求url
3. 使用xhr.send()發送請求
4. 使用xhr.onreadystatechange = function(){}綁定回調函數，當xhr的readyStage屬性變化的時候，就會觸發該回調函數。xhr的readyStage屬性有0,1,2,3,4五個值，當為0時，表示xhr剛創建，當為1時，表示已經執行open函數，當為2時，表示已經使用send發送請求，當為3時，表示已經部分返回，當為4時，表示已經全部返回

具體代碼如下圖所示，這里還有一個注意點，xhr.status是返回的狀態碼，如果狀態碼在200到300之間，都表示返回成功。

最后效果如下