【nodeJs】用nodeJs实现一个简单的前后端交互的例子_AC_greener的博客-程序员宅基地

技术标签： JavaScript  nodeJs  前后端交互  NodeJs  Ajax  

实现效果图：

这里写图片描述

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页面中输入用户名，点击之后就可以看到后端返回的值了
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AC_greener/article/details/80468555

智能推荐

android 短信迁移到iphone,将安卓手机上的短信导入到iphone上的方法_倪修智的博客-程序员宅基地

很多用安卓手机的朋友们换iphone5之后，之前手机里的一些数据想倒到新手机里都是比较棘手的问题，尤其是不同的操作系统，像android——ios这样，今天看到个新方法，特意转过来给大家分享一下，方法不算很难，大家看一下基本都没问题。准备工具：iPhone手机(需要越狱)，安卓手机，电脑(装有itools，office并可联网)，手机数据线。开始：1.在你的安卓手机下载安装qq同步助手，打开后登陆..._短信迁移到苹果手机

C#限制richtextbox的行数_uirichtextbox1 达到多少行 清空-程序员宅基地

可以设置richtextbox只显示固定行超过固定行自动移除_uirichtextbox1 达到多少行 清空

原创 基于微信小程序毕业设计题目选题课题 羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现（2）场地球馆预约 选日期和场地_小程序设计大赛热门选题是什么_黄菊华老师的博客-程序员宅基地

该页面是核心的预约页面：选择预约日期，选择场地类型，选择场地效果图wxml代码<form bindsubmit="yuyue"><view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">请选择预约日期</view> <navigator class="qukuai_you" url="">_小程序设计大赛热门选题是什么

new TypeReference用法 fastjson-程序员宅基地

new TypeReference用法 fastjson个人觉得涉及到的场景还是比较多的，多数我都用在调别人接口获取到的一些信息，然后映射实体的情况。不知道这个方法的时候每次拿到一个字符串想去映射对象的时候，就jsonobject各种转换，转的自己都不想看自己写的代码，废话不多说上代码！！！ //这个new typeReference导入的包是package com.alibaba.fastjson; //它还有一个包是package com.fasterxml.jack_new typereference

《PCI Express系统结构导读》-读后_pcie dca-程序员宅基地

这本《PCI Express系统结构导读》是我读过的少有的几本21世纪后初版(注意不是出版而是初版)的且是国人写的书之一，我指的不仅仅是技术书籍，任何书籍都是包括，包括历史类的，文学类的等等。 这本书很明显包含了作者的心血在里面，而不是东拼西凑的结果，不像别的很多技术书籍的作者，生怕读者不知道自己是个博士，搞的满书都是专业术语，数学公式，这年头谁没上过几年学啊，不是看不懂，而是根本就无法吸引读者，而这一本书，语言很通顺，也没有故作深奥，关键是很有条理，本来以为又是抄遍Li_pcie dca

FreeBSD下种类经典命令行全集(本人实用收集)_freebsd 经典-程序员宅基地

1>.setenv PACKAGEROOTftp://ftp.freebsdchina.org设置预下载的站点2>.setenv PACKAGESITEftp://ftp.freebsdchina.org/distfiles/设置好要从哪里下载的站点目录3>.pkg_add -r以PKG方式安装程序包4>.sysinstall 系统安装; 清理 por..._freebsd 经典

随便推点

打通混合云网络孤岛，EBN助力企业灵活构建云骨干网_ebn打通-程序员宅基地

据信通院调查报告显示，国内企业采用混合云的比例逐年攀升，其中超过60%的企业使用了不同公有云或私有云部署业务，因此同厂商公有云多地域互连、不同厂商公有云互连、公有云与用户私有云 / 本地IDC的互连成为企业使用混合云方案时的刚需。传统的做法是，用户首先向基础运营商申请两个区域之间的互连线路，然后经过运营商线路勘查、施工、开通后方可投入使用。不仅线路成本较高，且开通周期长达数月，难以满足互联网业务高速发展变化的需求。企业骨干网（以下简称EBN）是UCloud混合云网络推出的新一代网络互通产品，基于UClo_ebn打通

Microsoft.Cpp.Default.props Not found-程序员宅基地

现象原因找不到VCTargetsPath环境变量。解决设置系统环境变量Done_microsoft.cpp.default.props

在Apache服务器上安装SSL证书(Liunx系统下阿里云ssl证书安装)_apache安装ssl模块-程序员宅基地

本文为您带来详细的阿里云SSL证书安装到apache服务器，从而支持HTTPS安全访问的教程。操作步骤： 1.登录阿里云->控制台->产品与服务->SSL证书（应用安全）；如下图所示： 2 . 点击ssl证书进入ssl证书管理界面；如下图： 3.ssl证书管理界面有简单的流程图，这里首先应该购买证书，点击蓝色的 【购买证书】按钮；进入下图界面这里可以选择证书类型根据自己需求选择，这里我选择的是免费版的4 ...._apache安装ssl模块

HTML学习笔记三-程序员宅基地

HTML语言教程之三：文字布局(TEXT STYLE)标记行的控制 段(Paragraph) (可以看作是空行) 你好吗？很好。 你好吗？ 很好。换行 你好吗？很好。 你好吗？很好。不换行 请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！ 请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！ 文字的对齐(Alignment) ... ... #=left

java mvc接收json_Springmvc如何接收Json的request-程序员宅基地

前端通过ajax可以发送一个json给后端，这时候用springmvc如何处理呢？1 前端代码要指定contenttype为json，并且通过stirngfy将json转为一个字符串contentType:"application/json",data:JSON.stringify(jsondata),2 增加jackson的支持org.codehaus.jacksonjackson-mapper..._body raw编写json时出现the request sent by the client was syntactically incor

TCP连接复用（TCP Connection Reuse）_win10 tcp连接复用-程序员宅基地

原始地址: TCP连接复用（TCP Connection Reuse）负载均衡技术简介 　　现代企业信息化应用越来越多的采用B/S应用架构来承载企业的关键业务，因此，确保这些任务的可靠运行就变得日益重要。随着越来越多的企业实施数据集中，应用的扩展性、安全性和可靠性也越来越受到企业的重视。　　负载均衡技术通过设置虚拟服务器IP（VIP），将后端多台真实服务器的应用资源虚拟成一台高性能的应..._win10 tcp连接复用

推荐文章

热门文章

相关标签