# 發送 GET 請求（模擬用戶登錄操作）
編寫頁面
```
<span id="result"></span>
<form>
<input type="text" id="username" name="username" placeholder="用戶名">
<input type="text" id="password" name="username" placeholder="密碼">
<input id="login" type="button" value="登錄">
</form>
```
編寫Ajax代碼
```
window.onload = function(){
var loginEle = document.querySelector('#login');
loginEle.onclick = function(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var params = 'username=' + username + '&password=' + password;
var ajax = new XMLHttpRequest();
ajax.open('get', '/login?' + params, true);
ajax.onreadystatechange = function () {
if(ajax.readyState == 4 && ajax.status == 200){ // 代表后臺處理完畢且響應 200
// 執行對應邏輯
console.log(ajax.responseText);
document.getElementById('result').innerText = ajax.responseText;
}
}
ajax.send();
}
}
```
編寫后臺代碼
```
const express = require('express');
const app = express();
app.use('/static', express.static(path.join(__dirname, 'static')));
app.get('/login', (req, res) => {
console.log(req.query);
if('zs' == req.query.username && '12345' == req.query.password) {
res.send('登錄成功');
}else{
res.send('登錄失敗');
}
});
app.listen(8888, () => {
console.log('running...');
});
```
## GET 方式中文亂碼
部分瀏覽器在使用 AJAX 發送 GET 請求攜帶中文參數時，不會自動對 URL 進行編碼（根據 URL 的編碼規范，瀏覽器會把 URL 中的非 ASCII 字符按照某種編碼格式（chrome 是 utf-8）編碼成 byte 數組后，轉成 16 進制數字，然后在每個 16 進制數字前加上 % 分隔），就會出現亂碼現象。
~~~
var params = encodeURI('username=' + useranme + '&password=' + password);
// 參數放在路徑針對中文要編碼
~~~
# 緩存問題
AJAX 能提高頁面載入的速度主要的原因是通過 AJAX 減少了重復數據的載入，也就是說在載入數據的同時將數據緩存到內存中，一旦數據被加載其中，只要我們沒有刷新頁面，這些數據就會一直被緩存在內存中，當我們提交的 URL 與歷史的 URL 一致時，就不需要提交給服務器，也就是不需要從服務器上面去獲取數據，雖然這樣降低了服務器的負載提高了用戶的體驗，但是我們不能獲取最新的數據。為了保證我們讀取的信息都是最新的，我們就需要禁止他的緩存功能。解決方式有以下幾種：
* 在 URL 后面加上一個隨機數：Math.random()。
* 在 URL 后面加上時間搓：new Date().getTime()。
* 在使用 AJAX 發送請求前加上 ajax.setRequestHeader('If-Modified-Since', '0')。
* 在使用 AJAX 發送請求前加上 ajax.setRequestHeader('Cache-Control', 'no-cache')。
```
ajax.open('get',?'/login?'?+?param?+?newDate(),?true);
```
