Ajax 的初步实现(使用vscode+node.js+express框架)
需求： 点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新
一、 服务端的前期准备
安装node.js https://nodejs.org/en/download/
检验是否安装成功 ： 在命令行输入 node -v 按下enter 键之后出现 版本号就表明安装成功 （图如下）
使用 vscode安装express (前提是你已经成功安装了node.js)
在 vscode 里面新建一个文件夹 文件下面包含俩个文件 一个是你的前端页面代码：.html另一个是准备的服务端代码 这里暂且为 server.js在目录文件最外层 点击在集成终端中打开
输入 npm init 进行初始化 输入包名后一直按 Enter 就行
5. 继续输入 npm i express 安装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
3. 在浏览器中地址栏输入： http://127.0.0.1:8000/ 看到如下图 即服务端配置完成
二、 客户端的准备（前端代码 都引用了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>
必须注意
三、 运行程序
在目录文件夹右键在集成终端中打开 输入: node server.js
运行 html 代码
点击发送请求
注： 至此 Ajax 已基本实现 !!
为了方便执行js脚本代码 避免老是重复开启窗口 我们这里 还需安装 nodemon 安装方式与express 一样 在终端输入：npm install -g nodemon
如果你不想下载jquery引入 你可以在网页上输入 bootcdn https://www.bootcdn.cn/
注：为了防止报错前面添加 crossorign="anonymous"
以上就是Ajax 的初步实现(使用vscode+node.js+express框架)的详细内容，更多关于Ajax初步实现的资料请关注我们其它相关文章！
相关推荐
-
node.js+jQuery实现用户登录注册AJAX交互
最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观.特记录一下. 1.login.ejs实现form框架 <form > <ul> <li><p>用户名</p></li> <li><input type="text" name="username" id="username"></
-
Node.js配合node-http-proxy解决本地开发ajax跨域问题
情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题. 用到的技术:
-
node.js chat程序如何实现Ajax long-polling长链接刷新模式
废话不多说,开始今天的主题.纵观这个程序,感觉它的最可贵之处,在于展示了,如何用nodejs实现长链接模式的刷新技术. (这个程序不详细介绍,重点讲解这个功能) Client.js 首先看一段核心代码: 复制代码 代码如下: function longPoll (data) { //....此处省略**行 $.ajax({ cache: false , type: "GET" , url: "/recv" , dataType: "json" ,
-
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
0.Node环境下安装和使用Mock # 安装 npm install mockjs // 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1 }] }) // 输出结果 console.log(JSON.stringify(data, null,
-
Node.js获取前端ajax提交的request信息
今天看一下Node.js怎么获取ajax提交的request 信息 众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接收到前端ajax提交过来的信息 下面我贴一下前端的代码 index.html的代码我就不贴了, 因为里面就只有一个按钮而已,要实现的功能是点击按钮提交ajax异步请求 主要贴一下js页面的代码 $("button").on("click",function(){
-
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
实现目的 使用D3.js开发的前端应用,用户与图交互更改图的内容后,如何在下一次加载的显示上一次最后交互的内容? 本文提供通过后端的Node.js程序提供一种最小化方案,作为参考. 开发环境 后端:Node.js Node.js模块:Express.body-parser.fs 前端:JQuery 后端 1.安装nodejs,装好后用显示版本号确认是否安装好 node --version 2.新建一工程目录(文件夹),安装模块. npm install express npm install b
-
Ajax异步文件上传与NodeJS express服务端处理
为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件异步上传的实现原理,顺带看了看进度条.图片预览等功能的实现,做一点简单的整理. 文件上传 HTML结构如下,一个file input和一个button.当点击"上传"按钮的时候,将file input选中的文件上传到服务器. <input type="file"
-
node.js+Ajax实现获取HTTP服务器返回数据
我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HTTP响应头部中添加Access_Control_Allow_Origin字段,并且将参数指定为允许向服务器请求数据额域名+端口号(省略端口号时允许该域名下的任何端口向服务器请求数据), 静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启IIS服务,并把页面考
-
Ajax 的初步实现(使用vscode+node.js+express框架)
需求: 点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新 一. 服务端的前期准备 安装node.js https://nodejs.org/en/download/ 检验是否安装成功 : 在命令行输入 node -v 按下enter 键之后出现 版本号就表明安装成功 (图如下) 使用 vscode安装express (前提是你已经成功安装了node.js) 在 vscode 里面新建一个文件夹 文件下面包含俩个文件 一个是你的前端页面代码:.ht
-
node.js express框架实现文件上传与下载功能实例详解
本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.
-
node.js express框架简介与实现
前言 之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express. 今天的内容主要围绕这么几个方面? express框架初步介绍 express框架中的app.use和app.get/app.post mock server 介绍 mock server的实现思路 一.express框架初步介绍 关于express框架的介绍,这里我引用菜鸟教程的简介: Express是一个简洁而灵活的node.js
-
Node.js Express 框架 POST方法详解
POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: <html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> First Name: <input type="text
-
node.js+express留言板功能实现示例
目录 留言板 所需类库 开源项目 项目结构 留言板 基于nodejs+express+art-template的留言板功能.包含列表界面.添加界面和发送留言功能. 所需类库 直接copy以下package.json 然后直接 npm install 或者yarn install 即可. package.json所需内容如下. { "name": "nodejs_message_board", "version": "2021.09&qu
-
angular2+node.js express打包部署的实战
Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起. 1.angular2项目创建,使用angular-cli ng new mypos 2.使用express命令行工具创建express项目. express --view=hbs 3.angular2 中 需要引用到第三方库 例如 jQuery,bootst
-
2014年最火的Node.JS后端框架推荐
Node.js框架是可以帮助你建立网站应用服务的javascript框架.它可以帮助你更快地开发Web应用 Node.js 是基于Chrome的JavaScript运行环境.可方便地构建快速.可扩展的网络应用.节点. 当涉及到Web应用程序的开发,你就需要JS框架,加快你的开发过程. Node.js有非常多不同类型的框架,如MVC框架,REST API和generators,全栈框架,大量的服务器库,它完全能够提供Web服务,无需使用Apache等外部软件. Node.js使用谷歌的V8 Jav
-
node.js express安装及示例网站搭建方法(分享)
1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g express npm install -g express-generator 2.创建一个示例工程 windows cmd依次输入如下命令: cd C:\Program Files\nodejs\node_global express -e microblog //即ejs,-j(即jade) cd microblog npm i
-
浅谈Node.js ORM框架Sequlize之表间关系
Sequelize模型之间存在关联关系,这些关系代表了数据库中对应表之间的主/外键关系.基于模型关系可以实现关联表之间的连接查询.更新.删除等操作.本文将通过一个示例,介绍模型的定义,创建模型关联关系,模型与关联关系同步数据库,及关系模型的增.删.改.查操作. 数据库中的表之间存在一定的关联关系,表之间的关系基于主/外键进行关联.创建约束等.关系表中的数据分为1对1(1:1).1对多(1:M).多对多(N:M)三种关联关系. 在Sequelize中建立关联关系,通过调用模型(源模型)的belon
-
Node.js+Express配置入门教程详解
Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型