Ajax前端技术

最新推荐文章于 2024-07-27 13:31:57 发布
最新推荐文章于 2024-07-27 13:31:57 发布
阅读量68 收藏
点赞数
分类专栏： 前端 文章标签： ajax java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyb0218_0308/article/details/118514990
版权

Ajax前端技术

  • 前端技术：在浏览器中执行的程序都是前端，html、css、js等等
  • 后端技术：在服务器中执行的程序，使用java语言开发的后端程序。servlet、jsp、jdbc、mysql、tomcat等等

全局刷新和局部刷新

  1. 全局刷新：使用form，href等发起的请求是全局刷新
  • 用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面
  • 缺点：
    1. 传递数据量比较大，占用网络的带宽
    2. 浏览器需要重新的渲染整个页面
    3. 用户的体验不是那么好
  1. 局部刷新：在当前的页面中，发起请求，获取数据，更新当前页面的dom对象。对视图部分刷新
  • 特点：
    1. 数量比较小，在网络中传输速度快
    2. 更新页面内容，是部分更新页面，浏览器不用全部渲染视图
    3. 在一个页面中，可以做多个局部刷新
    4. 从服务器获取的是数据，拿到更新视图

异步请求对象

  • 在局部刷新中，使用异步请求对象，在浏览器内容发起请求，获取数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjEIJQqD-1625537958552)(C:\Users\naizhi\AppData\Roaming\Typora\typora-user-images\image-20210628213239349.png)]

  • 异步对象是在浏览器内部的一种javaScript对象，各大浏览器都能支持异步对象的使用。例：chrome、firework、IE、opper

异步对象XMLHttppRequest介绍

  • js中的一种对象，使用js语法创建和使用这个对象
  • var xhr = new XMLHttpRequest();
  • 之后就可以使用xhr对象的属性或者函数，进行异步对象的操作
  • 使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据
  • 局部刷新需要使用的技术：
    1. javascript:创建XMLHttpRequest对象，调用它的属性或者方法
    2. dom:处理dom，更新select的数据
    3. css:处理视图，更新，美化
    4. servlet:服务器端技术
    5. 数据格式：json，它之前是xml
  • 把上面这些技术的综合使用叫作ajax(阿贾克斯)。

Ajax

  • AJAX (Asynchronous JavaScript and XML)异步的JavaScript和XML。
  • AJAX是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
  • AJAX不是新的保存语言，它是多种技术的综合使用。包含了javascript、dom、css、服务器端技术、servlet、jsp、jdbc等等，还有json数据格式。
  • 使用AJAX实现局部刷新
  • Ajax核心是javascript和xml(json)：使用javascript操作异步对象XMLHttpRequest和服务器交互使用json数据格式。

异步对象XMLHttpRequest属性和方法

  1. 创建异步对象，使用js的语法
  • var xhr = new XMLHttpRequest();

  1. XMLHttpRequest方法

    1. open(请求方式，服务器端的访问地址，异步函数同步):初始请求的参数
      • 例如xhr.open(“get”,“loginServlet”,true)
    2. send():使用异步对象发送请求

  2. XMLHttpRequest属性

    1. readyState属性：请求的状态
      • 0：表示创建异步对象时。new XMLHttpRequest();
      • 1：表示初始异步对象的请求参数，执行open()方法
      • 2：表示使用send()方法发送请求
      • 3：使用异步对象从服务器接收了数据
      • 4：异步对象接收了数据，并在异步对象内部处理完成后
    2. status属性：网络的状态，和Http的状态码对应
      • 200：请求成功
      • 404：服务器资源没有找到
      • 500：服务器内部代码有错误
    3. responseTest属性：表示服务器端返回的数据
      • 例如：var data = xhr.responseTest;

异步对象XMLHttpRequest使用步骤‘

  1. 使用js创建异步对象
    • var xhr = new XMLHttpRequest();
  2. 给异步对象绑定事件，事件名称onreadystatechange
    • 例如：button要增加单击事件使用onclick
    • xhr绑定事件：xhr.onreadystatechange=function(){当事件发生时执行的代码}
<input type="button" onclick="btnClick()" />
<script type="text/javascript">
    function btnClick(){
        按钮单击的处理代码
    }
</script>
  • 在绑定事件中根据readyState的值做请求的处理
xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
        //从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
        var data = xhr.responseText;
        //更新dom对象
        document.getElementById("#mydiv").innerHTML = data;
    }
}
  1. 初始请求的参数，执行open()函数
    • xhr.open(“get”,“loginServlet”,true);
  2. 发送请求，执行send()
    • xhr.send();

AJAX实例

全局刷新计算BMI

  • 计算BMI，并显示BMI的计算结果和建议
  • BMI简介：
  • BMI指数(即身体质量指数，英文为BodyMassIndex，简称BMI)，是用体重公斤数除以身高数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准
  • 成人的BMI数值：
    1. 过轻：低于18.5
    2. 正常：18.5~23.9
    3. 过重：24~27
    4. 肥胖：28~32
    5. 非常肥胖，高于32
  • 使用jsp显示request作用域中的数据，使用EL表达式
<!--index.jsp页面 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>全局刷新实现计算BMI</title>
  </head>
  <body>
    <div align="center">
      <p>计算BMI</p>
      <form action="BMIServlet" method="get">
        <div>姓名：
          <input type="text" name="name">
        </div>
        <div>体重：
          <input type="text" name="w">
        </div>
        <div>身高：
          <input type="text" name="h">
        </div>
        <input type="submit" value="计算BMI">
      </form>
    </div>
  </body>
</html>

//BMIServlet页面
public class BMIServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收请求的参数
        String name = request.getParameter("name");
        float w = Float.parseFloat(request.getParameter("w"));
        float h = Float.parseFloat(request.getParameter("h"));
        //计算BMI 公式w/(h*h)
        float bmi = w/(h*h);
        //判断数值范围
        String info="";
        if (bmi<18.5){
            info = "过轻";
        }else if (bmi>=18.5 && bmi<24){
            info = "正常";
        }else if (bmi>=24 && bmi<27){
            info = "过重";
        }else if (bmi>=28 && bmi<32){
            info = "肥胖";
        }else {
            info = "非常肥胖";
        }
        //把数据保存到request作用域
        info = name + "先生|女士，您的BMI是["+bmi+"],"+info;
        request.setAttribute("info",info);
        //转发
        request.getRequestDispatcher("result.jsp").forward(request,response);
    }
}

<!--result.jsp页面 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>BMI</title>
</head>
<body>
    计算的BMI的结果：${info}
</body>
</html>

使用HttpServletResponse响应输出

  • 使用HttpServletResponse对象输出数据到浏览器，浏览器可以接收HttpServletResponse对象print的数据
//只需要修改servlet代码，index.jsp不变，可避免再创建一个result.jsp
public class BMIServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收请求的参数
        String name = request.getParameter("name");
        float w = Float.parseFloat(request.getParameter("w"));
        float h = Float.parseFloat(request.getParameter("h"));
        //计算BMI 公式w/(h*h)
        float bmi = w/(h*h);
        //判断数值范围
        String info="";
        if (bmi<18.5){
            info = "过轻";
        }else if (bmi>=18.5 && bmi<24){
            info = "正常";
        }else if (bmi>=24 && bmi<27){
            info = "过重";
        }else if (bmi>=28 && bmi<32){
            info = "肥胖";
        }else {
            info = "非常肥胖";
        }
        //把数据保存到request作用域
        info = name + "先生|女士，您的BMI是["+bmi+"],"+info;
       	//设置编码格式
        response.setContentType("text/html;charset=UTF-8");
        //使用HttpServletResponse对象输出数据，响应请求
        PrintWriter out = response.getWriter();
        //输出数据，输出到浏览器
        out.print(info);
        out.flush();//清空缓存
        out.close();//关闭
    }
}

使用ajax请求，计算BMI

  • 使用异步对象XMLHttpRequest发起请求，接收数据。更新dom对象
  • ajax操作中，处理是数据，从服务器端接收的数据，没有视图
<!--index.jsp页面 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>使用ajax计算BMI</title>
    <script>
      function doAjax() {
          //使用XMLHttpRequest做ajax局部刷新
          //1.创建异步对象
          var xhr = new XMLHttpRequest();
          //2.绑定事件
          xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 && xhr.status == 200){
                  //开发人员处理服务器返回的数据，更新dom对象
                  var data = xhr.responseText;
                  document.getElementById("mydiv").innerHTML = data;
              }
          };
          //3.初始请求的参数
          //收集请求中需要的参数值
          var name = document.getElementById("name").value;
          var h = document.getElementById("h").value;
          var w = document.getElementById("w").value;
          var param = "BMIServlet?name="+name+"&h="+h+"&w="+w;
          xhr.open("get",param,true);
          //4.发起请求
          xhr.send();
      }
    </script>
  </head>
  <body>
    <div align="center">
      <p>ajax请求和form无关，有无form都可以</p>
      <table>
        <tr>
          <td>姓名：</td>
          <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>体重：</td>
            <td><input type="text" id="w"></td>
        </tr>
        <tr>
            <td>身高：</td>
            <td><input type="text" id="h"></td>
        </tr>
        <tr>
            <td>操作：</td>
            <td><input type="button" value="ajax请求" onclick="doAjax()"></td>
        </tr>
      </table>
      <div id="mydiv">等待请求数据</div>
    </div>
  </body>
</html>

//BMIServlet页面
public class BMIServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收请求的参数
        String name = request.getParameter("name");
        float w = Float.parseFloat(request.getParameter("w"));
        float h = Float.parseFloat(request.getParameter("h"));
        //计算BMI 公式w/(h*h)
        float bmi = w/(h*h);
        //判断数值范围
        String info="";
        if (bmi<18.5){
            info = "过轻";
        }else if (bmi>=18.5 && bmi<24){
            info = "正常";
        }else if (bmi>=24 && bmi<27){
            info = "过重";
        }else if (bmi>=28 && bmi<32){
            info = "肥胖";
        }else {
            info = "非常肥胖";
        }
        //把数据保存到request作用域
        info = name + "先生|女士，您的BMI是["+bmi+"],"+info;
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //输出数据
        out.print(info);
        out.flush();
        out.close();
    }
}

同步请求和异步请求

  • 看open(请求方式，访问uri地址，boolean是不是异步的)

    • true：异步请求
    • false：同步请求

  • 同步请求和异步请求的区别：

    • 异步请求：send()之后的代码立即执行
    • 同步请求：send()执行完毕之后再执行之后代码

  • 异步可以同时发起多个请求相互不影响，而同步要一个一个执行，所以效率比较慢，开发的时候一般都使用异步请求。

我走后的夜与昼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端技术之Ajax（一）
༄༊星河༣
04-19 1267
前端技术之Ajax同步交互异步交互AJAX异步验证用户名占用问题 同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。 异步交互 所谓异步交互是指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待。在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。将用户
应用解决告诉你什么时候该用ajax
热门推荐
Gebi_msdn的专栏
07-07 1万+
第一、请求的提交是为了页面数据的显示，这时候用户一般不希望看到页面的刷新，是使用AJAX的一个最佳时候。第二、如果请求提交后，用户能从页面感觉到提交结果，这时候，也最好不要有页面刷新，推荐使用AJAX技术。第三、如果请求提交后，用户不能从页面感觉到提交动作，如绝大多数时候的数据的增加和修改，这时候则需要页面刷新，不能使用AJAX技术。第四、复杂的UI，以前对于复杂的C/S模式的UI，B/S模式一向
Web前端-Ajax基础技术(下)
weixin_33736832的博客
03-17 859
Web前端-Ajax基础技术(下) 你要明白ajax是什么，怎么使用？ ajax，web程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。 浏览器发送请求，获取服务器的数据： 地址栏输入地址，表单提交，特定的href或src属性。 <script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'test.php...
【前端】AJAX详解
画家高的博客
07-20 7209
简介 之前在项目中用到AJAX，是前端的技术，但是感觉作为后端开发者，对它的掌握还是很有必要的。 AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。特点是可以在浏览器中向服务器发送异步请求，最大的优势就是无刷新获取数据。 XML简介 XML是可扩展标记语言。XML中没有预定义标签，全都是自定义标签，用来表示一些数据。现在已被JSON取代。 使用 核心对象 XMLHttpReq...
高效基于Django框架的员工管理系统源码，集成MySQL数据库与HTML/CSS/JS/AJax前端技术
03-26
前端采用HTML、CSS、JavaScript以及Ajax技术，实现了用户界面的交互性和动态内容更新。整个项目包含252个文件，其中JavaScript文件90个，Python源文件37个（含编译后的pyc文件38个），HTML模板20个，以及CSS样式表14...
jquery ajax 分页 前端
09-13
**jQuery AJAX 分页技术在前端应用详解** 在Web开发中，分页是一种常见的用户界面功能，用于处理大量数据的展示，提高页面加载速度并优化用户体验。本篇文章将深入探讨如何利用jQuery和AJAX技术实现纯前端的分页...
前端Ajax jQuery HTML
10-22
**Ajax（Asynchronous JavaScript and XML）** 是一种创建动态网页的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。Ajax的核心是利用JavaScript异步地向服务器发送请求，获取...
前端技术培训资料
08-31
熟练掌握HTML语言。 了解CSS的设计和使用。 熟练掌握JavaScript语言。 Jquery的基本语法 Jquery中的Ajax用法
AjaX 数据爬取
qq_39217312的博客
07-25 1067
Ajax 全称： Asynchronous JavaScript and XML , 即异步的 JavaScript 和 XML， 它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据，并更新部分网页内容的技术对于传统网页，如果想要更新内容，就必须刷新整个页面， 但有了 Ajax ，可以在页面不被全部刷新的情况下更新。这个过程实际是页面在后台与服务器进行了数据交互，获取数据后，在利用 JavaScript 改变网页，这样网页内容就会更新了。
Web开发：ASP.NET CORE中前端使用Ajax定时获取后端数据
m0_67412019的博客
07-22 424
给a标签每15s刷新一次，显示最新的时间（时间必须由后端获取） 应该如何操作呢。
Vue.js 与 Ajax（vue-resource）的集成应用
lly202406的博客
07-25 498
Vue.js 是一款流行的前端JavaScript框架，以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中，与后端服务的通信是不可或缺的，而Ajax技术是实现这一功能的关键。在Vue.js中，是一个常用的插件，它提供了一种简单的方式来执行Ajax请求。本文将详细介绍Vue.js与Ajax（通过vue-resource）的集成应用，包括安装、基本使用、进阶技巧以及实际开发中的最佳实践。
golang 接口
m0_70982551的博客
07-24 942
接口定义了一组方法，这些方法没有具体的实现。接口类型的变量可以存储任何实现了这些方法的类型的值。// 更多方法...在Go语言中，接口值是指存储了实现某个接口的具体类型值的变量。接口值由两部分组成：1.动态类型：这是接口值当前存储的实际类型。2.动态值：这是实际存储的值，该值必须实现了接口中定义的所有方法。
Swagger使用Map接受参数时，页面如何显示具体参数及说
a1058926697的博客
07-26 510
后端使用Map接受参数，要求在swagger页面上显示具体的参数名称、类型及说明。当Map接受参数数量少时，可以使用Swagger自带的注解。自定义注解 @ApiGlobalModel。编写处理注解对应的插件。
springboot之自动装配
weixin_50153914的博客
07-23 634
Spring Boot 通过一系列注解和条件配置实现了自动装配机制，使得开发者无需手动配置大量的 XML 文件或 Java 配置类。自动配置机制利用文件中的自动配置类，并结合条件注解和组件扫描，实现了灵活且强大的自动装配功能。这样，开发者可以专注于业务逻辑的实现，而无需处理繁琐的配置细节。
Java的@DateTimeFormat注解与@JsonFormat注解的使用对比
最新发布
訾博（ZiBo）的博客
07-27 590
在Spring和Jackson框架中，日期和时间格式化是一个常见需求。注解主要用于Spring的表单绑定，而注解则用于Jackson的JSON序列化和反序列化。了解这两个注解的使用场景和方法，可以帮助开发者更高效地处理日期和时间。和是处理日期和时间格式化的两个重要注解。主要用于Spring MVC的请求参数绑定，而主要用于Jackson的JSON序列化和反序列化。了解它们的使用场景和功能，可以帮助开发者更高效地处理日期和时间格式化需求。通过本文的介绍，希望读者能够更清晰地理解和。
Java修炼 2024.7.26 0:24
2301_80011650的博客
07-26 423
问题：编写一个方法，找出一个数组中的众数（出现次数超过数组长度一半的元素）。例如，输入 [2, 2, 1, 1, 2]，输出 2。编写一个方法，找出一个整数数组中的第二大元素。例如，输入 [3, 5, 1, 8, 7]，输出 7。例如，输入 5，输出 5。问题：编写一个方法，将给定的字符串逆转。问题：使用数组实现栈，并提供基本操作（push、pop、peek、isEmpty）。问题：实现一个单向链表，并提供基本的操作（添加、删除、查找元素）。问题：编写一个方法来查找一个给定字符串的所有子串。
Java代码基础算法练习-数的特性-2024.07.25
Sakurapaid的博客
07-25 361
小A喜欢两种性质都成立的数字，小B喜欢至少符合一种性质的数字，小C喜欢不符合这两种性质的 数字。给出一个数字，请输出三个人是否喜欢这个数字。如果喜欢输出1，否则输出0，用空格分隔。输入数字 num，先定义三个整型代表三个人的喜欢与否，先默认设为 0。之后判断num对于性质1、2的条件，分别用 boolen 类型标识。对于每个整型进行判断，是否改为 1 代表喜欢。性质2：大于4且不大于12;
淘宝前端技术发展历程与展望
"淘宝前端技术巡礼PPT，涵盖了淘宝前端技术的发展历程、技术实践、知识体系和未来展望，强调了前端技术在用户体验、标准兼容、工具发展等方面的重要性。" 淘宝前端技术的发展经历了从简单到复杂的演进过程，早期的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我走后的夜与昼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值