ajax axios,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

编写页面：

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

});