AJAX（1）

最新推荐文章于 2024-06-17 06:24:21 发布

凉·点

最新推荐文章于 2024-06-17 06:24:21 发布

阅读量141

点赞数

分类专栏：前端文章标签： ajax Powered by 金山文档

本文链接：https://blog.csdn.net/SHDUAO/article/details/129503080

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1重点：当用户在浏览器中输入一个网址（URL）到显示一个网页中间经历了什么

1.在浏览器中输入网址(URL)

2.DNS解析，找到服务器（DNS域名解析服务器，通过域名找到了IP地址，最后通过IP地址找到服务器 localhost -> 127.0.0.1）

3.浏览器和WEB服务器建立连接：三次连接

4.建立连接后，客户端向服务器发起请求

5.服务器端收到请求后，处理请求，将响应消息发送给客户端

6.客户端和服务器端断开连接：四次挥手

7.客户端解析响应的消息，最后渲染成一张网页

AJAX

Asynchronous Javascript And XML(异步JavaScript和XML)

不用整个刷新页面，而是局部刷新

在页面加载后，向服务器端请求并结束数据，在后台向服务器发请求

好处：用于体验好

XML ：是一种数据格式，采用了自定义的标签

[
    {
        title: '标题1',
        ctime: '2023-3-10'
    },
    {
        title: '标题2',
        ctime: '2023-4-10'
    }
]

<list>
    <news>
        <title>标题1</title>
        <ctime>2023-3-10</ctime>
    </news>
    <news>
        <title>标题2</title>
        <ctime>2023-4-10</ctime>
    </news>
</list>

练习：

编写02_data.html，假设从后端获取到了一组新闻类别，格式为数组,遍历数组，获取每个元素，最后渲染成以下格式

['公司动态', '产品资讯', '业界资讯']

//答案
// 从后端获取的数据
    var arr = ['公司动态', '产品资讯', '业界资讯']
    // 遍历数组，获取每个元素
    // 声明变量，用于拼接每一组，初始值为空字符串
    for(var i = 0, str = ''; i < arr.length; i++) {
        // console.log(arr[i])
        console.log(`<li>${arr[i]}</li>`)
        // 把每一组拼接
        str += `<li>${arr[i]}</li>`
    }
    // 渲染
    cat.innerHTML = str

练习：

假设从后端获取一组新闻列表，格式为数组; 最后渲染成以下格式

    var arr = [{
            title: '1939年,日军狼狗部队无人可挡,董翰良苦思良久跳起',
            ctime: 1611198000333
        },
        {
            title: '大将军：库里排历史第10 单看数据已超魔术师',
            ctime: 1591198000333
        },
        {
            title: '这些进攻性武器，美国真会供应乌军吗？',
            ctime: 1554198000333
        }
    ]
    // 遍历数组，获取每条新闻
    // 声明变量，用于拼接，初始化为空字符串
    for (var i = 0, str = ''; i < arr.length; i++) {
        // arr[i].ctime  每条数据的时间戳
        // 把时间戳放入到Date对象
        var d = new Date(arr[i].ctime)
        // 获取年月日
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        var date = d.getDate()
        // 把年月日拼接
        var time = `${year}-${month<10 ? '0'+month : month}-${date<10 ? '0'+date : date}`
        str += `
            <li>
                <a href="#">· ${arr[i].title}</a>
                <span>${time}</span>
            </li>
        `
    }
    // 渲染
     news.innerHTML = str

练习：

当用户失去焦点，验证用户输入的值是否为'xin666'，如果是显示'该用户已被占用'，否则 '用户名可以使用' onblur

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>验证用户名是否存在</title>
    </head>
    <body>
        <input type="text" id="user" placeholder="请输入用户名">
        <span id="msg"></span>
        <script>
            // 给文本框绑定失去焦点事件
            user.onblur = function () {
                // 获取用户输入的值
                console.log(user.value)
                // 判断用户名是否为xin666
                if(user.value === 'xin666') {
                    msg.innerHTML = '该用户已被占用'
                    // 操作CSS
                    msg.style.color = 'red'
                } else {
                    msg.innerHTML = '用户名可以使用'
                    msg.style.color = 'green'
                }
            }
        </script>
    </body>
</html>

练习：

编写登录页面04_login.html，点击登录，获取用户名和密码，如果用户名是admin并且密码是123456，警示框弹出‘登录成功’，否则弹出'登录失败'

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户登录</title>
    </head>
    <body>
        用户<input type="text" id="user"><br>
        密码<input type="text" id="pwd"><br>
        <button id="btn">登录</button>
        <script>
            btn.onclick = function() {
                // 获取用户名和密码
                var a = user.value
                var b = pwd.value
                console.log(a,b)
                // 判断是否正确
                if(a === 'admin' && b === '123456'){
                    alert('登录成功')
                } else {
                    alert('登录失败')
                }
            }
        </script>
    </body>
</html>

练习：假设从后端获取到一组医院的数据，每个医院包含的属性有编号、名称、等级、省份、详细地址、联系电话；遍历数组获取每条数据，最后渲染成以下格式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据渲染</title>
        <style>
            table {
                width: 1000px;
                margin: 100px auto;
                border: 1px solid #ccc;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid #ccc;
                text-align: center;
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>医院名称</th>
                    <th>等级</th>
                    <th>省份</th>
                    <th>详细地址</th>
                    <th>联系电话</th>
                </tr>
            </thead>
            <tbody id="cont">
                <tr>
                    <td>1</td>
                    <td>解放军总医院</td>
                    <td>三级甲等</td>
                    <td>北京</td>
                    <td>海淀区复兴路77号</td>
                    <td>010-12345678</td>
                </tr>
            </tbody>
        </table>
        <script>
            var arr = [
                {
                    id: 1,
                    title: '北京大学第三医院',
                    level: '三级甲等',
                    province: '北京',
                    addr: '北京市海淀区北三环西路105号',
                    tel: '010-88481234'
                },
                {
                    id: 2,
                    title: '北京协和医院',
                    level: '三级甲等',
                    province: '北京',
                    addr: '北京市海淀区北三环西路105号',
                    tel: '010-88481234'
                },
                {
                    id: 3,
                    title: '解放军总医院',
                    level: '三级甲等',
                    province: '北京',
                    addr: '北京市海淀区北三环西路105号',
                    tel: '010-88481234'
                }
            ]
            // 遍历数组，获取每条数据
            // 声明变量，用于拼接多组数据，初始化为空字符串
            for(var i = 0, str = ''; i < arr.length; i++) {
                // console.log(arr[i])
                // 把每条数据中的值拼接到模板中
                console.log(`
                    <tr>
                        <td>${arr[i].id}</td>
                        <td>${arr[i].title}</td>
                        <td>${arr[i].level}</td>
                        <td>${arr[i].province}</td>
                        <td>${arr[i].addr}</td>
                        <td>${arr[i].tel}</td>
                    </tr>
                `)
                // 多组数据拼接
                str += `
                    <tr>
                        <td>${arr[i].id}</td>
                        <td>${arr[i].title}</td>
                        <td>${arr[i].level}</td>
                        <td>${arr[i].province}</td>
                        <td>${arr[i].addr}</td>
                        <td>${arr[i].tel}</td>
                    </tr>
                `
            }
            // 渲染
            cont.innerHTML = str
        </script>
    </body>
</html>