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

最新推荐文章于 2024-06-28 15:32:06 发布
最新推荐文章于 2024-06-28 15:32:06 发布
阅读量1.1k 收藏 20
点赞数 26
分类专栏： tomcat 文章标签： 前端 ajax java tomcat
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CAUC_lin/article/details/135704089
版权

一、概述

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. 测试结果

    在这里插入图片描述

码进未来
关注
  • 26
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用AJAX发送异步请求
07-13
使用AJAX发送异步请求。。。。。。。 XMLHttpRequest对象详解 。。。。。
编程实践：Java Web整合开发进阶100例[清晰完整版]
12-03
《编程实践：Java Web整合开发进阶100例》是一本专为Java Web开发者设计的实战指南，旨在通过丰富的实例来提升读者在这一领域的技能。这本书以清晰、非扫描的高质量版本呈现，确保读者在学习过程中可以获得最佳的...
Ajax发送异步请求（四步操作）
weixin_30824277的博客
07-28 158
1.第一步（得到XMLHttpRequest） *ajax其实只需要学习一个对象：XMLHttpRequest,如果掌握了它，就掌握了ajax！！ *得到XMLHttpRequest >大多数浏览器都支持：var xmlHttp = new XMLHttpRequest(); >IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XML...
使用$.ajax实现异步请求
最新发布
聚娃科技开发者博客
06-28 534
.ajax是jQuery库中用于执行异步HTTP请求的核心函数之一。它支持多种HTTP请求方式（如GET、POST等），可以自定义请求头、发送数据，并且提供了丰富的回调函数来处理请求的成功和失败情况。通过$.ajax，开发者可以在不刷新页面的情况下与服务器进行数据交换，实现动态更新网页内容的目的。
AJAX异步请求
热门推荐
李星的博客
06-25 2万+
Ajax即：Asynchronous JavaScript And XML（异步JavaScript和XML）。 在JavaScript中，通过AJAX可以发出异步请求，即由子线程发出请求，且将由子线程获取响应结果，则主线程可以不参与，表现为浏览器中显示的页面内容可以不发生变化。 基于jQuery的AJAX访问，可以调用jQuery中的$.ajax()函数，该函数的参数是一个JSON对象，需要...
ajax 发送异步请求
zhiheng`s blog
12-24 481
ajax 发送异步请求时遇到的问题.
ajax发送异步请求
qq_42371196的博客
02-26 655
我做的是在表单验证中，用ajax向servlet发送异步请求，判断当前输入的用户名是否已经存在 1.js中ajax发送异步请求：（一般都是表单失去焦点触发） $.ajax({ url:"", data:{"xuehao":$(this).val()}, dataType:"json", type:"post", success:function(msg...
s2_ajax-jquery:使用 Ajax 和 Jquery 构建 REST Web 应用程序
06-28
“s2_ajax-jquery:使用 Ajax 和 Jquery 构建 REST Web 应用程序”这个标题表明了教程的主题，它涉及到使用Ajax（异步JavaScript和XML）和jQuery库来创建一个遵循REST（Representational State Transfer）架构风格的...
《PHP5高级应用开发实践》 (高清中文PDF版)
02-05
综上所述，《PHP5高级应用开发实践》这本书不仅覆盖了PHP语言本身的核心知识点，还涉及到了许多与之紧密相关的技术领域，如面向对象编程、Web开发框架、数据库管理和网络安全等方面。通过学习这些内容，中高级PHP...
AJAX项目开发指南
11-29
- **使用AJAX技术**：通过发送异步请求实现数据交换。 - **使用Server Push技术**：例如Comet技术，可以让服务器主动推送数据到客户端。 - **选择合适的框架**：根据项目需求选择合适的框架，如DWR、Dojo Toolkit等...
AJAX发送异步请求
进步了么？
03-03 757
var xhr;     function regist(){          //1、创建XMLHttpRequest对象          //判断当前浏览器是否支持XMLHttpRequest对象          if(window.XMLHttpRequest){              xhr=new XMLHttpRequest();     
Ajax发送异步请求
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
02-12 232
简介   Ajax（Asynchronous JavaScript and XML）即异步的JS和XML，本质是使用JS提供的XMLHttpRequest对象异步地向服务器发送请求，并接受响应数据。服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容。 获取Ajax核心对象：XMLHttpRequset   允许通过 window.XMLHttpRequest...
使用JavaScript和Ajax发出异步请求
loyos的专栏
08-03 1008
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送
ajax四步请求,Ajax发送异步请求（四步操作）
weixin_36193690的博客
08-05 452
1.第一步(得到XMLHttpRequest)*ajax其实只需要学习一个对象：XMLHttpRequest,如果掌握了它，就掌握了ajax！！*得到XMLHttpRequest>大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();>IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");&...
Ajax异步请求
CaraYQ的博客
06-12 2193
创建ajax过程 创建XMLHttpRequest对象,也就是创建一个异步调用对象. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 设置响应HTTP请求状态变化的函数. 发送HTTP请求. 获取异步调用返回的数据. 使用JavaScript和DOM实现局部刷新. <body> <!-- ajax请求发送前的准备：前端准备：GET 服务器准备：SERVER 项目需求：点击按钮向服务端发送请求 服务端返回的响应体结果显示在div中 页面不刷新 --> &
【Javascript】AJAX发送异步请求总结
weixin_42115131的博客
07-13 1517
本文介绍了AJAX发送异步请求的过程。
AJAX异步
qq_43691941的博客
12-06 164
一：JSON已经成为最流行的数据交换（前后台交换）格式之一，各大网站的API几乎都支持它。 json数据格式： 1）对象表示为键值对 2）数据由逗号分隔 3）花括号保存对象 4）方括号保存数组 json_encode该函数主要用来将数组和对象，转换为json格式。 json_decode该函数用于将json文本转换为相应的PHP数据结构。 二：AJAX = 异步 JavaScript 和 XML（...
Ajax核心技术指南：探索异步请求的深度应用
除此之外，书中还可能涉及了与其他技术（如Java、Ruby on Rails、ASP.NET AJAX）集成的实践方法，以及如何在实际项目中运用Ajax提升Web应用的用户体验。此外，O'Reilly出版社提供了丰富的相关资源，包括其他Ajax书籍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值