ajax模拟post登录,03-发送 POST 请求（模拟用户登录操作）

# 发送 POST 请求(模拟用户登录操作)

需求：模拟用户登录操作。

* 编写页面：

~~~

~~~

* 编写 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);

}

```