文章目录

Express框架
Ajax发送请求前的准备
- 前端页面的准备
- 服务端的代码准备
用Ajax发送GET请求
- 服务器端js
- 请求端
- 代码的注意点
- Ajax设置请求参数

Express框架

Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。

Express 框架特性：

提供了简洁的路由定义方式
对获取 http 请求参数进行了简化处理
对模板引擎支持程度高，方便渲染动态HTML页面
拥有中间件机制有效控制 HTTP 请求
拥有大量第三方中间件对功能进行扩展

下载：

npm i express

基本使用：

//1. 引入express
const express = require('express');//2. 创建应用对象(网站服务器)
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// send()
// 1. send 方法内部会检测响应内容的类型
// 2. send 方法会自动设置 http 状态码
// 3. send 方法还会帮我们自动设置响应的内容类型以及编码
app.get('/', (request, response)=>{//设置响应response.send('HELLO EXPRESS');
});app.get('/list', (req, res)=> {// 向客户端直接响应一个对象 res.send({name: 'zhangsan', age: 20});
})//4. 监听端口启动服务
app.listen(3000, ()=>{console.log("服务已经启动, 3000 端口监听中....");
});

启用上面的服务要用node命令对上面的脚本进行执行。
在终端命令行中用 node+空格+文件路径即可运行

如果服务启动失败，极有可能是因为端口被占用。
解决办法：可以改用其他的端口。

之所以此处涉及一点基础的express框架，是因为Ajax要跟服务端发请求，而这个服务端我们就可以用express框架来实现。

Ajax发送请求前的准备

前端页面的准备

定义一个需求：再点击按钮之后，向服务器发送请求，把响应体的内容呈现在div盒子之内。

    <style>#result{width:200px;height:100px;border:solid 1px #90b;}</style><button>点击发送请求</button><div id="result"></div>

服务端的代码准备

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response
// 来做出响应。
app.get('/server', (request, response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应response.send('HELLO EXPRESS');
});//4. 监听端口启动服务
app.listen(3000, ()=>{console.log("服务已经启动, 3000 端口监听中....");
});

记得使用之前确保这个端口已经释放关闭，不会产生服务的冲突。
关闭服务：在终端的node中Ctrl+C。

检测：在浏览器中输入http://127.0.0.1:3000/server

用Ajax发送GET请求

服务器端js

沿用上面的代码

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response
// 来做出响应。
app.get('/server', (request, response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应response.send('HELLO EXPRESS');
});//4. 监听端口启动服务
app.listen(3000, ()=>{console.log("服务已经启动, 3000 端口监听中....");
});

请求端

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//绑定事件btn.onclick = function(){//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置请求方法和 urlxhr.open('GET', 'http://127.0.0.1:3000/server');//3. 发送xhr.send();//4. 事件绑定 处理服务端返回的结果// on  when 当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// change  改变xhr.onreadystatechange = function(){//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500// 2xx 成功if(xhr.status >= 200 && xhr.status < 300){//处理结果  行 头 空行 体//响应 // console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体//设置 result 的文本result.innerHTML = xhr.response;}else{}}}}</script>
</body>

代码的注意点

①XMLHttpRequest()是什么？

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

②readystate 是 xhr 对象中的属性, 表示状态，这个状态由0，1，2，3，4来表示(共五种值)，他们分别是什么意思？

0：表示未初始化
1：表示open方法已经调用完毕
2：表示send方法已经调用完毕
3：表示服务端已经返回了部分的结果
4：表示服务端已经返回了所有的结果

xhr.onreadystatechange = function(){)这个事件在readystate属性发生变化时进行触发，由此我们可以知道，这个事件会被触发4次。

因为我们要对服务端返回的结果进行处理，所以显然在readystate属性为0，1，2时是不行的，因为服务端还没返回结果。而属性为3时不合适，因为他只返回了部分结果。所以4是处理服务器返回结果的最好时机，故接下来我们要用条件语句对这个时段进行筛选！

③xhr.status属性
我们在判断完服务器是否返回了所有的结果之后，还要判断响应状态码。而xhr.status属性就记录着这个状态码。

事实上响应状态码中2开头的都可以表示成功。所以我们在判断的时候不一定要规定死xhr.status属性一定等于200，在200~299都可以。

④如何拿到服务器返回的相关参数？

xhr.status 返回状态码
xhr.statusText 返回状态字符串
xhr.getAllResponseHeaders() 返回所有请求头
xhr.response 返回响应体

Ajax设置请求参数

依照这种格式即可：

xhr.open('GET', 'http://127.0.0.1:3000/server?a=100&b=200&c=300');

？开头
&衔接

Express框架与Ajax应用相关推荐

html间数据传送,Express框架与html之间如何进行数据传递(示例代码)
关于Node.js 的Express框架介绍,推荐看菜鸟教程的Express框架,很适合入门,这里不再赘述,这里主要讲一下Express框架与html之间如何进行数据传递我采用的是JQuery的Aj ...
使用express框架接收和发送ajax信息
回到文章总目录 Express框架我们的ajax需要对服务端发对请求,所以我们需要这个服务端接收和发送 Express的基本使用使用终端进入文件夹中(ajaxtest) 1.初始化node.js ...
Ajax学习：nodejs安装+express框架介绍
ajsx应用中,需要安装nodejs环境基于Chrome V8引擎(和浏览器上的谷歌的解析引擎一样)JavaScript运行环境 (31条消息) Node.js_安装_哇嘎123的博客-CSDN博客 ...
express框架+fetch/axios.js（本机实现跨域请求）
之前实现过使用jQuery-Ajax跨域请求,写过一个专题:jQuery-Ajax实现跨域 Promise实现跨域使用Promise也可以实现跨域请求. 普通的Promise模板: var p = ...
Node 简介、模块、模板引擎、NPM、文件操作、缓冲区、文件流、网络操作、Express框架
一.Node简介 1.1 客户端的JavaScript是怎样的问题答什么是 JavaScript 脚本语言运行在浏览器中一般用来做客户端页面的交互(Interactive) JavaScri ...
express框架实现文件上传、下载及推送（使用Websocket）
目录文件上传客户端上传文件:bootstrap-fileinput插件插件安装插件使用服务端接受文件:formidable模块文件列表推送客户端主动获取文件列表:fs模块服务端主动推送 ...
浅谈express框架
目录 express 安装express和使用使用express创建一个简单的服务器中间件分类 express.static()中间件处理逻辑: 使用express封装一个商品接口 => g ...
express框架中res和rep属性
express框架中res和rep属性 const express = require('express'); const router = express.Router() router.get(' ...
express框架在nodejs中的使用+解决跨域问题（cors三方库）
第一部分commonJS使用第三方框架一.托管静态资源(让用户直接访问静态资源) 例如,如上url分别是请求一张图片,一份样式文件,一份js代码.我们实现的web服务器需要能够直接返回这些文件的内容 ...

Express框架与Ajax应用