Express框架与Ajax应用

Express框架与Ajax应用

文章目录

​​Express框架​​​​Ajax发送请求前的准备​​

​​前端页面的准备​​​​服务端的代码准备​​

​​用Ajax发送GET请求​​

​​服务器端js​​​​请求端​​​​代码的注意点​​​​Ajax设置请求参数​​

Express框架

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

Express 框架特性：

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

下载：

npm i express

基本使用：

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

启用上面的服务要用node命令对上面的脚本进行执行。 在终端命令行中用 node+空格+文件路径 即可运行如果服务启动失败，极有可能是因为端口被占用。 解决办法：可以改用其他的端口。之所以此处涉及一点基础的express框架，是因为Ajax要跟服务端发请求，而这个服务端我们就可以用express框架来实现。

Ajax发送请求前的准备

前端页面的准备

服务端的代码准备

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

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

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

请求端

代码的注意点

①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');

？开头

&衔接

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。