前端学习第一课

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.mzph.cn/diannao/13333.shtml

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

相关文章

【工具】macOS、window11访问limux共享目录\共享磁盘,samba服务安装使用

一、samba服务安装 Samba是一个免费的开源软件实现&#xff0c;使得非Windows操作系统能够与Windows系统进行文件和打印服务共享。它实现了SMB/CIFS协议&#xff0c;并且能够在Linux、Unix、BSD等多种系统上运行。 安装 samba&#xff1a; sudo yum install samba配置 samba…

【kali工具】NMAP 高级使用技巧

NMAP 高级使用技巧 6.1.3 NMAP 语法及示例 语法&#xff1a;nmap [Scan Type(s)] [Options] 例 1&#xff1a;使用 nmap 扫描一台服务器 默认情况下&#xff0c;Nmap 会扫描 1000 个最有可能开放的 TCP 端口。 ┌──(root&#x1f480;xuegod53)-[~] └─# nmap 192.168…

【介绍下Python多线程,什么是Python多线程】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

【气象常用】时间序列的线性拟合

效果图&#xff1a; 主要步骤&#xff1a; 1. 数据准备&#xff1a;下载Hadley Centre observations datasets的HadSST数据 可参考【气象常用】时间序列图-CSDN博客 2. 数据处理&#xff1a;计算线性拟合 3. 图像绘制&#xff1a;绘制折线及拟合线&#xff0c;并添加文本 …

Nacos部署选择数据源mysql8.0,启动报错No DataSource Set(终极解决方案)

Nacos部署选择数据源mysql8.0&#xff0c;启动报错No DataSource Set&#xff08;终极解决方案&#xff09; 选择mysql5.7正常&#xff0c;但是选择mysql8.0就报这个错&#xff0c;配置都确认无问题&#xff0c;但就是用不了mysql8.0 排查了好久&#xff0c;发现是数据库字符集…

其他自动化工程师都在偷偷学习AI技术,你再不学就落后了!一篇文章教会你使用AI!

其他自动化工程师都在偷偷学习AI技术&#xff0c;你再不学就落后了&#xff01;一篇文章教会你使用AI&#xff01; 哈喽&#xff0c;大家好&#xff0c;我是小叔。了解小叔的朋友都清楚&#xff0c;我从来都不是标题党&#xff0c;我只会用美女图片来吸引你们&#x1f602;&am…

python 六句话让电脑告诉你,刚才插入的串口编号

六句话让电脑告诉你&#xff0c;我的串口号 第一步&#xff0c;安装python 编译器以及pyserial 模块第二步&#xff0c;写入代码 import serial.tools.list_ports usart_list list(serial.tools.list_ports.comports()) input("Please insert your serial port:")…

【OpenCV 基础知识 4】分离图像通道

cvSplit()是openCV中的一个函数&#xff0c;它分别复制每个通道到多个单通道图像。 void cvSplit( const CvArr* src, CvArr* dst0, CvArr* dst1, CvArr* dst2, CvArr* dst3 )&#xff1b;.cvSplit()函数将复制src的各个通道到图像dst0&#xff0c;dst1&#xff0c;dst2和dst3中…

midjourney里有哪些常用参数?

一、stylize参数 Midjourney 经过训练&#xff0c;可以生成更加具有艺术色彩、构图和形式的图像。 --stylize或参数--s影响该训练的应用程度。 低风格化值生成的图像与提示词非常匹配&#xff0c;但艺术性较差。数值越高艺术性更好&#xff0c;但是和描述词相关性更差&#…

Polars,一个高效处理数据的python库

Polars 库简介 Polars 是一个用于数据操作和分析的快速、内存优化的Rust编写的DataFrame库,具有类似于Pandas的API接口。它提供了高性能的数据操作、并行计算和内存效率,适用于处理大规模数据集。 安装与使用 使用 pip 安装 Polars&#xff1a;pip install polarsPython 中导…

【python量化交易】—— 双均线择时策略 - Qteasy自定义交易策略【附源码】

使用qteasy自定义并回测双均线交易策略 使用qteasy自定义并回测一个双均线择时策略策略思想导入qteasy模块创建一个新的策略回测交易策略&#xff0c;查看结果 使用qteasy自定义并回测一个双均线择时策略 我们今天使用qteasy来回测一个双均线择时交易策略&#xff0c;qteasy是…

Spring初学入门(跟学笔记)

一、Spring概述 Spring是一款主流的Java EE轻量级开源框架。 Spring的核心模块&#xff1a;IoC&#xff08;控制反转&#xff0c;指把创建对象过程交给Spring管理 &#xff09;、AOP&#xff08;面向切面编程&#xff0c;在不修改源代码的基础上增强代码功能&#xff09; 二、…

AI大语言模型在公共服务中的应用实例

随着计算机技术的飞速发展&#xff0c;人工智能已经成为了当今科技领域的热门话题。从早期的图灵测试到现在的深度学习和神经网络&#xff0c;人工智能已经取得了令人瞩目的成就。特别是近年来&#xff0c;大数据、云计算、高性能计算等技术的发展为人工智能的研究提供了更加广…

【Linux深度学习5.15(堡垒机)】

JumpServer堡垒机 使用堡垒机管理服务器 一. 环境 1.将jump压缩包上传至服务器并解压2.安装jump server./jumpserver install一直选择默认就可以3.启动jumpserver./jumpserver start4.测试windows : 浏览器访问ipLinux : ssh -p2222 adminip5.登录账号 : admin 密码 : admin…

多客陪玩系统源码,线上游戏开黑陪玩,线下预约家政服务,语音陪聊,陪玩成品搭建,源码交付,支持二开,陪玩系统开发

游戏陪玩系统主要的优势就是&#xff0c;只要有手游和网游不断推出&#xff0c;就有钱可赚。为什么呢?因为电竞行业正处于上升发展阶段&#xff0c;而且玩游戏对于现代人来说是很好的一种解压方式&#xff0c;所以在市场和用户需求方面都是有保证的。再加上现代人的社交压力越…

使用 5 种有用的方法将音乐从 iTunes 传输到安卓手机

有许多在线音乐应用程序可供您选择&#xff0c;但如果您想在 安卓手机上欣赏 iTunes 音乐&#xff0c;您需要了解步骤。今天的主题是如何将音乐从 iTunes 传输到 安卓设备上。虽然没有适用于 Android 的 iTunes&#xff0c;但您可以在此处获取 5 种有用的方法将 iTunes 音乐传输…

Nginx-04-Docker Nginx

Docker Nginx 实战 HTTP 服务 Nginx 的最大作用&#xff0c;就是搭建一个 Web Server。 有了容器&#xff0c;只要一行命令&#xff0c;服务器就架设好了&#xff0c;完全不用配置。 运行官方 image $ docker container run \-d \-p 8080:80 \--rm \--name mynginx \nginx…

突破性能瓶颈: Java 22的性能提升之旅

Java 22带来的性能改进&#xff0c;特别是在垃圾回收&#xff08;GC&#xff09;方面的优化&#xff0c;对于实时系统有着显著的影响。实时系统要求在保证高响应性的同时&#xff0c;还需要保持较高的可靠性和稳定性。以下是一些关键点&#xff0c;展示了Java 22性能改进对于实…

Java进阶-SpringCloud设计模式-工厂模式的设计与详解

在Java和Spring Cloud的上下文中&#xff0c;虽然Spring Cloud本身并没有直接实现传统的设计模式&#xff08;如工厂模式&#xff09;&#xff0c;但理解设计模式如何与Spring框架结合使用是非常重要的。工厂模式是一种创建型设计模式&#xff0c;它提供了一种封装对象创建过程…

网站开发之前端和后端开发的区别和联系

随着互联网的发展&#xff0c;网站已经成为人们日常生活中不可或缺的一部分。而网站的开发技术也在不断地发展和更新。在网站开发中&#xff0c;前端和后端是两个重要的概念。本文将介绍前端和后端的区别与联系。 一、前端和后端的定义 前端是指网站的用户界面&#xff0c;包…