《从入门到精通:AJAX基础知识解析,前端开发中利器》基础篇

目录

学习目标:

学习目录:

学习时间:

学习内容:

什么是 AJAX?

怎么用 AJAX ?

认识 URL

协议

域名

资源路径

获取 - 新闻列表 

URL 查询参数

axios-查询参数

常用请求方法和数据提交

axios 请求配置

axios 错误处理

HTTP协议-报文

请求报文格式:

响应报文格式:

 HTTP 协议-响应报文

​编辑

HTTP 响应状态码

 总结:

接口文档 

form-serialize 插件


 

大家好关于JavaScript APl知识点以及更新完毕 

我以后也会偶尔根心更新JavaScript APl

接下我会总结关于 AJAX知识点以及案例 

 大家有关于JavaScript知识点不知道可以去

🎉博客主页:阿猫的故乡

🎉系列专栏:JavaScript专题栏

🎉欢迎关注:👍点赞🙌收藏✍️留言

学习目标:

让数据活起来让数据实时更新


学习目录:

◆ AJAX 概念和 axios 使用
◆ 认识 URL
◆ URL 查询参数
◆ 常用请求方法和数据提交
◆ HTTP协议-报文
◆ 接口文档
◆ 案例 - 用户登录
◆ form-serialize 插件
 


学习时间:

提示:这里可以添加计划学习的时间

例如:

  • 周一至周五晚上 7 点—晚上9点
  • 周六上午 9 点-上午 11 点
  • 周日下午 3 点-下午 6 点

学习内容:

什么是 AJAX?

当用户与网页进行交互时,一般情况下会通过刷新整个页面来获取新的数据或更新内容。然而,AJAX(Asynchronous JavaScript and XML)的出现改变了这一现状,它是一种可以在不刷新整个页面的情况下,通过后台与服务器进行数据交互并更新页面的技术。通过AJAX,可以在网页上实现实时的数据加载、异步操作和动态内容更新,为用户提供更流畅、更快速的用户体验。AJAX的核心是使用JavaScript向服务器发送HTTP请求,并通过JavaScript处理服务器返回的数据,从而实现局部页面更新而不必刷新整个页面。同时,AJAX还可以与多种后端技术结合使用,如PHP、Java、Python等,扩展了其适用范围。总之,AJAX为前端开发者提供了丰富的功能和交互效果,为网页带来了更多的可能性。

概念:AJAX 是浏览器与服务器进行数据通信的技术
 

怎么用 AJAX ?

1. 先使用 axios [æk‘sioʊs] 库,与服务器进行数据通信
⚫ 基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
Vue、React 项目中都会用到 axios 
2. 再学习 XMLHttpRequest 对象的使用,了解 AJAX 底层原理 

语法:
1. 引入 axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用 axios 函数
✓ 传入配置对象
✓ 再用 .then 回调函数接收结果,并做后续处理

以下是一个简单的使用AJAX的示例代码:

HTML部分:

<!DOCTYPE html>
<html>
<head><title>AJAX示例</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="script.js"></script>
</head>
<body><button id="loadData">加载数据</button><div id="dataContainer"></div>
</body>
</html>

JavaScript部分(script.js):

$(document).ready(function() {// 点击按钮时触发AJAX请求$('#loadData').click(function() {$.ajax({url: 'data.json', // 请求的URL地址dataType: 'json', // 服务器返回的数据类型success: function(data) {// 请求成功时的回调函数,data为服务器返回的数据// 在这里可以处理返回的数据,更新页面中的内容$('#dataContainer').html(data.message);},error: function() {// 请求失败时的回调函数alert('请求数据失败');}});});
});

上述代码中,我们首先引入了jQuery库,然后定义了一个按钮和一个div用于展示数据。在JavaScript部分,使用$(document).ready()函数确保页面加载完成后执行代码。当按钮被点击时,会触发一个AJAX请求。请求的URL为"data.json",数据类型为JSON格式。如果请求成功,会执行success回调函数,并将返回的数据展示在页面上;如果请求失败,会执行error回调函数,弹出一个提示框。

请注意,上述代码中的"data.json"是一个示例URL,可以根据实际情况替换为你自己的URL。另外,需要确保你的服务器能够正确返回JSON格式的数据。

需求:请求目标资源地址,拿到省份列表数据,显示到页面
目标资源地址:http://hmajax.itheima.net/api/province
 

axios(
)
{
url: 'http://hmajax.itheima.net/api/province'
} .then(
)
(result) => {
// 对服务器返回的数据做后续处理
}

总结:1. AJAX 有什么用?
➢ 浏览器和服务器之间通信,动态数据交互
2. AJAX 如何学:
➢ 先掌握 axios 使用
➢ 再了解 XMLHttpRequest 原理
3. 这一节 axios 体验步骤?
➢ 引入 axios 库
➢ 使用 axios 语法

认识 URL

认识URL

URL(Uniform Resource Locator)是用于定位和访问互联网上资源的地址。它由多个部分组成,包括协议、主机名、端口号、路径、查询参数等。

以下是URL的基本结构:

协议://主机名:端口号/路径?查询参数

  • 协议(Protocol):指定了访问资源所使用的协议,如HTTP、HTTPS、FTP等。
  • 主机名(Hostname):指定了资源所在的服务器的域名或IP地址。
  • 端口号(Port):指定了服务器上提供该资源的进程的端口号。默认情况下,HTTP使用端口号80,HTTPS使用端口号443。
  • 路径(Path):指定了资源在服务器上的具体位置。
  • 查询参数(Query Parameters):一般用于向服务器传递额外的参数。以?开头,多个参数之间使用&分隔。

以下是一些示例URL:

  • https://www.example.com:8080/index.html
  • ftp://ftp.example.com/files/document.pdf
  • http://api.example.com/search?q=keyword&page=1

通过理解URL的结构和各部分的作用,我们可以更方便地访问和定位互联网上的资源。在编程中,URL常常被用于进行网络请求,获取数据或与服务器进行交互。

例如:
• https://www.baidu.com/index.html 图片资源
• https://www.itheima.com/images/logo.png 数据资源
• http://hmajax.itheima.net/api/province   网页资源
• ...

协议


概念:URL 就是统一资源定位符,简称网址,用于访问网络上的资源

http 协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式

域名

域名:标记服务器在互联网中方位

资源路径

资源路径:标记资源在服务器下的具体位置 

获取 - 新闻列表 

需求:使用 axios 从服务器拿到新闻列表数据
目标资源地址:http://hmajax.itheima.net/api/news

总结:

1. URL 是什么:
➢ 统一资源定位符,网址,用于访问服务器上资源
2. 请解释这个 URL,每个部分作用?
➢ http://hmajax.itheima.net/api/news
➢ 协议://域名/资源路径

URL 查询参数

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

 

axios-查询参数

语法:使用 axios 提供的 params 选项
注意:axios 在运行时把参数名和值,会拼接到 url?参数名=值
城市列表:http://hmajax.itheima.net/api/city?pname=河北省 

axios({
url: '目标资源地址',
params: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})

axios({
url: ' ',
}).then(result => {
// 对服务器返回的数据做后续处理
})
params: {
}
http://hmajax.itheima.net/api/city
pname:

总结:

1. URL 查询参数有什么作用?
➢ 浏览器提供给服务器额外信息,获取对应的数据
2. axios 要如何携带查询参数?
➢ 使用 params 选项,携带参数名和值

常用请求方法和数据提交

常用的请求方法有:GET、POST、PUT、DELETE。

GET 请求方法用于从指定的资源请求数据,常用于获取数据,不应该有副作用,可以被缓存。

POST 请求方法用于向指定的资源提交数据,常用于创建资源或提交表单数据,有副作用,不应该被缓存。

PUT 请求方法用于向指定的资源更新数据,常用于更新整个资源,有副作用,不应该被缓存。

DELETE 请求方法用于删除指定的资源,常用于删除资源,有副作用,不应该被缓存。

数据可以以多种方式进行提交,常见的有:

  1. 表单提交:通过表单的 method 属性指定请求方法,提交表单数据。

  2. URL 查询参数:将数据作为查询参数添加到 URL 中,适用于 GET 方法。

  3. 请求体:将数据作为请求体的一部分发送,适用于 POST、PUT、DELETE 方法。可以使用 JSON、XML、Form Data 等格式进行数据提交。

 

axios 请求配置

url:请求的 URL 网址
method:请求的方法,GET可以省略(不区分大小写)
data:提交数据 

axios({
url: '目标资源地址',
}).then((result) => {
// 对服务器返回的数据做后续处理
})
method: '请求方法',
data: {
参数名: 值
}

数据提交-注册账号

 需求:通过 axios 提交用户名和密码,完成注册功能
注册用户 URL 地址:http://hmajax.itheima.net/api/register
请求方法:POST
参数名:
username 用户名(中英文和数字组成,最少 8 位)
password 密码(最少 6 位)

axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post'
data: {
username: 'itheima007',
password: '7654321'
}
})

总结:

1. 请求方法表明对服务器资源的操作,最为常用的2个是?
POST 提交数据,GET 查询数据
2. axios 的核心配置?
➢ url:请求 URL 网址
➢ method:请求方法,GET 可以省略(不区分大小写)
➢ params:查询参数
➢ data:提交数据

axios 错误处理

在使用 axios 发送请求时,可以通过使用 .catch() 方法来捕获和处理错误。下面是一个使用 axios 进行错误处理的示例代码:

import axios from 'axios';axios.get('https://api.example.com/data').then(response => {// 处理成功的响应数据console.log(response.data);}).catch(error => {// 处理错误if (error.response) {// 发送请求收到响应了,但状态码不在 2xx 范围内console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// 发送请求但没有收到响应console.log(error.request);} else {// 其他错误console.log('Error', error.message);}console.log(error.config);});

.catch() 方法中,可以通过 error.response 判断是否收到了响应,然后进行相应的处理。如果 error.response 存在,表示请求发送成功但状态码不在 2xx 范围内,可以通过 error.response.data 获取响应的数据、error.response.status 获取状态码、error.response.headers 获取响应头。如果 error.request 存在,表示请求发送成功但没有接收到响应。其他情况下的错误可以通过 error.message 获取错误信息。

需要注意的是,以上代码是基于 Promise 的,也可以使用 async/await 进行错误处理。

 

HTTP协议-报文

 HTTP 协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照 HTTP 协议要求的格式,发送给服务器的内容

在使用 AJAX 进行通信时,我们需要了解 HTTP 协议中的报文格式。HTTP 报文由请求报文和响应报文组成,具体格式如下:

  1. 请求报文格式:

<Method> <URL> <HTTP Version>
<Header 1>: <Value 1>
<Header 2>: <Value 2>
...
<Header n>: <Value n><Body>

  • Method:请求方法,常见的有 GET、POST、PUT、DELETE 等。
  • URL:请求的资源URL。
  • HTTP Version:HTTP 协议的版本,如 HTTP/1.1。
  • Header:请求头,包含了一些请求的附加信息,如 Content-Type、Authorization 等。
  • Body:请求体,一般用于 POST 或 PUT 方法,包含了请求的具体数据。
  1. 响应报文格式:

<HTTP Version> <Status Code> <Status Message>
<Header 1>: <Value 1>
<Header 2>: <Value 2>
...
<Header n>: <Value n><Body>

  • HTTP Version:HTTP 协议的版本,如 HTTP/1.1。
  • Status Code:响应的状态码,表示服务器对请求的处理结果。
  • Status Message:状态码的文本描述。
  • Header:响应头,包含了一些响应的附加信息,如 Content-Type、Set-Cookie 等。
  • Body:响应体,服务器返回的具体数据。

在使用 AJAX 进行通信时,我们可以根据需要设置请求头和请求体,并解析响应头和响应体来处理服务器的返回结果。具体的实现可以使用 XMLHttpRequest 或者更方便的封装库如 axios、jQuery Ajax 等。

 HTTP 协议-响应报文

HTTP 协议:规定了浏览器发送及服务器返回内容的格式
响应报文:服务器按照 HTTP 协议要求的格式,返回给浏览器的内容
1. 响应行(状态行):协议、HTTP 响应状态码、状态信息
2. 响应头:以键值对的格式携带的附加信息,比如:Content-Type
3. 空行:分隔响应头,空行之后的是服务器返回的资源
4. 响应体:返回的资源

HTTP 响应状态码

HTTP 响应状态码是服务器对请求的处理结果的标识,它用于告知客户端请求的处理状态。常见的 HTTP 响应状态码有以下几种:

1xx:信息性状态码

  • 100 Continue:请求已接收,继续处理。
  • 101 Switching Protocols:服务器要求客户端切换协议。

2xx:成功状态码

  • 200 OK:请求成功。
  • 201 Created:成功创建了资源。
  • 204 No Content:请求成功,但响应不包含实体内容。

3xx:重定向状态码

  • 301 Moved Permanently:资源被永久移动到其他位置。
  • 302 Found:资源被临时移动到其他位置。
  • 304 Not Modified:请求的资源未修改,使用缓存的内容。

4xx:客户端错误状态码

  • 400 Bad Request:请求有语法错误。
  • 401 Unauthorized:请求需要身份认证。
  • 403 Forbidden:服务器拒绝请求。
  • 404 Not Found:请求的资源不存在。

5xx:服务器错误状态码

  • 500 Internal Server Error:服务器内部错误。
  • 502 Bad Gateway:网关或代理服务器接收到无效响应。
  • 503 Service Unavailable:服务器当前无法处理请求。

了解这些常见的 HTTP 响应状态码可以帮助我们更好地理解请求的处理结果,进行错误处理和调试。在实际开发中,我们可以根据不同的响应状态码,进行相应的处理和反馈给用户。

 总结:

1. 响应报文的组成:
响应行(状态行):协议、HTTP 响应状态码、状态信息
响应头:以键值对的格式携带的附加信息,比如 Content-Type
空行:分隔响应头,空行之后的是返回给浏览器的资源
响应体:返回的资源
2. HTTP 响应状态码用来表明请求是否成功完成

接口文档 

接口文档:描述接口的文章
接口:使用 AJAX 和服务器通讯时,使用的 URL,请求方法,以及参数
接口文档
(后端工程师)
 

form-serialize 插件

作用:快速收集表单元素的值
 

以上就算关于ajax基础知识点总结需要素材请来私信我 

以上图片全部来源于网络,如有侵权联系我速删!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/219663.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins离线安装部署教程简记

前言 在上一篇文章基于Gitee实现Jenkins自动化部署SpringBoot项目中&#xff0c;我们了解了如何完成基于Jenkins实现自动化部署。 对于某些公司服务器来说&#xff0c;是不可以连接外网的&#xff0c;所以笔者专门整理了一篇文章总结一下&#xff0c;如何基于内网直接部署Jen…

ELADMIN - 免费开源 admin 后台管理系统,基于 Spring Boot 和 Vue ,包含前端和后端源码

一款简单好用、功能强大的 admin 管理系统&#xff0c;包含前端和后端源码&#xff0c;分享给大家。 ELADMIN 是一款基于 Spring Boot、Jpa 或 Mybatis-Plus、 Spring Security、Redis、Vue 的前后端分离的后台管理系统。 ELADMIN 的作者在 Github 和 Gitee 上看了很多的项目&…

Java项目学生管理系统六后端补充

班级管理 1 班级列表&#xff1a;后端 编写JavaBean【已有】编写Mapper【已有】编写Service编写controller 编写Service 接口 package com.czxy.service;import com.czxy.domain.Classes;import java.util.List;/*** author 桐叔* email liangtongitcast.cn* description*/ p…

【Jenkins】Centos环境安装Jenkins(通过rpm安装)

在Centos操作系统中通过rpm安装Jenkins 参考官网 https://www.jenkins.io/doc/book/installing/linux/#red-hat-centos 1、下载安装Jdk17 下载安装 # 更新您的系统&#xff0c;不一定需要 # sudo yum -y update # 安装将用于下载 Java 17 二进制文件的 wget 命令行工具。 s…

计算机网络传输层(期末、考研)

计算机网络总复习链接&#x1f517; 目录 传输层的功能端口UDP协议UDP数据报UDP的首部格式UDP校验 TCP协议&#xff08;必考&#xff09;TCP报文段TCP连接的建立TCP连接的释放TCP的可靠传输TCP的流量控制零窗口探测报文段 TCP的拥塞控制慢开始和拥塞控制快重传和快恢复 TCP和U…

薅github的羊毛-用pages建自己的博客或静态资源站 - 1/2

注册帐号 准备邮箱注册帐号&#xff0c;在注册界面输入用户名、邮箱及密码完成注册。 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 1. 在注册成过程中&#xff0c;会往邮箱发送验证码&#xff0c;请如实填写即可 2. 验证码没错的话&#xff0c;就代…

【Maven】加载 Maven 项目报错 status code: 501, reason phrase: HTTPS Required (501)

问题描述 加载 Maven 项目报错&#xff0c;错误信息如下&#xff1a; status code: 501, reason phrase: HTTPS Required (501)尝试使用 -U 标记(强制更新快照)运行 Maven 导入原因分析 这个错误通常表示 Maven 在尝试从远程仓库下载依赖时遇到了 HTTPS 必需的错误。 解决方…

Mac配置环境变量不生效

Mac配置环境变量不生效 Mac中的环境变量介绍 Mac系统的环境变量&#xff0c;加载顺序为&#xff1a; /etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.profile ~/.bashrc 当然/etc/profile和/etc/paths是系统级别的&#xff0c;系统启动就会加载&#xff0c;后面…

将自己的django项目部署到云服务器(腾讯云centos)

最近自己买了个云服务玩&#xff0c;突然就想把自己写的小项目部署到云服务器上&#xff0c;这样就可以实现公网访问了。以下是整个部署过程和遇到的各种问题的解决方案&#xff0c;有想自己部署自己功能的&#xff0c;可以参考着进行哦。 1、设置好腾讯云的远程登录代码 先给…

HarmonyOS(二)—— 初识ArkTS开发语言(下)之ArkTS声明式语法和组件化基础

前言&#xff1a; 通过前面ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门以及ArkTS开发语言&#xff08;中&#xff09;之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进&#xff0c;知道了ArkTS具备了声明式语法和组件化特性&#xff0c;今天&#xff0c;搭…

倾角仪(xyz)理解

第一列是初始值 x更小&#xff0c;说明往左倾 x更大&#xff0c;说明往右倾 z更大、y更大&#xff0c;说明往后倾 z更小、y更大&#xff0c;说明往前倾

[Unity+文心知识库]使用百度智能云搭建私有知识库,集成知识库API,打造具备知识库的AI二次元姐姐

1.简述 最近从百度智能云的官方技术支持那边了解到&#xff0c;目前百度千帆大模型平台提供有在线的知识库功能&#xff0c;能够在线上传自己的私人知识库文档&#xff0c;并且配置文心一言模型作为文本生成的引擎&#xff0c;构建自己的私有知识库。之前自己搭建知识库都是用的…

VPN 在网络安全中的应用

虚拟专用网络&#xff08;Virtual Private Network&#xff0c;VPN&#xff09;是指利用不安全的公共网络如 Internet 等作为传输媒介&#xff0c;通过一系列的安全技术处理&#xff0c;实现类似专用网络的安全性能&#xff0c;保证重要信息的安全传输的一种网络技术。 1&#…

【网络安全技术】电子邮件安全PGP,SMIME

一、PGP&#xff08;Pretty Good Privacy&#xff09; PGP是一种邮件加密手段&#xff0c;他在发邮件一方加密&#xff0c;然后发给发送方邮件服务器&#xff0c;发送方邮件服务器再发送给接收方邮件服务器&#xff0c;然后接收方再从接收方邮件服务器pop出来&#xff0c;这整…

python和pygame实现烟花特效

python和pygame实现烟花特效 新年来临之际&#xff0c;来一个欢庆新年烟花祝贺&#xff0c;需要安装使用第三方库pygame&#xff0c;关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 效果图及源码 先看效果图&#xff1a…

共建开源新里程:北京航空航天大学OpenHarmony技术俱乐部正式揭牌成立

12月11日,由OpenAtom OpenHarmony(以下简称“OpenHarmony”)项目群技术指导委员会(以下简称“TSC”)和北京航空航天大学共同举办的“OpenHarmony软件工程研讨会暨北京航空航天大学OpenHarmony技术俱乐部成立仪式”在京圆满落幕。 现场大合影 活动当天,多位重量级嘉宾出席了此次…

【EXCEL】vlookup,index/match查找函数

区别&#xff1a; 1.Vlookup函数只能查找列数据&#xff0c;即纵向查找&#xff0c;而IndexMatch函数&#xff0c;既可以纵向查找&#xff0c;也可以横向查找&#xff1b; 2、Vlookup函数查找的依据(第一个参数)必须位于数据源的第一列&#xff0c;IndexMatch函数组合则无此限制…

matlab操作方法(三)——matlab中的数字图像(读取、显示、保存)

数字图像是二维图像用有限数字数值像素的表示。通常像素在计算机中保存为二维整数数组的光栅图像&#xff0c;这些值经常用压缩格式进行传输和存储。 二值图像&#xff1a;图像中每个像素的亮度值仅可以取自0或1的图像&#xff0c;因此也称为1bit图像 灰度图像&#xff1a;图…

华为配置基本QinQ示例

组网需求 如图1所示&#xff0c;网络中有两个企业&#xff0c;企业1有两个分支&#xff0c;企业2有两个分支。这两个企业的各办公地的企业网都分别和运营商网络中的SwitchA和SwitchB相连&#xff0c;且公网中存在其它厂商设备&#xff0c;其外层VLAN Tag的TPID值为0x9100。 现…

StatusBar、NavigationBar窗口显示在Activity下面之aosp14窗口类bug线索征集

背景&#xff1a; hi&#xff0c;粉丝朋友们&#xff1a; 从上次帮助国际学员解决了一个分屏有黑屏的bug后&#xff0c;相关blog和解决方法 https://blog.csdn.net/learnframework/article/details/134708393 解决方法看b站视频&#xff1a; https://www.bilibili.com/video/B…