【nodeJs】用nodeJs实现一个简单的前后端交互的例子

短命女 2022-05-24 12:35 268阅读 0赞

#### 实现效果图： ####

![这里写图片描述][70]

#### Ajax知识补充： ####

1，创建XMLHttpRequest对象：

var xmlHttp = new XMLHttpRequest();

2， 向服务器发送请求：

xmlHttp.setRequestHeader(header,value)  //向请求添加http头
    xmlHttp.open(method, url, async) //async:true(异步） false（同步）
    xmlHttp.end(string)   //string仅用于POST请求

3， 服务器响应

获得来自服务器的响应，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。  
responseText 获得字符串形式的响应数据。  
responseXML 获得 XML 形式的响应数据。  
4， onreadystatechange 事件。  
每当 readyState 改变时，就会触发onreadystatechange 事件。  
readyState 属性存有 XMLHttpRequest 的状态信息。  
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <input type="text" id="username" placeholder="请输入用户名">
        <button id="bt">提交</button>
        <h1 id="test"></h1>
    
        <script src="index.js"></script>
    </body>
    
    </html>

index.js

var test = document.getElementById('test');
    var bt = document.getElementById('bt');
    
    bt.onclick = function () { 
        var value = document.getElementById('username').value;
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange=function() { 
            if (xmlHttp.readyState==4 && xmlHttp.status==200)
            {
                test.innerHTML = xmlHttp.responseText;
            }
        };
    
        xmlHttp.open('POST', 'http://127.0.0.1:3000/', true); 
        xmlHttp.send(value);      //吧input框中的value发送过去
    };

app.js

var http = require('http');
    
    var server = http.createServer(function (req, res) { 
        var body = '';
        req.on('data', function(data) {       // 接收客户端发送过来的数据， 也就是 xmlHttp.send(value);
            body += data;
        });
    
        req.on('end', function() { 
            res.writeHeader(200, {
                'Content-Type': 'text/plain',
                'Access-Control-Allow-Origin': '*'    //解决跨域问题
            });
            res.write("hello:" + body);
            res.end();
        })
    });
    
    server.listen(3000, function () { 
        console.log('server start at localhost:3000');
    });
    
    
    执行node app.js   然后在html页面中输入用户名，点击之后就可以看到后端返回的值了

[70]: /images/20220524/aa2d2f48fa8e401c8d561cfb1ac19be6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 Nodejs构建一个简单的UDP服务端

//导入模块 var dgram=require('dgram'); //创建udp服务器 var server=dgram.createS...

梦里梦外;/ 2024年04月19日 06:21/ 0 赞/ 59 阅读

相关也谈基于NodeJS的全栈式开发（基于NodeJS的前后端分离）

随着不同终端(Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开

末蓝、/ 2022年06月16日 08:44/ 0 赞/ 193 阅读

相关【nodeJs】用nodeJs实现一个简单的前后端交互的例子

实现效果图： ![这里写图片描述][70] Ajax知识补充： 1，创建XMLHttpRequest对象： var xmlHttp = new XMLH

短命女/ 2022年05月24日 12:35/ 0 赞/ 269 阅读

相关【NodeJS】最简单的不用路由及框架的前后台交互

声明：index.html 与 app.js位于同一级目录 POST 请求 post方式提交的数据，需要监听两个事件： data —— 当请求发送数据会触发da

本是古典何须时尚/ 2022年05月24日 11:50/ 0 赞/ 132 阅读

相关【nodeJS】一个最简单的express程序

执行npm install express 安装好express后就可以使用express框架了下面是一个最简单的express程序 var ex

桃扇骨/ 2022年05月24日 11:39/ 0 赞/ 321 阅读

相关【NodeJS】用NodeJs写一个最简单的http服务器

const http = require('http') http.createServer(function(req, res) { r

浅浅的花香味﹌/ 2022年05月10日 02:44/ 0 赞/ 326 阅读

相关 NodeJS -- 简单实现一个可写流

实现node.js里面的可写流主要在于俩个点 1：有一个缓冲区，用于对没有来得及写入的数据进行缓存 2：有一个字段用来标记当前是否为写入状态。在代码体现为, this.

红太狼/ 2022年04月24日 11:54/ 0 赞/ 243 阅读

相关【NodeJs】用NodeJs模拟一个cookie

var express = require('express'); var cookieParser = require('cookie-parser');

川长思鸟来/ 2022年02月28日 04:34/ 0 赞/ 369 阅读

相关 NodeJS -- 一个简单的静态资源服务器

我们的目标是创建一个静态服务器，我们可以指定主机，端口，和根目录，如果访问的是文件夹，那么就显示文件目录，如果是文件，那么就显示出来。思路：我们使用http模块创建一个服务

女爷i/ 2022年01月30日 03:49/ 0 赞/ 399 阅读

相关 NodeJS -- 简单的实现一个登录功能

实现目标：默认起始页面时登录页面，输入账号密码，如果没有此账号那么跳到注册页面，注册成功后进入个人页面。登录时，如果账号密码不匹配，那么跳到错误页面，三秒后跳到登录页面。

谁践踏了优雅/ 2022年01月23日 07:09/ 0 赞/ 485 阅读