深入解析与实践：Ajax异步请求在Web开发中的应用指南

news2024/9/24 17:50:23

一、概述

1、定义

​ Ajax（Asynchronous JavaScript and XML）异步请求是现代Web开发中不可或缺的技术组件，它允许网页在不刷新整个页面的情况下从服务器获取并更新数据，从而实现动态、流畅的交互体验。

2、异步和同步

浏览器访问服务器的方式

  • 同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作。
  • 异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作。

3、Ajax的好处

  • 减轻服务器负担，按需要获得数据。
  • 无刷新更新页面，减少用户的实际和心理的等待时间。
  • 只更新部分页面，有效利用带宽
  • 主流浏览器都支持Ajax

4、应用场景

​ 该技术广泛应用于各类Web应用，如用户登录验证、动态加载内容、实时数据更新等场景。

二、原生ajax

1、工作原理：

​ 利用XMLHttpRequest发起HTTP请求，包括GET、POST等各种方法，以及处理响应数据，使用ajax接收响应，使用jS进行页面刷新。

2、代码示例

  1. 界面代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>new jsp</title>

  <%--导入远程jQuery依赖--%>
  <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script>

    //原生JS方式发送 Ajax请求
    function run() {

      //1.核心对象
      var xmlhttp;

      //2.判断浏览器类型
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
      else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

      //3.建立连接
      xmlhttp.open("GET","/origin_ajax?username=tom",true);

      //4.发送请求
      xmlhttp.send();

      //5.获取响应结果
      xmlhttp.onreadystatechange=function() {

        //readyState==4 请求已完成，且响应已就绪
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          var text =xmlhttp.responseText;
          alert("响应结果: " + text);
        }
      }

    }


  </script>
</head>
<body>

<input type="button" value="原生JS发送异步请求" οnclick="run()"><br>
异步请求不影响文本框 <input type="text"><br>

</body>
</html>

  2. servlet代码

    package com.example.ajax_demo02;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "OriginAjaxServlet", urlPatterns = "/origin_ajax")
public class OriginAjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //模拟请求处理延迟
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        //2、响应
        response.getWriter().write(username);
    }
}

  3. 测试结果

    在这里插入图片描述

    如图，发送ajax请求，并不会重刷界面。

原生ajax缺点：

  • 若使用JS原生的AJAX技术，为了实现简单功能，就需要书写大量复杂代码。
  • JS的AJAX代码，浏览器兼容性比较差。

三、jQuery框架的ajax

1、JQuery框架的ajax简介

jquery是一个优秀的js框架，对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大.开发中经常使用的方式有三种:POST、GET、AJAX

2、get请求代码示例

  1. 界面代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax的get请求</title>
</head>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>

    function run() {
        var url = "${pageContext.request.contextPath}/origin_ajax";

        var data = {username:"lucky"};

        $.get(url, data, function (param) {
            alert("get请求的响应：" + param);
        }, "text")
    }

</script>

<body>
    <input type="button" value="get异步请求" οnclick="run()">
</body>
</html>

  2. servlet代码不变

  3. 测试结果

    在这里插入图片描述

3、post请求代码示例

  1. 界面代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax的post请求</title>
</head>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>

    function run() {
        var url = "${pageContext.request.contextPath}/origin_ajax";

        var data = {username:"lucky"};

        $.post(url, data, function (param) {
            alert("post请求的响应：" + param);
        }, "text")
    }

</script>

<body>
    <input type="button" value="post异步请求" οnclick="run()">
</body>
</html>

  2. servlet代码不变

  3. 测试结果

    在这里插入图片描述

4、ajax请求代码示例

  1. 界面代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax的ajax请求</title>
</head>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>

    function run() {

        $.ajax({
            url:"${pageContext.request.contextPath}/origin_ajax",
            async:true, //是否异步
            data:{username:"zhangsan"},
            type:"GET", //请求方式
            dataType:"text", //返回数据的数据类型
            success:function (param) {
                alert("响应成功!" + param);
            },
            error:function () {
                alert("响应失败!")
            }
        });

    }

</script>

<body>
    <input type="button" value="ajax异步请求" οnclick="run()">
</body>
</html>

  2. servlet代码不变

  3. 测试结果

    在这里插入图片描述

5、验证用户名重复案例

  1. 需求

    • 当用户注册时 编辑用户名，编辑完成后，若查到用户名已被使用，需要在界面显示提示，此需求适用于异步处理。

  2. 界面代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax的ajax请求</title>
</head>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>

    $(function () {
        $("#username").blur(function () {

            //获取用户名
            var name = $(this).val();

            //判断用户名不为空和空串
            if(name != null && name != ""){
                //向后台发送请求,验证用户名
                $.ajax({
                    url:"${pageContext.request.contextPath}/checkName",
                    type:"GET",
                    data:{username:name},
                    dataType:"json",
                    success:function (data) {
                        if(data.flag){
                            //设置span的内容体
                            $("#spanMsg").html("<font color='red'>" +data.msg+"</font>");
                        }else if(!data.flag){
                            $("#spanMsg").html("<font color='green'>" +data.msg+"</font>");
                        }
                    },
                    error:function () {
                        alert("请求处理失败!");
                    }
                });
            }
        })
    });

</script>

<body>
<form action="#" method="post">

    用户名: <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="spanMsg" style="color: red"></span> <br>
    密码:<input type="text" id="password" name="password" placeholder="请输入密码">
</form>
</body>
</html>

  3. servlet代码

    package com.example.ajax_demo02;

import com.alibaba.fastjson.JSON;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;

@WebServlet(name = "CheckNameServlet", value = "/checkName")
public class CheckNameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @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("username");

        //Map封装数据
        HashMap<String,Object> map = new HashMap<>();

        //判断用户是否存在
        if("tom".equals(username)){
            //用户名存在
            map.put("flag",true);
            map.put("msg","用户名已经被占用!");

            //响应JSON格式的数据
            String data = JSON.toJSONString(map);
            resp.getWriter().print(data);
        }else{
            //用户名不存在
            map.put("flag",false);
            map.put("msg","用户名可以使用!");

            String data = JSON.toJSONString(map);
            resp.getWriter().print(data);
        }
    }
}

  4. 测试结果

    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1397452.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【NVIDIA】Jetson Orin Nano系列：安装 Qt6、firefox、jtop、flameshot

【NVIDIA】Jetson Orin Nano系列：安装 Qt6、firefox、jtop、flameshot

1、使用命令安装 sudo apt install qtcreator sudo apt install qt6-* sudo apt install libqt6* sudo apt install qml-qt6 sudo apt install qmlscene-qt6 sudo apt install assistant-qt6 sudo apt install designer-qt62、启动 qtcreator 3、常用工具安装 sudo apt in…
阅读更多...
计算机找不到msvcp120.dll的修复方法，总结五种可靠的方法

计算机找不到msvcp120.dll的修复方法，总结五种可靠的方法

在计算机使用过程中&#xff0c;遭遇“找不到msvcp120.dll”这一问题的困扰是许多用户都可能遇到的情况。这一特定的系统文件msvcp120.dll&#xff0c;作为Microsoft Visual C Redistributable Package的重要组成部分&#xff0c;对于运行某些应用程序至关重要。当系统提示无法…
阅读更多...
如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)

如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)

先说原理就是将 svg 文件以 vue 组件文件的方式使用 需求&#xff1a;我想要在 Element Plus 得评分组件中使用自定义得图标。 el-rate v-model"value1" /> 组件本身是支持自定义图标的&#xff0c;但是教程中只说明了如何使用 element-plus/icons-vue 图标库内置…
阅读更多...
学习Spring的第八天

学习Spring的第八天

先对自定义类使用MyComponet的注解&#xff0c;在设置这个MyComponet的的属性(一个 interface接口)&#xff0c;然后&#xff0c;扫描(BaseClassScanUtils.java执行,这文件不重要)当前包下是否有这个注解的类&#xff0c;再用MyComponentBeanFactoryPostProcessor.java(后工厂…
阅读更多...
蓝桥杯真题（Python）每日练Day1

蓝桥杯真题（Python）每日练Day1

说明&#xff1a;在CSP认证的基础上&#xff08;可以看看本人CSP打卡系列的博客&#xff09;备赛2024蓝桥杯&#xff08;Python&#xff09;&#xff0c;本人专业&#xff1a;大数据与数据科学 因此对python要求熟练掌握&#xff0c;通过练习蓝桥杯既能熟悉语法又能锻炼算法和思…
阅读更多...
vulnhub-dc2靶场

vulnhub-dc2靶场

DC2 配置环境vmware17 nat网络配置 下载地址:DC and Five86 Series Challenges - DC-1 &#xff08;似乎从2024/1/18左右找不到这个资源了&#xff09; 攻击机kali与其在同一网段下 ip:192.168.52.130 信息收集 arp-scan -l #内网探测&#xff0c;扫描目标ip发现目标ip1…
阅读更多...
内网穿透Neutrino-Proxy, 中微子代理

内网穿透Neutrino-Proxy, 中微子代理

中微子代理&#xff08;neutrino-proxy&#xff09;是一个基于netty的、开源的java内网穿透项目。技术栈&#xff1a;Solon、MybatisPlus、Netty遵循MIT许可&#xff0c;因此您可以对它进行复制、修改、传播并用于任何个人或商业行为。官网地址1&#xff1a;https://neutrino-p…
阅读更多...
鸿蒙开发环境配置-Windows

鸿蒙开发环境配置-Windows

背景 入局鸿蒙开发&#xff0c;发现在 Windows 下面配置安装相关环境并没有像 Mac 一样简单&#xff0c;过程中遇到了一些问题记录一下。 Devceo Studio 下载安装 目前鸿蒙的 IDE 最新版是 4.0&#xff0c;通过这个连接可以下载&#xff0c;鸿蒙4.0下载连接。选择符合我们电…
阅读更多...
关于前端面试中forEach方法的灵魂7问？

关于前端面试中forEach方法的灵魂7问？

目录 前言 一、forEach方法支持处理异步函数吗&#xff1f; 二、forEach方法在循环过程中能中断吗&#xff1f; 三、forEach 在删除自己的元素后能重置索引吗&#xff1f; 四、forEach 的性能相比for循环哪个好&#xff1f; 五、使用 forEach 会不会改变原来的数组&#…
阅读更多...
智能驾驶新浪潮：SSD与UFS存储技术如何破浪前行？-UFS篇

智能驾驶新浪潮：SSD与UFS存储技术如何破浪前行？-UFS篇

如果说SSD是赛道上的超级跑车&#xff0c;那UFS更像是专为智能汽车定制的高性能轻量化赛车。UFS采用串行接口技术&#xff0c;像是闪电侠一样&#xff0c;将数据传输的速度推向新高&#xff0c;大幅缩短了系统启动时间和应用程序加载时间&#xff0c;这对追求即时反应的ADAS系统…
阅读更多...
【从零开始学习Java重要知识 | 第三篇】暴打ReentrantLock底层源码

【从零开始学习Java重要知识 | 第三篇】暴打ReentrantLock底层源码

目录 前言&#xff1a; 前置知识&#xff1a; 什么是公平锁与非公平锁&#xff1f; 尝试自己构造一把锁&#xff1a; ReentrantLock源码&#xff1a; 加锁&#xff1a; 解锁&#xff1a; 总结&#xff1a; 前言&#xff1a; 在并发编程中&#xff0c;线程安全是一个重…
阅读更多...
【轮式平衡机器人】——软硬件配置/准备

【轮式平衡机器人】——软硬件配置/准备

本系列以轮式平衡移动机器人为例&#xff0c;将使用基于模型设计&#xff08;MBD&#xff09;方法进行介绍&#xff0c;涉及基础硬件、软件、控制算法等多方面内容&#xff0c;结合MATLAB/Simulink的强大仿真能力和代码生成能力辅助设计&#xff01;在此过程中可以系统了解开发…
阅读更多...
SpringBoot+dynamic-datasource实现多数据源(msyql、sqlserver、postgresql)手动切换

SpringBoot+dynamic-datasource实现多数据源(msyql、sqlserver、postgresql)手动切换

场景 SpringBootMybatisPlusdynamic-datasources实现连接Postgresql和mysql多数据源&#xff1a; SpringBootMybatisPlusdynamic-datasources实现连接Postgresql和mysql多数据源-CSDN博客 上面实现通过注解和配置文件的方式去进行多数据源操作。 如果业务需求&#xff0c;比…
阅读更多...
Tensorflow2.0笔记 - 不使用layer方式，简单的MNIST训练

Tensorflow2.0笔记 - 不使用layer方式，简单的MNIST训练

本笔记不使用layer相关API&#xff0c;搭建一个三层的神经网络来训练MNIST数据集。 前向传播和梯度更新都使用最基础的tensorflow API来做。 import tensorflow as tf from tensorflow import keras from tensorflow.keras import datasets import numpy as npdef load_mnist(…
阅读更多...
arthas（阿尔萨斯）日常java代码调优使用命令

arthas（阿尔萨斯）日常java代码调优使用命令

官方项目文档&#xff1a;https://gitee.com/arthas/arthas &#xff08;最权威的教学还是得官网&#xff0c;这里仅作简单记录&#xff09; 1&#xff1a;启动 java -jar arthas-boot.jar 2&#xff1a;查看cpu占用排名前三 thread -3 3&#xff1a;查看指定id thread 203 4:查…
阅读更多...
ui 开发 剪辑等工具集成网站

ui 开发 剪辑等工具集成网站

这里给大家推荐一个工具集成网站,总体来说还是挺不错的 菜鸟工具 - 不止于工具
阅读更多...
mysql中DATE_FORMAT() 函数详解

mysql中DATE_FORMAT() 函数详解

mysql中DATE_FORMAT() 函数详解 一. 说明 在 MySQL 中&#xff0c;DATE_FORMAT() 函数用于将日期/时间类型的值按照指定的格式进行格式化输出。它的一般语法如下&#xff1a; DATE_FORMAT(date, format)其中&#xff0c;date 参数是要被格式化的日期/时间值&#xff0c;form…
阅读更多...
C++03:条件与分支语句

C++03:条件与分支语句

2024年1月14日 内容来自The Cherno&#xff1a;C系列 2024年1月17日 更新内容整理自&#xff1a; 南京大学 陈佳俊 郑涛 《程序设计教程 用C语言编程》 --------------------------------------------------------------------------------------------------------------…
阅读更多...
Java和SpringBoot学习路线图

Java和SpringBoot学习路线图

看了一下油管博主Amigoscode的相关视频&#xff0c;提到了Java和SpringBoot的学习路线&#xff0c;相关视频地址为&#xff1a; How To Master Java - Java for Beginners RoadmapSpring Boot Roadmap - How To Master Spring Boot 如下图所示&#xff1a; 当然关于Java和Spr…
阅读更多...
【声光语音告警】小机房-动环系统与服务器监控二合一告警方案

【声光语音告警】小机房-动环系统与服务器监控二合一告警方案

目前场景及存在的问题 目前有很多小规模机房&#xff0c;服务器数量不多&#xff0c;机房面积也较小&#xff0c;例如医院、车站、博物馆、学校、工厂等环境。机房虽小&#xff0c;但仍然需要进行服务器性能监控以及机房动力环境监控&#xff0c;例如漏水、温湿度、烟感、电压…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023