• Ajax：传统请求方式及ajax原理解析

     

    （1）验证传统的发送请求方式 

    创建空项目，创建一个Java的Model：什么都不选，点击下一步 

     

    右键，添加框架支持，Add  Framework Support：

     

    删除index.jsp，添加依赖：

     

     创建index.html:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>演示传统请求，以及传统请求的缺点title>
    6. head>
    7. <body>
    8.  
    10.  
    12. <a href="/old/request">传统请求（超链接）a>
    13.  
    15. <form action="/old/request" method="get">
    16.     <input type="submit" value="传统请求（form表单提交）">
    17. form>
    18.  
    20. <input type="button" value="传统请求（通过JS代码发送请求）" onclick="sendRequest()">
    21.  
    22. <script type="text/javascript">
    23.     function sendRequest(){
    24.         // 发送请求
    25.         //window.location.href = ""
    26.         document.location.href = "/old/request"
    27.     }
    28. script>
    29.  
    30. body>
    31. html>

    创建Servlet：OldRequestServlet：

    1. package com.bjpowernode.javaweb.servlet;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9. import java.io.PrintWriter;
    10. @WebServlet("/request")
    11. public class OldRequestServlet extends HttpServlet {
    12.     @Override
    13.     protected void doGet(HttpServletRequest reqest, HttpServletResponse response) throws ServletException, IOException {
    14.         // 响应信息到浏览器
    15.         response.setContentType("text/html;charset=UTF-8");
    16.         //获取out对象
    17.         PrintWriter out = response.getWriter();
    18.  
    19.         // 向浏览器输出HTML代码，浏览器接收到HTML代码之后渲染页面，展现页面给用户。
    20.         out.print("
      欢迎学习AJAX。。。。
      "      );
    21.     }
    22. }

    部署项目：

     

      

    第一种方式：在浏览器输入地址

     

     第二种方式：超链接：点击超链接 传统请求：

    下面结果点击都一样：

     

    分析： 

    传统请求方式，这几种方式，会把原来页面的内容页面清空掉，然后重新加载一个全新的页面，从a页面跳转到全新的页面，可能出现空白期，用户的体验就间断掉了，如果网速较慢的话，就会有空白延迟，给用户体验较差

    有一种方式Ajax，替代传统请求的，发送ajax请求后，不会刷新整个页面，请求结果只会刷新局部页面， 可以同时发送好几个ajax请求，是异步的，他们互不影响，这样用户体验是连贯的，不会间断。在发送ajax请求的同时不会影响当前页面的其他操作

     

     

     

     （2）ajax原理分析：

     

  • 相关阅读:
    我终于把前后端项目部署到服务器了
    零极限：关于蓝色太阳水原理
    改进YOLOv5小目标检测：构建多尺度骨干和特征增强模块，提升小目标检测
    [操作系统笔记]处理机调度
    基于Echarts实现可视化数据大屏大数据可视化
    AWS SAA-C03 #207
    git的安装与使用
    什么是凸函数
    Android OpenGL ES 学习(七) – 纹理
    Spring总结1.0
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/125898430