通过ajax写一个简单的新闻页面（静态资源托管）

最新推荐文章于 2021-11-03 09:04:44 发布

HaiRong_21

最新推荐文章于 2021-11-03 09:04:44 发布

阅读量310

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/HaiRong_21/article/details/109689762

版权

本文介绍了如何通过Ajax技术创建一个简单的新闻页面。当访问特定URL时，前端向服务器发送'Info'请求，服务器响应并将新闻数据返回。前端接收到数据后动态创建HTML元素展示新闻的标题、图片和视频。此外，文章还探讨了静态资源托管，通过读取请求地址对应文件的方式，简化了处理大量静态资源的过程。

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

开头先说，因为这是我用来做笔记的，所以有些思路呀什么可能没有很详细，有可能有一些逻辑不清，因为我主要是按照自己可能不太能理解的点写的一些提示。

效果：
在这里插入图片描述
向服务器发起的请求，如下：

代码：（前端html部分）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 10px;
            width: 600px;
            height: 300px;
            background-color: #ecc;
        }
        img{
            width: 180px;
            height: 220px;
            margin: 5px;
        }
        video{
            width: 300px;
            height: 250px;
        }
    </style>
</head>

<body>
    <p>首页</p>
    <button>点击发起请求，出现新闻</button>
    <script>
        let btn = document.querySelector('button');
        btn.onclick = function () {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://192.168.2.230:86/info');

最低0.47元/天解锁文章

HaiRong_21

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过ajax写一个简单的新闻页面（静态资源托管）

开头先说，因为这是我用来做笔记的，所以有些思路呀什么可能没有很详细，有可能有一些逻辑不清，因为我主要是按照自己可能不太能理解的点写的一些提示。效果：向服务器发起的请求，如下：代码：（前端html部分）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫