一、目录(node_modules是npm install后新增的)

node 和 npm 版本

npm install http

二、node下的index.js

var http = require('http')

http.createServer(function (request, response) {

    response.writeHead(200, { 'Content-Type': 'text/plain' })

    request.on('data', function (chunk) {

      response.write(chunk)

  })

  request.on('end', function () {

      response.end('hello node world')

  })

}).listen(8090)

监听localhost的8090端口

三、前端home.html页面

<!DOCTYPE html>

<html>

<head>

    <title>node home</title>

</head>

<body>

    <script type="text/javascript">

        window.onload = function () {

            var body = document.getElmentsByTagName('body')[0]

            var xhr = new XMLHttpRequest()

            xhr.open('GET', '/localhost:8090', false)

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4 && xhr.Status === 200) {

                    body.innerHtml = xhr.responseText

                }

            }

        }

    </script>

</body>

</html>

简单测试，直接使用了原生JavaScript的ajax，发送get请求到localhost:8090，返回结果输出到页面上

四、测试效果

Headers也能看到200返回码~  绿灯

node的http与前端交互示例（入门）的更多相关文章

  1. web前端怎么样才能入门

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别: 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

  2. Node.js实现前后端交互——用户注册

    我之前写过一篇关于使用Node.js作为后端实现用户登陆的功能,现在再写一下node.js做后端实现简单的用户注册实例吧.另外需要说的是,上次有大佬提醒需要加密数据传输,不应该使用明文传输用户信息.在 ...

  3. 摇滚吧HTML5！Jsonic超声波前端交互！

    前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律.时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤.wifi.蓝牙.广播都 ...

  4. 摇滚吧HTML5！有声前端交互！（Hello, Jsonic!）

    软件工程师们摆弄1和0编写他们的乌托邦,音乐人门把玩12平均律上的音符构筑他们的伊甸园.最近,我偶然看了<蓝色骨头>这部电影,片中的男主角是位黑客,同时又兼具音乐创作的才华.在现实生活中, ...

  5. Node.js与MongoDB的基本连接示例

    Node.js与MongoDB的基本连接示例 前提 已经安装了node.js和MongoDB,本文使用的node.js是v0.12.0,MongoDB是3.0.0. 初始化数据 启动MongoDB服务 ...

  6. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  7. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  8. 前端之Android入门(3):MVC模式(上)

    很多Android的入门书籍,在前面介绍完布局后就会逐个介绍组件,然后开始编写组件使用的例子.每每到此时小伙伴们都可能会有些疑问:是否应该先啃完一本<Java编程思想>学点 Java 知识 ...

  9. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

随机推荐

  1. 洛谷P3353 【在你窗外闪耀的星星】

    题目真的好甜呢QwQ 冲着这题面也要来做 满分解法:线段树 我们暴力地把所有点建成一颗线段数 接着在从1到maxx里每个长度为 w的区间中执行区间求和 其实单点修改都不需要,可以在输入的时候统计出每个 ...

  2. Tesseract机器识别

    1.合并图片打开jtessboxeditor,点击Tools->Merge Tiff ,按住shift键选择前文提到的101个tif文件,并把生成的tif合并到新目录d:\python\lnyp ...

  3. Codeforces 1236D. Alice and the Doll

    传送门 注意到每个位置只能右转一次,首先考虑如果图没有障碍那么显然要走螺旋形的 然后现在有障碍,容易发现对于某个位置如果既可以直走又可以右转,那么一定会选择直走 因为如果转了以后就一定没法走到原本直走 ...

  4. 4.Shell内部命令

    4.Shell内部命令内部命令是由shell自身提供的.如果某个内部命令的名称是一个简单命令的第一个单词,shell会直接执行这个命令,而不会启动其它程序.对于一些不可能或者不方便通过外部程序实现的功 ...

  5. docker基础知识

    兴起于2010年,2013年docker开源. 什么是docker? built ship run 官方定位: Docker is a world's leading software contain ...

  6. 编译安装带lua 的 vim 编辑器

    注:支持7.4以后的vim版本 安装lua dev库yum -bcurrent install lua-devel 编译vim带lua支持,安装到/home/sy120714/software/vim ...

  7. win10下当前目录右键添加CMD快捷方式

    在某个文件夹下右键打开cmd,这样不用每次都在默认情况下切换目录.无奈win10 1703版本下shift+右键不能打开cmd,只能打开powershell. 首先,在桌面新建一个文本文档. Wind ...

  8. axios跨域问题(包括开发环境和生产环境)

    之前写过一篇axios跨域问题,写的过于片面,没有考虑过实际开发中遇到的问题,以及如何全局使用axios,这次再写一篇,以后再有新发现再更新... 1.在static文件夹下新建/js/config. ...

  9. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

  10. 1、CentOs安装

    转载自:代码之美 0.准备工作: 一台没系统的普通电脑u盘一个(大于1G,最小安装的话不超过1G,根据选择系统大小匹配U盘即可)CentOS7.3 iso文件一个UltraISO工具 1.制作U盘 ① ...