【ajax基础01】ajax简介

程序员微木

已于 2024-06-21 15:09:11 修改

阅读量523

点赞数 12

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

于 2024-06-18 16:09:19 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/139774942

版权

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一：ajax简介

1 什么是ajax

AJAX（Asynchronous JavaScript And XML ）是一种在 Web 应用中通过异步发送 HTTP 请求向服务器获取内容，并使用这些新内容更新页面中相关的部分，而无需重新加载整个页面的 Web 开发技术。这可以让网页更具有响应性，因为只请求了需要更新的部分。

一开始的时候 AJAX 通过使用 XMLHttpRequest 接口实现，但是 fetch() API 更适合用于开发现代 Web 应用：更出色、更灵活、更好地与一些 Web 应用的基础技术相结合（如 Service Worker）。现代 Web 框架也为 AJAX 提供了抽象。

简言，ajax是浏览器与服务器进行数据通信的技术，从而实现页面数据的动态显示

二：ajax使用

1 如何使用ajax

引入axios库，用于与服务器进行数据通信
1. 基于XMLHttpRequest封装，代码简单
再学习XMLHttpRequest对象的使用，了解AJAX底层原理

2 axios使用（重点）

引入axios.js库：cdn.jsdelivr.net/npm/axios/dist/axios.min.js
使用axios函数
1. 传入配置对象
2. 再用.then回调函数接收服务器返回的数据结果，并对数据做后续处理

//语法格式如下
axios({
    url:'目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})

三：案例

需求：服务器端获取数据后，将数据渲染到页面中

<div class="my-p"></div>
    <!--1  引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        axios({
            //获取服务器数据的地址
            url: 'https://hmajax.itheima.net/api/province'
        }).then(result => {
            console.log(result)
            //找到result对象中，所需要的数据，将其渲染到页面中
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })
    </script>