利用node.js搭建服务器并通过浏览器发送ajax请求

ajax 专栏收录该内容
2 篇文章 0 订阅

搭建服务器

第一步:安装

首先我们需要安装node.js,下载地址:https://nodejs.org/en/
安装完成之后我们可以通过cmd命令来检测是否安装成功,如图:
在这里插入图片描述
出现上图结果,则表示安装成功,如果出现错误,可能是环境变量没有配置成功,可以通过-我的电脑属性里的高级系统设置来配置。

第二步:搭建

我们可以通过Visual Studio Code来编写一段js代码作为我们的服务器源码,代码如下:

// 返回 hello world

var http=require('http');

var server=http.createServer(function(request,response){
   console.log("接收到请求.....");
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader("Content-type","text/html;charset=utf8");
    response.end('你好');
});

//端口号 9000
server.listen(9000,function(err){
    if(!err){
        console.log('server is running on 9000');
    }
});

然后在node.js中运行这段代码:
在这里插入图片描述
注:在操作过程中运行环境不能关闭。

发送ajax请求

第一步:创建

同样的我们利用Visual Studio Code创建一段html代码用来请求数据:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>请求数据</button>
    <script>
        var bnt = document.querySelector("button");
        bnt.onclick = function () {
            // 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
            var xhr = new XMLHttpRequest()
            // 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
            xhr.open('GET', 'http://localhost:9000')
            // 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
            xhr.send(null)
            // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
            xhr.onreadystatechange = function () {
                // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
                if (this.readyState === 4&&this.status==200) {
                    // 通过 xhr 的 responseText 获取到响应的响应体
                    console.log(xhr.responseText)
                }
            }
        }


    </script>
</body>

</html>
第二步:发送ajax请求

我们在网页中运行这段html代码,并点击网页中的按钮:
在这里插入图片描述
可以看到控制台成功收到了服务器传来的数据。

  • 0
    点赞
  • 4
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值