Ajax服务搭建

一、准备检查工作

确认nodeJS、yarn、express已经安装

  • 安装nodeJS:https://nodejs.org/zh-cn/

  • 安装yarn：

    设置目录：

    # 全局安装目录
yarn config set global-folder D:\Yarn\yarn_global
# 缓存目录
yarn config set cache-folder D:\Yarn\yarn_cache

    修改镜像源：

    # 查看当前源
yarn config get registry
# 修改为淘宝镜像源
yarn config set registry https://registry.npm.taobao.org

  • 安装express：npm install express --save

二、初始化项目

1、建立新项目文件夹，然后打开cmd窗口，进入到新建项目文件夹(ps:快捷方式进入)

2、在cmd窗口终端中输入第一行命令，初始化项目,此时项目根目录下生成一个package.json文件

yarn init

或

npm init --yes

image

3、输入第二行命令，添加“express”模块，此时文件的目录会增加node_modules文件夹和yarn.lock文件，存放的是express模块文件

yarn add express

或

npm install express --save

image

image

4、用VSCode打开项目文件夹，然后在根目录创建一个public的文件夹和一个server.js的文件，server.js输入如下内容：

/**** server.js ****/
// 一个简单的后端路由

//1.引入express框架
const express=require('express')

//2.引入路径处理模块
const path=require('path')

//3.创建web服务器
const app=express();

//4.配置路由 request 请求       response 响应,回应
app.get('/test',(request,response)=>{
    //响应
    response.send({name:"Ajax",message:"您好！"});
})

//5.静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))

//6.监听端口,进行回调
app.listen(3000,(err)=>{
    // 函数体
    if(!err) {
        console.log('测试ajax请求的服务器开启成功了!');
        console.log('正在监听3000端口...........');
    }
})

5、在public文件夹下建立index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>
<body>
    <script type="text/javascript">
    //1.创建Ajax对象
    var xhr=new XMLHttpRequest();

    //2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //(1):请求方式; (2):请求地址
    xhr.open('get','http://localhost:3000/test');

    //3.发送请求
    xhr.send();

    //4.获取服务器相应到客户端的数据
    xhr.onload=function(){
        
       //将json对象转为json对象
       var resposeTxt=JSON.parse(xhr.responseText);
        //输出到控制台
       console.log(resposeTxt);

       //添加到body中
       var str='<h3>'+resposeTxt.name +','+resposeTxt.message+'</h3>';
       document.body.innerHTML=str;
    }

    </script>
</body>
</html>

6、启动服务，在VSCode终端输入如下命令，启动服务

node server.js

image

7、浏览器访问http://localhost:3000/index.html,检查是否有页面内容响应
image

8、修改请求相应内容后需重启服务器才能使浏览器端内容改变，对应解决方案如下：

安装延迟重启 nodemon

全局安装: npm install -g nodemon

项目安装： npm install nodemon --save-dev

自动重启服务器 终端命令 nodemon server.js

posted @ 2022-01-12 15:42  码农阿亮  阅读(297)  评论(0)  编辑  收藏  举报