投稿
  1. 极客之音首页
  2. 技术随笔

Express框架与Ajax应用

飞熊 • • 技术随笔 • 阅读 205

导读：本篇文章讲解 Express框架与Ajax应用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

也许你感觉自己的努力总是徒劳无功，但不必怀疑，你每天都离顶点更进一步。今天的你离顶点还遥遥无期。但你通过今天的努力，积蓄了明天勇攀高峰的力量。加油！

文章目录

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. 初始化 设置请求方法和 url
            xhr.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');

？开头
&衔接
在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122225.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！