JavaWeb学习(1)（同步或异步请求、依赖jQuery简单实现Ajax技术）

目录

一、Web的基本流程与页面局部刷新。

（1）web开发时基本流程。

（2）页面的"全局刷新"与"局部刷新"。

二、Ajax技术。

（1）基本介绍。

（2）基本特点。

1、与服务器异步交互。

2、浏览器页面局部刷新。

（3）同步交互与异步交互?

1、同步交互。

2、异步交互。

三、Ajax常见应用情景。

（1）搜索框的"模糊搜索"显示。

（2）注册表单时用户名的验证："是否被注册"情景。

（3）面试提问。

1、提问。这位同学请谈下你对ajax的理解？

2、回答。

四、jQuery。

（1）基本介绍。

（2）大致功能介绍。

1、兼容性。

2、选择器。

3、事件处理。

4、动画和效果。

5、Ajax技术。

6、链式调用。

7、扩展性。

8、轻量级。

五、使用JQuery简单实现Ajax技术。

（1）为什么使用jQuery实现Ajax技术？

（2）使用jquery中的ajax()方法的实现步骤。

（3）jquery中的ajax()方法的参数详解。

（4）使用idea(2024)创建web项目测试。

1、整个项目结构。

2、ajax.jsp代码。

3、AjaxServlet类。（接收jsp页面请求）

4、tomcat配置与部署情况。

一、Web的基本流程与页面局部刷新。

（1）web开发时基本流程。

jsp页面——>发起请求——>servlet——>重定向或请求转发（跳转）其它页面。

（2）页面的"全局刷新"与"局部刷新"。

我们都知道点击浏览器左上角"刷新"标志，就会刷新整个页面。
这时客户端就会向服务器发送请求。

如果需求：实现页面的部分内容的"局部刷新"。（如：验证码刷新、用户名验证等）
这里就要使用到我们的Ajax技术实现局部刷新。

二、Ajax技术。

（1）基本介绍。

AJAX（Asynchronous JavaScript and XML）翻译中文：就是"异步Javascript和XML"。
是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据，并更新部分网页，使得网页能够异步更新。
AJAX 的工作原理：是使用 JavaScript 向服务器发送异步请求，然后使用 XML 或 JSON 格式接收数据，并在客户端对这些数据进行处理。

（2）基本特点。

AJAX还有一个最大的特点就：当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

1、与服务器异步交互。

2、浏览器页面局部刷新。

（3）同步交互与异步交互?

1、同步交互。

客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。

同步交互是指在执行操作时，必须等待该操作完成后才能进行下一步操作的过程。
在同步交互中，程序的执行是顺序的，一个任务完成后，下一个任务才能开始。

在电影院排队买票时，你前面的人必须完成购票后，你才能开始购票。这个过程是顺序的，不能同时进行。

2、异步交互。

客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

异步交互是指可以同时进行多个操作，不需要等待当前操作完成就可以开始下一个操作的过程。
在异步交互中，程序可以并行执行多个任务，提高了效率和响应速度。

在生活中如：洗衣机在洗衣服的同时，你可以做其他家务。比如扫地、擦桌子，不需要一直等待衣服洗完。

三、Ajax常见应用情景。

（1）搜索框的"模糊搜索"显示。

当我们在百度中输入一个“白”字后，会马上出现一个下拉列表！其中列表中显示的是包含“白”字的关键字。

其实这里就使用了Ajax技术！
当文件框发生了输入变化时，浏览器会使用Ajax技术向服务器发送一个请求，查询包含“白”字的关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把关键字显示在下拉列表中。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

（2）注册表单时用户名的验证："是否被注册"情景。

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用Ajax技术向服务器发出请求，服务器会查询名为"zhangSan"的用户是否存在。
最终服务器返回"true"：表示名为"zhangSan"的用户已经存在了，浏览器在得到结果后显示"用户名已被注册"！

（3）面试提问。

1、提问。这位同学请谈下你对ajax的理解？

需要回答时：首先组织语言——>再进行结构化回复 （突出逻辑性和层次结构）
先说清楚：是什么 + 什么时候用（什么场景下用） + 是怎么用的（在哪里用到了）。
这样就能去更好的与面试官达成"匹配度"，而不是"回去等消息"。

2、回答。

Ajax是用JavaScript语言跟服务器进行异步交互的技术。（首先提出：官方解答）
当我们需要对页面的数据进行局部刷新的时候可以使用Ajax技术来实现。本人在xxx项目，大量使用Ajax技术。比如：网页的搜素框通过异步去请求匹配的数据，还有注册时填写表单，对表单数据的验证等等。

这样就体现出它的基本概念、使用场景、如何使用。

四、jQuery。

（1）基本介绍。

jQuery是一个快速、小巧且功能丰富的JavaScript库。
其创建目的是：简化HTML文档遍历和操作、事件处理、动画和Ajax等操作。
jQuery的设计宗旨是“Write Less, Do More”，即用更少的代码做更多的事情。

（2）大致功能介绍。

1、兼容性。

jQuery支持所有主流浏览器，包括IE6.0+、Firefox、Safari、Chrome和Opera。

2、选择器。

jQuery使用CSS风格的选择器来查找和操作HTML元素，这使得DOM操作变得简单直观。

3、事件处理。

jQuery提供了一种统一的方法来绑定事件处理器，无论在哪种浏览器上，都不需要担心兼容性问题。

4、动画和效果。

jQuery内置了多种动画效果，如淡入淡出、滑动等。可以很容易地给网页添加动态效果。

5、Ajax技术。

jQuery的Ajax功能简化了与服务器的数据交换。使得异步加载数据和更新页面部分内容变得容易。

6、链式调用。

jQuery的方法支持链式调用，这使得代码更加简洁和易于阅读。

7、扩展性。

jQuery允许开发者扩展其功能，通过编写自定义的插件来满足特定的需求。

8、轻量级。

尽管功能强大，jQuery的文件大小相对较小，这有助于加快网页的加载速度。

五、使用JQuery简单实现Ajax技术。

（1）为什么使用jQuery实现Ajax技术？

通过JavaScript书写ajax()方法相应的比较复杂，还要考虑到浏览器的兼容性等一系列问题。

而jQuery中已经将Ajax的相关操作进行了封装。使用时只需要在合适的地方调用Ajax相关的方法即可。相比而言，JQuery实现Ajax更加简洁、方便。

（2）使用jquery中的ajax()方法的实现步骤。

（3）jquery中的ajax()方法的参数详解。

（4）使用idea(2024)创建web项目测试。

后端使用：servlet-api、JavaWeb。
前端使用：jsp-api、html、JavaScript等等。

1、整个项目结构。

2、ajax.jsp代码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax初识</title>
    <%--引入jquery--%>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button onclick="myfun()">有种点击我！</button>
<script>
    function myfun() {
        //1.使用ajax方法
        $.ajax({
            url:"http://localhost:8080/AjaxServlet",
            type:"GET",
            data:"name=Tom",
            dataType:"text",
            success:function (data){
                alert(data)
            }
        })
    }
</script>
</body>
</html>
3、AjaxServlet类。（接收jsp页面请求）
package com.fs.web;

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;

/**
 * @Title: AjaxServlet
 * @Author HeYouLong
 * @Package com.fs
 * @Date 2024/12/4 下午5:40
 * @description: AjaxServlet测试类
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求编码
        req.setCharacterEncoding("UTF-8");
        //设置相应编码
        resp.setContentType("text/html;charset=UTF-8");
        //拿到对应参数值
        String username = req.getParameter("name");
        resp.getWriter().write("hello！"+username);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}
4、tomcat配置与部署情况。

tomcat服务器。

部署（配置工件）。