# 发送 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);
```
