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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
vue-router单页面路由
Jun 17 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
帮你提高开发效率的JavaScript20个技巧
JavaScript实现贪吃蛇游戏
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
You might like
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Ext 今日学习总结
2010/09/19 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
AngularJS基础知识
2014/12/21 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python计算两个数的百分比方法
2018/06/29 Python
Python魔法方法功能与用法简介
2019/04/04 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
如何使用python切换hosts文件
2020/04/29 Python
Python多线程正确用法实例解析
2020/05/30 Python
Python定义一个函数的方法
2020/06/15 Python
Python用Jira库来操作Jira
2020/12/28 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
初中女生自我鉴定
2013/12/19 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
好员工观后感
2015/06/17 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL