前端学习第一课

news2025/1/21 18:05:48

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.data
        console.log(res)
      })
    })
  </script>