四、AJAX案例准备

默九思

已于 2023-07-09 20:34:53 修改

阅读量54

点赞数 1

分类专栏： AJAX学习文章标签： ajax 前端 javascript

于 2023-07-08 19:00:13 首次发布

本文链接：https://blog.csdn.net/qq_43733614/article/details/131615223

版权

AJAX学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

该文章介绍了如何使用原生Ajax进行GET请求。首先创建一个名为1-GET.html的前端页面，包含一个发送请求的按钮和显示结果的div。然后，通过Node.js和Express框架创建server.js文件，定义路由并设置响应。在终端运行服务后，通过浏览器访问指定URL，使用开发者工具查看网络请求，确认Ajax通信成功。

摘要由CSDN通过智能技术生成

新建文件夹原生Ajax，在文件夹中创建下述两个文件

1、前端页面准备

创建1-GET.html文件

键入代码内容

<!--前端 浏览器-->
<!DOCTYPE html>
<html lang="en">
<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 #90d;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
</body>
</html>

tips:VScode中键入' ! '后，按下tab键，可自动生成HTML制式内容代码

2、服务端准备

创建server.js文件

键入下述代码

//1.引入express
const express = require('express');

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

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Contrl-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX');
});

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