前端学习第一课

AJAX

事先说明,这只是记录,并不是从零到一的教学内容,如果想要学习的话,可以跳过本文章了
ok,转回正题,正如上面所说,这只是记录。其实我是有一定的前端基础的,也做过涉及相关的开发,但是最近新工作要求用ajax进行一些工作,仅靠我之前那二两水的技术是大大不行的,所以需要统一系统的学习一波,正好把学习过程中的一些知识点做个记录积累,很好,下面开始这篇博客的正文内容

AJAX介绍

这个自己看官网啦,不是很重要,大概了解一下就好。
在这里插入图片描述

上面是W3C的介绍,如果想知道更多的话可以点击下面的链接
WSC网址详细内容点击即看

AJAX的使用及其特点

AJAX的一个最大特点就是:
无需刷新页面便可向服务器传输或读写数据而这个特点主要得益于XMLHTTP组件的XMLHTTPRequest对象
XMLHTTPRequest对象方法及其描述:
所有现代浏览器(Chrome、Firefox、IE、Edge、Safari、Opera)都有内置的 XMLHttpRequest 对象。

XMLHttpRequest 对象方法
在这里插入图片描述

XMLHttpRequest 对象属性

在这里插入图片描述

把配置好信息的 ajax 对象发送到服务端的一个详细的使用示例,如下所示:

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();// 定义回调函数
xhttp.onload = function() {// 您可以在这里使用数据
}// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

AJAX状态码

ajax有自己的状态码,每次当readyState改变时都会调用onreadystatechange函数,并且当readyState为4且status为200的时候,响应就绪,我们才可以正常使用服务端给我们的数据
在这里插入图片描述

请求方式

GET请求

GET请求与POST请求相比,GET更简单也更快,并且大部分情况下都是通用的。但是注意,以下几种情况,需要使用POST请求

  • 缓存文件不是选项(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 无大小限制)
  • 发送用户输入(可包含未知字符),POST 比GET 更强大更安全

AJAX实际运用

实现ajax的方式有多种,
1、jQuery封装的ajax
2、原生的XMLHttpRequest
3、axios

以上都可以实现异步网络请求。
下面用具体案例来实现ajax的实际运用:

案例一:当鼠标离开账号输入框的时候,发送一个ajax检测账号是否存在

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>用户注册</title><script src="jslib/jquery-3.6.1.js"></script>
</head>
<body><form action="regservlet" method="post">账户名:<input name="username" id="email"><span id="usernameInfo"></span><br>密码:<input type="password" name="password"> <br>昵称:<input name="nikename"><br><input type="submit" value="注册"> <input type="reset" value="重置"></form><script>$("#username").blur(function () {//发送一个ajax的post请求$.post("CheckEmailServlet",{em:this.value},function (data) {if(data == "f"){$("#usernameInfo").css("color","green").html("恭喜你,此账户名合法。")} else {$("#usernameInfo").css("color","red").html("很遗憾,此账户名非法。")}});});</script>
</body>
</html>

案例二:axios发送请求

//需要引入axios.js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><body><button id="btn2">axios发送POST请求</button> 
<script>
document.querySelector('#btn2').addEventListener('click', function () {axios({method: 'POST',url: '发送请求的URL地址',data: {name: 'dy',age: 3,sex: '女'}}).then(function (res) {res = res.dataconsole.log(res)})})</script>

其他的也不过多介绍啦,大概情况就是这样的

ps:其实在实际开发中很少会用到原生的ajax进行开发的,大部分时候都会对ajax进行封装,常用的还是axios。但是大概的内容还是需要了解的

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

centos7.9安装es7.12.0

下载es 国内镜像&#xff1a;https://mirrors.huaweicloud.com/elasticsearch/7.12.0/ 下载并上传内容到/usr/local目录下 解压&#xff1a; tar -zxvf /uar/local/elasticsearch-7.12.0-linux-x86_64.tar.gz安装 es一般不能用root启动&#xff0c;因此需要创建es:es用户和…

又一个行业被Ai背刺了:Comfyui生成你的专属模特!

工作流获取方式放在文末了 Ai技术的进步&#xff0c;带来了许多之前无法实现的新技术和新成品&#xff0c;这也使得曾经需要漫长的时间和复杂的创作过程才能够完成的工作呗Ai技术轻松代替。 于此同时&#xff0c;不同行业也在这个过程中受到了不同程度的冲击。 今天给大家分…

反激式开关电源-8利用AP法进行变压器设计

变压器AP的计算 在变压器设计中&#xff0c;主要有两种方法&#xff0c;一种称为Kc法&#xff0c;这种方法也称为磁芯几何参数法&#xff0c;如果用这个方法来进行设计&#xff0c;那么我们首先要计算出磁芯的几何参数Kc值&#xff0c;在这个参数上留有一定的裕度后选取和Kc值…

在win10折腾Flowise:部署和尝试

Flowise 是一种低代码/无代码拖放工具&#xff0c;旨在让人们轻松可视化和构建 LLM 应用程序。 本地部署 操作系统&#xff1a; win10 由于网络、操作系统等各种未知问题&#xff0c;使用npm install -g flowise的方式&#xff0c;尝试了很多次&#xff0c;都没有部署成功&am…

信息安全相关内容

信息安全 安全防护体系 安全保护等级 安全防护策略 安全技术基础 安全防护体系 安全防护体系有7个等级 安全保护等级 安全保护等级有5个等级,从上到下是越来越安全的用户自主其实就是用户自己本身具有的相应的能力 安全防护策略 安全策略是对抗攻击的主要策略安全日志: …

24长三角B题1-5问完整代码+15页保姆级思路已更新

比赛题目的完整版思路可执行代码数据参考论文都会在第一时间更新上传的&#xff0c;大家可以参考我往期的资料&#xff0c;所有的资料数据以及到最后更新的参考论文都是一次付费后续免费的。注意&#xff1a;&#xff08;建议先下单占坑&#xff0c;因为随着后续我们更新资料数…

单片机烧录程序时“DTR的低电平复位,RTS高电平进入bootloader”有关的串口Modem联络信号

烧录程序时常见DTR和RTS引脚 参考&#xff0c;参考视频 因为常常使用的都是串口下载程序&#xff0c;常用的芯片CH340系列&#xff0c;下图中标红的引脚是MODEM联络信号&#xff0c;其中常见的DTR和RTS就是常见的串口Modem网络输出信号&#xff0c;也就是通过烧录软件控制的接…

一键操作!如何轻松将安卓手机视频传输到电脑

在这篇文章中&#xff0c;我们将探讨如何使用Coolmuster Android Assistant软件&#xff0c;从安卓设备传输视频文件到电脑。Coolmuster Android Assistant是一款强大的管理工具&#xff0c;它能够帮助用户轻松地管理安卓设备上的数据&#xff0c;包括联系人、短信、应用程序、…

吴恩达深度学习笔记:优化算法 (Optimization algorithms)2.8

目录 第二门课: 改善深层神经网络&#xff1a;超参数调试、正 则 化 以 及 优 化 (Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization)第二周&#xff1a;优化算法 (Optimization algorithms)2.8 Adam 优化算法(Adam optimization algor…

React 第三十七章 Scheduler 最小堆算法

在 Scheduler 中&#xff0c;使用最小堆的数据结构在对任务进行排序。 // 两个任务队列 var taskQueue: Array<Task> []; var timerQueue: Array<Task> [];push(timerQueue, newTask); // 像数组中推入一个任务 pop(timerQueue); // 从数组中弹出一个任务 time…

通过 Apple Vision Pro 释放创造力:深入研究空间计算

Apple 最新进军空间计算领域的 Apple Vision Pro,标志着重新定义我们与技术交互方式的重大飞跃。空间计算超越了传统界限,允许用户以无缝集成到物理世界的方式参与 2D 和 3D 内容。 我们可以关注两种类型的体验: 在空间中渲染 2D 内容。这涉及将现有设备窗口投影到空间领域…

QT:QML与C++交互

目录 一.介绍 二.pro文件添加模块 三.h文件 四.cpp文件 五.注册 六.调用 七.展示效果 八.代码 1.qmlandc.h 2.qmlandc.cpp 3.main.cpp 4.qml 一.介绍 在 Qt 中&#xff0c;QML 与 C 交互是非常重要的&#xff0c;因为它允许开发人员充分利用 QML 和 C 各自的优势&…

OpenAI GPT-4o:开启人工智能交互新纪元

引言 在人工智能领域&#xff0c;OpenAI一直是创新的代名词。2024年5月14日&#xff0c;OpenAI再次以GPT-4o模型震撼了科技界&#xff0c;这款全新的旗舰生成模型不仅免费向公众开放&#xff0c;更以其革命性的多模态交互能力&#xff0c;引领我们进入了一个全新的科幻时代。 …

位图和布隆过滤器:位图

在《unordered_map 和 unordered_set》 中提到过&#xff1a; 哈希是一种思想&#xff0c;通过哈希函数将数据转化为一个或多个整型 —— 映射关系&#xff1b;通过这种映射关系&#xff0c;可以做到以 O(1) 的时间复杂度查找数据。 本文即将介绍的 位图 和 布隆过滤器 就是两个…

亚马逊Prime Day旺季备货遭遇美国海关查验高峰,应对策略全攻略!

随着全球化贸易的日益繁荣&#xff0c;跨境电商企业在旺季备货时面临着巨大的挑战&#xff0c;尤其是当遇到美国海关查验潮时&#xff0c;如何应对成为众多商家关注的焦点。本文将从分析美国海关查验的原因入手&#xff0c;为商家提供一系列应对策略和建议。 一、美国海关查验潮…

​学者观察 | 从区块链应用创新看长安链发展——CCF区块链专委会荣誉主任斯雪明

导语 2024年1月27日&#xff0c;斯雪明教授在长安链发布三周年庆暨生态年会上发表演讲&#xff0c;认为在区块链发展过程中&#xff0c;不仅需要技术创新&#xff0c;同时需要有价值、有特色、有示范意义的应用创新。斯雪明教授介绍了国内区块链技术与应用发展的现状、趋势与挑…

SVN切换账号

SVN切换账号 有这么一种情况&#xff0c;对于一个新项目&#xff0c;项目紧急的情况下&#xff0c;大家会使用一个svn账号下载代码&#xff0c;开始提前熟悉业务。那么当正式开发的时候&#xff0c;每个人的svn账号也已经下发下来了&#xff0c;这个时候大家就需要切换成自己的…

C# .Net8 switch 的用法

在 .net 8中&#xff0c;switch 不需要再和传统的写法一样了&#xff0c;会更加的方便 创建一个 .net 8 控制台项目 switch 的写法没必要和以前一样 namespace SwitchTest {internal class Program{static void Main(string[] args){int day 3;var week day switch{1 > &…

AIGC文生视频:Sora模型报告总结

作为世界模拟器的视频生成模型 我们探索视频数据生成模型的大规模训练。具体来说&#xff0c;我们在可变持续时间、分辨率和宽高比的视频和图像上联合训练文本条件扩散模型。我们利用对视频和图像潜在代码的时空补丁进行操作的变压器架构。我们最大的模型 Sora 能够生成一分钟…