01初识AJAX

简介: 初识AJAX

该图为本文的核心汇总

3d63fe470f2a45b1815eca9593a2fdf2.png

0.讲解必备铺垫知识

在开始讲解之前认识下计算机体系的其他知识铺垫

1.服务器:

服务器是计算机的一种,它比普通计算机运行更快、负载更高。服务器在网络中为其它客户机(如PC机、智能手机、ATM等终端)提供计算或者应用服务。

2.url网址:

概念:url, 统一资源定位符, 标记资源在网络中的位置。也称网址

作用: 标记某个资源在网络中的唯一地址。只有通过URL地址,浏览器才能定位资源的存放位置,从而成功访问到对应的资源。

构成:1.协议 2.主机名 3.端口号(可省略)4.资源存放的路径

3.请求和响应:

浏览器和服务器之间的通信过程, 分为两个步骤: 请求和响应,

  1. 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做"请求"
  2. 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"

如何查看响应与请求?

兄弟姐妹们去浏览器查看我框起来的这几个点(谷歌浏览器)

975d900b634d44f383225966b99f2c08.png

为何一个主页有这么多次请求?

首先请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求

访问网页时,能获取到几种类型资源?

有html, css, js, 图片, 音频, 视频, JSON字符串数据等等

好了,铺垫知识结束。AJAX开始!!!

一、AJAX是什么?

是一种在JS代码中发请求并获取响应数据的技术

使用场景:

不刷新页面的情况,从服务器获取数据,以局部更新页面

例如:我们在注册账户名的时候,当离开账户名时,系统会检测它的库里面有没有重合的名字,有就给我们提示:当前用户名存在

二、用axios发起Ajax请求

1.先引入axios.js文件到自己的网页中。

(axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js

2.axios的使用语法

axios({
    url: '请求的URL网址',
    method: '请求的方式'
    //data 对应POST方法
   //params对应 GET方法
}).then((结果变量名) => { // .then 用来指定请求成功之后的回调函数
    // 形参中的 结果变量名 是请求成功之后的结果
}).catch((错误变量名)=>{
    // 如果请求发生了错误,会到这来来
    // 形参中的 错误变量名 是请求失败之后的结果
})

来个例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- 1.引入axios.js -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
        <script>
            <!-- 2.使用axios -->
            console.log(axios);
            axios({
                url:'http://ajax-api.itheima.net/api/area',
                method:'GET',
                params:{
                    pname:'江西省',
                    cname:'九江市'
                }
            }
            ).then(res=>{
                console.log(res)//then节后请求成功之后的回调函数;
            })
        </script>
</body>
</html>

e054df9a838a41a8a8fd1b50bf96b0ba.png

三、请求&响应报文

1、请求报文:

请求报文: 规定了浏览器 向 服务器, 以什么格式 把数据发送

请求报文组成 (三部分)

请求行

       请求方式: (GET / POST / DELETE / PUT / PATCH ...)

       请求url: 资源在服务器地址协议版本: 默认HTTP/1.1

       协议版本: 默认HTTP/1.1

请求头部: 头部参数名: 值(键值对形式)

请求体: 携带给服务器的数据

2.响应报文:

响应报文: 规定了服务器 向 浏览器, 以什么格式 把数据返回

响应报文组成 (三部分)

响应行

       协议版本: 默认HTTP/1.1

       响应状态码: 服务器返回的一个数字标识, 代表本次响应的状态

       响应状态描述: 服务器返回的一个文字标识, 代表本次响应的描述

响应头部: 头部参数名: 值

响应体: 服务器返回的响应数据

3.常见的响应码

e5b605dc0c584f1ab60b09747d6140e3.png




相关文章
|
存储 前端开发 Java
开题报告-基于SpringBoot的求职招聘系统的设计与实现
开题报告-基于SpringBoot的求职招聘系统的设计与实现
321 0
|
存储 缓存 算法
【CMake 基础教程 】深入理解CMake变量:类型、原理及最佳实践
【CMake 基础教程 】深入理解CMake变量:类型、原理及最佳实践
384 0
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
258 0
|
8月前
|
人工智能 编解码 算法
ENEL:3D建模革命!上海AI Lab黑科技砍掉编码器,7B模型性能吊打13B巨头
ENEL是由上海AI Lab推出的无编码器3D大型多模态模型,能够在多个3D任务中实现高效语义编码和几何结构理解,如3D对象分类、字幕生成和视觉问答。
206 9
ENEL:3D建模革命!上海AI Lab黑科技砍掉编码器,7B模型性能吊打13B巨头
|
10月前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
537 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
11月前
|
缓存
在 setup 函数中使用 computed 计算属性
【10月更文挑战第23天】在 Vue3 中,`computed` 计算属性为我们提供了一种方便且高效的方式来处理基于其他响应式数据的派生数据。在 `setup` 函数中使用 `computed` 计算属性,可以让我们更好地组织和管理组件的逻辑。
|
Linux
linux播放器
Linux系统提供多种音乐和视频播放器,如Iceplayer(原Splayer),支持多种音频格式及丰富功能,被誉为Linux版千千静听;Amarok是KDE桌面的强大音乐播放器;Rhythmbox是GNOME的默认播放器,简洁实用;Clementine是跨平台且源自Amarok 1.4的播放器;VLC是跨平台的强大播放器,支持众多音频和视频格式;Audacious则是一款简约轻便的播放器,适合喜欢Winamp风格的用户。每款播放器都有其特色,用户可根据需求选择。
266 3
linux播放器
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
830 0
|
开发工具 数据安全/隐私保护 C++
windows openssl安装和基本使用(代码演示)
本文主要讲到了openssl的基本使用方法,开发环境为windows,开发工具为VS2019.本文主要是说明openssl如何使用,不介绍任何理论知识,如果有不懂的,请自行百度。个人建议下一个everything查询工具,真的很好用,比window自带的查询快了很多,可以查询自己想要的文件
933 0
windows openssl安装和基本使用(代码演示)
|
Web App开发 测试技术 Python
Selenium + Python + Chrome 自动化测试 环境搭建
一、下载Python 相关的教程很多,此处不详细记录了,下面是官网下载地址: https://www.python.org/downloads/ 我使用的python版本为 Python 3.6.1 注意:下载完成后配置python和pip的环境变量   二、下载Selenium 如果环境变量配...
3675 0