保定网站建设培训班,怎么建设自己网站的后台,制作企业网站的目的,wordpress调用媒体图片不同尺寸目录
学习目标#xff1a;
学习目录#xff1a;
学习时间#xff1a;
学习内容#xff1a;
什么是 AJAX#xff1f;
怎么用 AJAX #xff1f;
认识 URL
协议
域名
资源路径
获取 - 新闻列表
URL 查询参数
axios#xff0d;查询参数
常用请求方法和数据提…目录
学习目标
学习目录
学习时间
学习内容
什么是 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 当用户与网页进行交互时一般情况下会通过刷新整个页面来获取新的数据或更新内容。然而AJAXAsynchronous 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.jshttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 2. 使用 axios 函数 ✓ 传入配置对象 ✓ 再用 .then 回调函数接收结果并做后续处理
以下是一个简单的使用AJAX的示例代码
HTML部分
!DOCTYPE html
html
headtitleAJAX示例/titlescript srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js/scriptscript srcscript.js/script
/head
bodybutton idloadData加载数据/buttondiv iddataContainer/div
/body
/htmlJavaScript部分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
URLUniform Resource Locator是用于定位和访问互联网上资源的地址。它由多个部分组成包括协议、主机名、端口号、路径、查询参数等。
以下是URL的基本结构
协议://主机名:端口号/路径?查询参数协议Protocol指定了访问资源所使用的协议如HTTP、HTTPS、FTP等。主机名Hostname指定了资源所在的服务器的域名或IP地址。端口号Port指定了服务器上提供该资源的进程的端口号。默认情况下HTTP使用端口号80HTTPS使用端口号443。路径Path指定了资源在服务器上的具体位置。查询参数Query Parameters一般用于向服务器传递额外的参数。以?开头多个参数之间使用分隔。
以下是一些示例URL
https://www.example.com:8080/index.htmlftp://ftp.example.com/files/document.pdfhttp://api.example.com/search?qkeywordpage1
通过理解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 请求方法用于删除指定的资源常用于删除资源有副作用不应该被缓存。
数据可以以多种方式进行提交常见的有 表单提交通过表单的 method 属性指定请求方法提交表单数据。 URL 查询参数将数据作为查询参数添加到 URL 中适用于 GET 方法。 请求体将数据作为请求体的一部分发送适用于 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 报文由请求报文和响应报文组成具体格式如下 请求报文格式
Method URL HTTP Version
Header 1: Value 1
Header 2: Value 2
...
Header n: Value nBodyMethod请求方法常见的有 GET、POST、PUT、DELETE 等。URL请求的资源URL。HTTP VersionHTTP 协议的版本如 HTTP/1.1。Header请求头包含了一些请求的附加信息如 Content-Type、Authorization 等。Body请求体一般用于 POST 或 PUT 方法包含了请求的具体数据。 响应报文格式
HTTP Version Status Code Status Message
Header 1: Value 1
Header 2: Value 2
...
Header n: Value nBodyHTTP VersionHTTP 协议的版本如 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基础知识点总结需要素材请来私信我 以上图片全部来源于网络如有侵权联系我速删
