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 实现各种跨域的方法
May 08 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
帮你提高开发效率的JavaScript20个技巧
JavaScript实现贪吃蛇游戏
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
You might like
PHP中实现进程间通讯
2006/10/09 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
微信小程序实现循环动画效果
2018/07/16 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
python搭建微信公众平台
2016/02/09 Python
python实现12306火车票查询器
2017/04/20 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
QA工程师岗位职责
2013/11/20 职场文书
领导干部培训感言
2014/01/23 职场文书
家长会后的感想
2015/08/11 职场文书