Ajax第二課學習（小案例實踐）
阿新 • • 發佈：2020-12-28
技術標籤：Ajax
需求：get請求點選按鈕發請求，講請求回來的資料呈現到div中
例如：
一開始沒資料：
點選按鈕之後：
頁面程式碼如下：
<title>Ajax get請求</title>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 需求：點選按鈕，傳送請求，將請求回來的資料呈現在div裡 -- 服務端程式碼如下：
//1.引入express
const { request, response } = require('express')
const express = require('express')
//2.建立應用物件
const app = express()
//建立路由規則
// request是對請求報文的封裝
// response是對響應報文的封裝
app.get('/getServer', (request, response) => {
//設定響應頭 響應體名字Access-Control-All-Origin ， *號是設定允許跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//設定響應體
response.send('Hello AJAX')
})
//監聽埠啟動服務
app.listen(8000, () => {
console.log('服務已經啟動，8000 埠監聽中');
})
2.post請求，需求：把滑鼠移動到div，div裡面顯示請求回來的內容，移開就不顯示
思路其實跟get請求差不多，只是把伺服器的get換乘post或者all，all是兩種相容
頁面程式碼：
<body>
<!-- 當滑鼠移動到div時。顯示請求回來的內容 -->
<div id="result"></div>
<script>
const result = document.getElementById('result')
result.onmouseover = () => {
const xhr = new XMLHttpRequest() //建立例項
xhr.open('post', 'http://127.0.0.1:8000/postServer')//傳送請求
xhr.send("id=007&name=a") //post傳參
xhr.onreadystatechange = () => {//與伺服器進行資料互動
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response
}
}
}
result.onmouseout = () => {
result.innerHTML = ''
}
</script>
</body>
服務端程式碼：
//1.引入express
const { request, response } = require('express')
const express = require('express')
//2.建立應用物件
const app = express()
//建立路由規則
// request是對請求報文的封裝
// response是對響應報文的封裝
app.all('/postServer', (request, response) => {
//設定響應頭
response.setHeader('Access-Control-Allow-Origin', '*')
response.send('Hello 我是post請求')
})
//監聽埠啟動服務
app.listen(8000, () => {
console.log('服務已經啟動，8000 埠監聽中');
})
效果圖：
一開始：
滑鼠移動到div:
移走之後就又消失了