express的基本使用与原生Ajax

最新推荐文章于 2023-10-02 15:26:20 发布

_萝卜头儿

最新推荐文章于 2023-10-02 15:26:20 发布

阅读量198

点赞数

文章标签： ajax express javascript

本文链接：https://blog.csdn.net/Z_2010317/article/details/126398388

版权

Web 应用程序

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

API

使用您所选择的各种 HTTP 实用工具和中间件，快速方便地创建强大的 API。

性能

Express 提供精简的基本 Web 应用程序功能，而不会隐藏您了解和青睐的 Node.js 功能。

框架

许多流行的开发框架都基于 Express 构建。

首先要安装express并使用

在列表集成终端中打开: 输入npm init --yes

然后再输入:npm i express进行安装:

安装完成后进行使用:

四步骤:1、引入express

// 1、引入express

const { request, response } = require('express');

const express = require('express');

2、创建应用对象

// 2、创建应用对象

const app = express();

3、创建路由规则

// request 是对请求报文的封装

// response 是对响应报文的封装

app.get('/',(request,response)=>{

// 设置相应

response.send('HELLO EXPRESS');

});

4、监听端口启动服务

app.listen(8000,()=>{

console.log("服务已启动,8000 端口监听中...");

})

然后在集成终端查看:

输入node+文件名(express的基本使用.js)

原生ajax的创建:

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

    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        // 绑定事件
        btn.onclick = function(){
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化  设置请求方式和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
            // 3、发送
            xhr.send();
            // 4、事件绑定 处理服务端返回的结果
            // change 改变
            xhr.onreadystatechange = function(){
                // 判断(服务端返回所有的结果时)
                if(xhr.readyState === 4){
                    // 判断响应式状态码 200 404 403 401 500
                    // 2开头的 都表示成功
                    if(xhr.status >=200 && xhr.status<300){
                
                    
                        // 设置result的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>

还需要创建一个js文件

// 1、引入express
const { request, response } = require('express');
const express = require('express');

// 2、创建应用对象
const app = express();

// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    //response.setHeader('Access-Control-Allow-Headers','*');
    // 设置响应体
    response.send('HELLO AJAX'); 
});
  //all可以解决请求 自定义 头的报错
app.all('/json-server',(request,response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    // response.setHeader('Access-Control-Allow-Headers','*');
    // 设置响应体
    response.send('HELLO AJAX POST'); 
});

// 4、监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已启动,8000 端口监听中...");
})