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 相关文章推荐
图片翻转效果具体实现代码
Jan 09 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
使用Vue实现一个树组件的示例
Nov 06 Javascript
帮你提高开发效率的JavaScript20个技巧
JavaScript实现贪吃蛇游戏
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
You might like
php中autoload的用法总结
2013/11/08 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP合并静态文件详解
2014/11/14 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP检测用户语言的方法
2015/06/15 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解vue中axios请求的封装
2019/04/08 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python对数组进行反转的方法
2015/05/20 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python 异常处理的实例详解
2017/09/11 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
浅谈Python NLP入门教程
2017/12/25 Python
django解决跨域请求的问题详解
2019/01/20 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python tkinter三种布局实例详解
2020/01/06 Python
pytorch SENet实现案例
2020/06/24 Python
丑小鸭教学反思
2014/02/03 职场文书
税务会计岗位职责
2014/02/18 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
高三语文教学反思
2016/02/16 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL