一、目录(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. 初学SpringBoot遇到的坑和笔记

    目录 1.日期返回给前端显示不理想问题 1.1重现 1.2原因 1.3解决 1.4结果 2.MyBatis-Plus数据库字段未找到问题 2.1重现 2.2原因 2.3解决 3.Long型雪花主键返回 ...

  2. JS实现点击查看密码功能,再次点击隐藏密码!

    <table border='1'> <tr> <td>aaaa</td> <td onclick="myFunction(this.i ...

  3. python 文件写入

    def write_file(): """ 文件写入""" file_name = "wri2te_test.txt" ...

  4. Redis服务端相关

    全局命令: 查看所有键: keys * 键总数: dbsize 检查键是否存在: exists key 删除键: del key [key...] 键过期: expire key seconds 键的 ...

  5. 并不对劲的bzoj4231: 回忆树

    题目大意 \(n\)个点的树,每条边上有一个小写字母. 操作:给定2个点\(u\),\(v\)(\(u\)可能等于\(v\))和一个非空字符串\(s\),问从\(u\)到\(v\)的简单路径上的所有边 ...

  6. nop4.1学习ServiceCollectionExtensions(二)(ioc,ef,ef连接的实现)

    这个是获取程序路径,并初始化文件管理类 初始化插件管理 接下来就是注册服务和autoafc 在INopStartup配置sql连接,插件,mvc等 配置了sql连接 数据库的配置类 在AddAutoM ...

  7. QT 安卓 调用java类

    用以下方式即可调用java类中的方法 QAndroidJniObject activity = QtAndroid::androidActivity(); QAndroidJniObject Devi ...

  8. 一种移动端position:absolute布局:

    一种移动端position:absolute布局:   1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...

  9. Shiro学习笔记总结,附加" 身份认证 "源码案例(一)

    Shiro学习笔记总结 内容介绍: 一.Shiro介绍 二.subject认证主体 三.身份认证流程 四.Realm & JDBC reaml介绍 五.Shiro.ini配置介绍 六.源码案例 ...

  10. 错误处理:java.lang.NoClassDefFoundError: javax/jms/JMSContext

    原因是少包,需要在pom文件增加依赖 <dependency> <groupId>javax.jms</groupId> <artifactId>jav ...