【造轮子】使用express+nodejs搭建学习测试Ajax用的服务器

最新推荐文章于 2022-08-10 23:41:28 发布

bubblecode

最新推荐文章于 2022-08-10 23:41:28 发布

阅读量268

点赞数

分类专栏：造轮子文章标签： Ajax Node.js 前端 JavaScript

本文链接：https://blog.csdn.net/miko2018/article/details/99977366

版权

造轮子专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

学习Ajax最好是将HTML文档放在服务器上进行，这样可以保证各浏览器执行结果的统一，许多教材使用了php(服务器用集成的wamp)作为后端代码进行讲解，这里使用nodejs自己搭一个简单的服务器，帮助开发者学习Ajax相关知识。

开始

首先我们新建工程文件夹demo，文件树结构如下
在这里插入图片描述
此后打开终端终端cd到demo文件夹下，输入以下命令

$ npm init -y
$ npm install --save express art-template express-art-template body-parser

待文件加载完成后，让我们先在ajax.html和ajax.js中加一些东西。

ajax.html，一个简单的表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test</title>
    <script src="ajax.js"></script>
</head>
<body>
    <form action="/index" method="post">
        <input type="text" name="name"><br>
        <input type="submit">
    </form>
</body>
</html>

ajax.js 简单的代码

window.onload = function() {
	alert(1);
};

一切搞定后，我们在app.js中开始搭建一个简单的服务器
<代码如下>

var express = require('express');
var bodyParser = require('body-parser');	//用于解析post请求体

var app = express();

app.set('views','www');		
app.use(express.static('./www'));	// 公开www目录，可以在这里存放我们要测试ajax的html/css/js文件
app.engine('html', require('express-art-template'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/index', function(request, response) {
    response.render('ajax.html');
});

app.get('/', function(request, response) {
    response.redirect('/index');	//重定向到主界面
});

app.post('/index', function(request, response) {
    console.log(request.body);
    if(request.body.name == 'bubblecode') {
        response.status(200).json({	// 服务器响应，测试用
            code: 0,
            msg: 'hello' + request.body.name
        });
    }
    else {
        response.status(200).json({
            code: 1,
            msg: 'wrong...'
        });
    }
});

app.listen(8888, function() {
    console.log('running...');
});

然后完善一下ajax.js文件，样例代码如下图

【注】这里我没有使用jQuery的ajax，而是自己用原生XMLHttpRequest撸了一个ajax，便于理解ajax原理。

function ajax(obj) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                obj.callback(xhr.responseText);
            }
            else {
                alert('server error');
            }
        }
    };
    
    obj.url = obj.url + "?rand=" + Math.random();
    var dat = JSON.stringify(obj.data)
                .replace(/[{}"']/g, "")
                .replace(/,/g, "&")
                .replace(/:/g, "=");	/*格式化参数，{"name":"wu","age":2}转化为
                								"name=wu&age=2"的形式。*/
    
    // 判断请求类型（假定只有 GET 和 POST 两种）
    if(obj.method.toLowerCase() === 'get') {
        obj.url = obj.url + "&" + dat;
        xhr.open(obj.method, obj.url, obj.async);
        xhr.send(null);
    }
    else if(obj.method.toLowerCase() === 'post') {
        xhr.open(obj.method, obj.url, obj.async);
        // 发送POST请求必须设置如下响应头，否则无法发送。
    	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    	xhr.send(dat);
    }
    else {
        alert('unexpected arguments');
    }
}


window.onload = function() {
    var f = document.forms[0];		//获取第一个表单。
    f.addEventListener('submit', function(e) {
        e.preventDefault();
        ajax({
            method:'post',
            url:'/index',
            data:{
                name:f.name.value		//获取表单数据。
            },
            callback: function(ret) {	// 回调函数
                ret = JSON.parse(ret);
                alert(ret.msg);
            },
            async:true		// 异步
        });
    }, false);
};

至此，一个简单的服务器就搭好了，如果要测试Ajax只需将html、js文件一同放在www目录里。启动服务器，浏览器中输入 http://127.0.0.1:8888/你要测试的html文件名.html 即可访问到了。然后在app.js中写入一些用来交互的路由即可。

PS: 如果app.js代码过多会显得冗余，因此我们可以将其中描述路由的部分单独拆分成一个模块(例如router1.js、router2.js等等)。

服务器的进一步完善，会在以后放出。

bubblecode

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【造轮子】使用express+nodejs搭建学习测试Ajax用的服务器

前言学习Ajax最好是在服务器端进行，这样可以保证各浏览器执行结果的统一，许多教材使用了php(服务器用集成的wamp)作为后端代码进行讲解，这里使用nodejs自己搭一个简单的服务器，帮助开发者学习Ajax相关知识。开始首先我们新建工程文件夹demo，文件树结构如下此后打开终端终端cd到demo文件夹下，输入以下命令$ npm init -y$ npm install --save...
复制链接

扫一扫

专栏目录