Ajax服务搭建
脚本宝典收集整理的这篇文章主要介绍了Ajax服务搭建，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一、准备检查工作
确认nodeJS、yarn、express已经安装
-
安装nodeJS:https://nodejs.org/zh-cn/
-
安装yarn：
-
安装包安装： https://yarn.bootcss.com/
-
npm安装：
npm install -g yarn
设置目录：
# 全局安装目录 yarn config set global-folder D:Yarnyarn_global # 缓存目录 yarn config set cache-folder D:Yarnyarn_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
3、输入第二行命令，添加“express”模块，此时文件的目录会增加node_modules文件夹和yarn.lock文件，存放的是express模块文件
yarn add express
或
npm install express --save
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
7、浏览器访问http://localhost:3000/index.html,检查是否有页面内容响应
8、修改请求相应内容后需重启服务器才能使浏览器端内容改变，对应解决方案如下：
安装延迟重启 nodemon
全局安装: npm install -g nodemon
项目安装： npm install nodemon --save-dev
自动重启服务器 终端命令 nodemon server.js
脚本宝典总结
以上是脚本宝典为你收集整理的Ajax服务搭建全部内容，希望文章能够帮你解决Ajax服务搭建所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15