# 发送 POST 请求（模拟用户登录操作）
需求：模拟用户登录操作。
* 编写页面：
~~~
<span id="result"></span>
<form id="loginForm">
<input type="text" id="username" name="username" placeholder="用户名">
<input type="text" id="password" name="username" placeholder="密码">
<input id="login" type="button" value="登录">
</form>
~~~
* 编写 AJAX 代码：
* ## 注意加上
~~~
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
~~~
~~~
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('post', '/login', true);
// 参数进行 URL 编码，不然后台代码无法获取请求体中的参数
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.onreadystatechange = function () {
if(ajax.readyState == 4 && ajax.status == 200){ // 代表后台处理完毕且响应 200
// 执行对应逻辑
console.log(ajax.responseText);
document.getElementById('result').innerText = ajax.responseText;
}
}
ajax.send(params);
}
}
~~~
* 编写后台代码：
* ## 注意加上中间件app.use(express.urlencoded());
~~~
const express = require('express');
const app = express();
app.use(express.urlencoded());
app.use('/static', express.static(path.join(__dirname, 'static')));
app.post('/login', (req, res) => {
console.log(req.body);
if('zs' == req.body.username && '12345' == req.body.password){
res.send('登录成功');
}else{
res.send('登录失败');
}
});
app.listen(8888, () => {
console.log('running...');
});
~~~
# 超时处理
有时网络会出现问题或者服务端出问题导致请求时间过长，一般提示网络请求稍后重试，以增加用户的体验感。在代码中我们可以通过定时器和请求中断来实现超时处理的效果。
~~~
var timer = setTimeout(function () {
// 中断请求
ajax.abort();
}, 5000);
~~~
# 方法抽取
```
function ajax(mehtod, url, param, success, time){
var ajax;
try { // 非 IE
ajax = new XMLHttpRequest();
}
catch (e) { // IE
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
if(method == 'get'){
param = encodeURI(param);
url = url + '?' + param;
param = null;
}
ajax.open(method, url, true);
if(method == 'post'){
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
ajax.onreadystatechange = function () { // onload
if(ajax.readyState == 4 && ajax.status == 200){
success(ajax.responseText);
}
}
ajax.send(param);
var timer = setTimeout(function () {
ajax.abort();
}, time);
}
```
