Ajax 的初步实现(使用vscode+node.js+express框架)


Posted in Javascript onJune 18, 2021

需求: 点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新

一、 服务端的前期准备

安装node.js https://nodejs.org/en/download/

检验是否安装成功 : 在命令行输入 node -v 按下enter 键之后出现 版本号就表明安装成功 (图如下)

Ajax 的初步实现(使用vscode+node.js+express框架)

使用 vscode安装express (前提是你已经成功安装了node.js)

在 vscode 里面新建一个文件夹 文件下面包含俩个文件 一个是你的前端页面代码:.html另一个是准备的服务端代码 这里暂且为 server.js在目录文件最外层 点击在集成终端中打开

Ajax 的初步实现(使用vscode+node.js+express框架)

输入 npm init 进行初始化 输入包名后一直按 Enter 就行

Ajax 的初步实现(使用vscode+node.js+express框架)

5. 继续输入 npm i express 安装express 框架

Ajax 的初步实现(使用vscode+node.js+express框架)

6.文件目录下你会看到生成了 package-lock.json 文件 以及 node_modules 文件 此时说明你的框架安装好了

express的基本使用 (该js文件名为 express基本使用.js):
1 .

//1. 引入express
	const express = require('express');
	
	//2. 创建应用对象
	const app = express();
	
	//3. 创建路由规则
	// request 是对请求报文的封装
	// response 是对响应报文的封装
	app.get('/', (request, response) => {
	    //设置响应
	    response.send('HELLO EXPRESS 1');
	});
	app.post('/', (request, response) => {
	    //设置响应
	    response.send('HELLO EXPRESS 2');
	});
	app.all('/', (request, response) => {
	    //设置响应
	    response.send('HELLO EXPRESS 3');
	});

	//4. 监听端口启动服务
	app.listen(8000, () => {
	    console.log("服务已经启动, 8000 端口监听中....");
	});

在集成终端中输入 node -express基本使用.js

Ajax 的初步实现(使用vscode+node.js+express框架)

3. 在浏览器中地址栏输入: http://127.0.0.1:8000/ 看到如下图 即服务端配置完成

Ajax 的初步实现(使用vscode+node.js+express框架)

二、 客户端的准备(前端代码 都引用了jquery来获取Dom元素

点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新

使用原生的 ajax :

<!DOCTYPE html>
	<html lang="en">
	
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=, initial-scale=1.0">
	    <title>AJAX GET 请求</title>
	    <script src="../js/jquery-3.0.0.min.js"></script>
	    <style>
	        #result {
	            width: 200px;
	            height: 100px;
	            border: solid 1px red;
	        }
	    </style>
	</head>
	
	<body>
	    <button>发送请求</button>
	    <div id="result"></div>
	</body>
	<script>
	    // 1.获取元素 给按钮添点击事件
	    $('button').on('click', function () {
	        // alert(1);
	        // 2.创建对象
	        const xhr = new XMLHttpRequest();
	        // 3.初始化 设置请求方式 和url
	        xhr.open('GET', 'http://127.0.0.1:8000/server');
	        // 4.发送
	        xhr.send();
	        // 5.事件绑定 处理服务器返回的结果
	        xhr.onreadystatechange = function () {
	            // readystate 是 xhr 对象中的属性 有 0 1 2 3 4
	            // 判断(4 表示服务端返回了所有的结果)
	            if (xhr.readyState == 4) {
	                if (xhr.status >= 200 && xhr.status < 300) {
	                    // 处理结果有: 行 头 空行 体
	                    // 1.响应行  
	                    // 2.将响应体 返回到客户端页面中
	                    $('div').html(xhr.response);
	                }
	
	            }
	            else {
	
	            }
	        }
	    })
	</script>
	
	</html>

必须注意

Ajax 的初步实现(使用vscode+node.js+express框架)

三、 运行程序

在目录文件夹右键在集成终端中打开 输入: node server.js

Ajax 的初步实现(使用vscode+node.js+express框架)Ajax 的初步实现(使用vscode+node.js+express框架)

运行 html 代码

Ajax 的初步实现(使用vscode+node.js+express框架)

点击发送请求

Ajax 的初步实现(使用vscode+node.js+express框架)

注: 至此 Ajax 已基本实现 !!

为了方便执行js脚本代码 避免老是重复开启窗口 我们这里 还需安装 nodemon 安装方式与express 一样 在终端输入:npm install -g nodemon

Ajax 的初步实现(使用vscode+node.js+express框架)

如果你不想下载jquery引入 你可以在网页上输入 bootcdn https://www.bootcdn.cn/

Ajax 的初步实现(使用vscode+node.js+express框架)Ajax 的初步实现(使用vscode+node.js+express框架)Ajax 的初步实现(使用vscode+node.js+express框架)

注:为了防止报错前面添加 crossorign="anonymous"

以上就是Ajax 的初步实现(使用vscode+node.js+express框架)的详细内容,更多关于Ajax初步实现的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript中的相等与不等运算
Apr 25 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
Javascript模块化编程详解
Dec 01 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
帮你提高开发效率的JavaScript20个技巧
JavaScript实现贪吃蛇游戏
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
You might like
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
谈谈JS中的!!
2017/12/07 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python matplotlib实时画图案例
2020/04/23 Python
python实现马丁策略的实例详解
2021/01/15 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
销售员岗位职责
2014/06/09 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
上课说话检讨书
2015/01/27 职场文书
清洁工岗位职责
2015/02/13 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
您对思维方式了解多少?
2019/12/09 职场文书