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

最新推荐文章于 2022-08-04 18:49:28 发布

LSQ_2584951836

最新推荐文章于 2022-08-04 18:49:28 发布

阅读量814

点赞数 1

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/LSQ_2584951836/article/details/101012278

版权

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代码，并点击网页中的按钮：
在这里插入图片描述
可以看到控制台成功收到了服务器传来的数据。

LSQ_2584951836

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
利用node.js搭建服务器并通过浏览器发送ajax请求

搭建服务器第一步：安装首先我们需要安装node.js，下载地址：https://nodejs.org/en/安装完成之后我们可以通过cmd命令来检测是否安装成功，如图：出现上图结果，则表示安装成功，如果出现错误，可能是环境变量没有配置成功，可以通过-我的电脑属性里的高级系统设置来配置。第二步：搭建我们可以通过Visual Studio Code来编写一段js代码作为我们的服务器源码，...
复制链接

扫一扫