利用nodejs搭建服务器,测试AJAX

本文介绍如何利用Noejs快速搭建本地服务器,并通过AJAX实现客户端与服务器的数据交互。具体步骤包括创建服务器脚本、启动服务及编写HTML页面以发起AJAX请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     最近学习了AJAX一直没有进行过测试,前今天了解了Noejs搭建本地服务器下就尝试了一下。通过AJAX请求的方式获取HTTP服务器返回数据的代码

首先创建一个serve.js的文件。并写入以下代码.

 1 var http=require("http");
 2 
 3 var server=http.createServer(function(req,res){
 4 
 5     if(req.url!=="/favicon.ico"){
 6 
 7         res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
 8 
 9         res.write("hello,我是从服务器端接收的")
10 
11     }
12 
13     res.end();
14 
15 });
16 
17 server.listen(8888,"localhost",function(){
18 
19     console.log("开始监听...");
20 
21 });

打开cmd进入相应的目录文件夹下,我的存在e盘的node-demo文件夹下,只需输入e:回车,cd node-demo 回车,最后 node serve.js,然后提示开始监听...,说明本地服务器已经搭建好了.

在webstorm(因为webstorm下已经配置好了服务器环境其默认端口为:63342)会比较简单,新建一个testAJAX.html文件具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>ajax demo</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<body>
<input type="button" value="点击一下" onclick="GetData()" />
<div id="test">
    this is a  ajax demo
</div>
</body>
<script>
    function GetData(){
        var xhr=new XMLHttpRequest();
        xhr.open("GET","http://localhost:8888",true);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
            document.getElementById("test").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.send(null);
    }
</script>
</html>

测试一下:

                                                                                                                                                                                             

一个简单的小测试就成功了。

 

转载于:https://www.cnblogs.com/coco-163/p/5714404.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值