node的http与前端交互示例（入门）

最新推荐文章于 2021-01-27 08:01:00 发布

weixin_30480075

最新推荐文章于 2021-01-27 08:01:00 发布

阅读量124

点赞数

文章标签：前端 java javascript ViewUI

原文链接：http://www.cnblogs.com/zhuxingqing/p/11526558.html

版权

一、目录(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返回码~ 绿灯

转载于:https://www.cnblogs.com/zhuxingqing/p/11526558.html

weixin_30480075

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node的http与前端交互示例（入门）

一、目录(node_modules是npm install后新增的)node 和 npm 版本npm install http二、node下的index.jsvar http = require('http')http.createServer(function (request, response) { response....
复制链接

扫一扫