简单介绍：

在之后的学习中，我们会接触到Ajax异步请求，这个异步请求需要我们在网页端使用JS来发送，而使用原生的Ajax请求比较复杂，所以我们就借用一个前端框架封装后的Ajax请求，这样可以简化我们的代码编写量，而这个前端框架就是jQuery。

什么是jQuery？

jQuery是一款跨浏览器开源的JavaScript库，他的核心理念是“写的更少，做得更多”，通过将原生的JS事件进行封装，可以简化我们的代码量，提升我们的代码开发效率。

文件下载：

jQuery的依赖文件是一个js文件，所以我们首先需要下载，然后在HTML页面中进行引入之后才可以进行使用。

https://code.jquery.com/jquery-3.6.1.js

下载好之后，我们需要创建一个HTML文件，然后在页面中引入这个文件：

放置发生路径错误，在前期测试和学习阶段，我们就把JS文件和HTML文件放在同一文件夹下，方便我们引用和寻找路径。

简单应用：

jQuery的学习属于前端的部分，这里我们只需要知道基本的选择器，load方法，插入数据的方法就可以了。

id选择器：

这是一个p标签，id为main

 输出显示：

 这里需要说一下，jQuery在引入之后，可以使用一个$代替jQuery对象调用方法，也就是说：

$ === jQuery

类选择器：

这是一个p标签，id为main

 输出效果：

绑定事件：

我们使用点击事件进行演示：

点击按钮，在控制台输出被点击了

向元素添加内容：

使用.html()方法向元素中添加内容：

点击按钮，在控制台输出被点击了
这是原始的内容

load()方法：load方法就是请求HTML并用来指定元素的内容

点击按钮，在控制台输出被点击了
这里马上就会出现一个表格

运行效果：

load方法除了url参数还可以有其他参数：

 其中请求地址我们已经说过了，当参数中还有data的时候，就是向服务器发送数据：

代码实现：

HTML：

点击按钮，在控制台输出被点击了
这里马上就会出现一个表格

Servlet：

package Semester_3.src.AJAX;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "ajaxServer" , value = "/ajaxServer")
public class ajaxServer extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String passwd = req.getParameter("passwd");resp.getWriter().write(username);resp.getWriter().write(passwd);System.out.println("用户名为："+username);System.out.println("密码为："+passwd);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req, resp);}
}

运行效果：

 load的第三个参数是回调函数，用来在数据请求完成之后的请求信息，其中有三个默认参数，分别代表响应数据，请求状态和XMLReuqery对象：

代码实现：

点击按钮，在控制台输出被点击了
这里马上就会出现一个表格

运行效果：

 报错啦~，这是因为其中有一个跨域问题，当然我们现在不需要关心，我们并不常用这个load方法，而是使用其他的方法，在之后的章节中我们会进行解释。

jQuery的get请求方式：

发起请求的jsp页面：

<%--Created by IntelliJ IDEA.User: 33680Date: 2022/11/29Time: 8:03To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>




加载数据

响应数据的Servlet类：

package Semester_3.src.ajax;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name="AjaxServlet" , value = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String password = req.getParameter("password");resp.setContentType("text/html;charset=utf-8");resp.getWriter().write("注册成功！");resp.getWriter().write("
");resp.getWriter().write("用户名："+username);resp.getWriter().write("
");resp.getWriter().write("密码："+password);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req, resp);}
}