Ajax Axios

关于Ajax兼容性问题

function createAjax() {
    var ajax;
    try {       // 非 IE 
        ajax = new XMLHttpRequest();
    }
    catch (e) { // IE
        ajax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return ajax;
}

前端原生Ajax(get方式),后端使用node.js

• 前后端代码：

// 后端代码
const express = require('express');
const path = require('path');
const app = express();

app.use('/static', express.static(path.join(__dirname, 'static')));
app.get('/ajax', (req, res)=>{
    res.send('AJAX');
});

app.listen(8888, () => console.log('启动成功 8888'));



// 前端代码
// 这里代码运行浏览器环境中
// 创建 AJAX 对象
// ajax xhr
var ajax = new XMLHttpRequest();
// 设置请求路径 请求方式， 是否异步
ajax.open('get', '/ajax', true);
// 绑定监听函数， 监听 AJAX 对象的状态的改变
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status == 200){ //代表服务成功响应完  
        // console.log(ajax.responseText); // 若是文本数据可以从 AJAX 对象 responseText 属性上拿
        document.querySelector('#result').innerHTML = ajax.responseText;

    }
}
// 发送请求
ajax.send();

前端原生Ajax(post方式),后端使用node.js

• 编写页面：

<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 代码：

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);
    }
}

• 编写后台代码：

const express = require('express');
const app = express();

app.use(express.urlencoded({extended: false}));
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...');
});