Ajax前端技术

最新推荐文章于 2022-07-03 15:31:34 发布

我走后的夜与昼

最新推荐文章于 2022-07-03 15:31:34 发布

阅读量68

点赞数

分类专栏：前端文章标签： ajax java js

本文链接：https://blog.csdn.net/wyb0218_0308/article/details/118514990

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax前端技术

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

全局刷新和局部刷新

全局刷新：使用form，href等发起的请求是全局刷新

用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面
缺点：
1. 传递数据量比较大，占用网络的带宽
2. 浏览器需要重新的渲染整个页面
3. 用户的体验不是那么好

局部刷新：在当前的页面中，发起请求，获取数据，更新当前页面的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属性和方法

创建异步对象，使用js的语法

var xhr = new XMLHttpRequest();

XMLHttpRequest方法
1. open(请求方式，服务器端的访问地址，异步函数同步):初始请求的参数
  - 例如xhr.open(“get”,“loginServlet”,true)
2. send():使用异步对象发送请求
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使用步骤‘

使用js创建异步对象
- var xhr = new XMLHttpRequest();
给异步对象绑定事件，事件名称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;
    }
}

初始请求的参数，执行open()函数
- xhr.open(“get”,“loginServlet”,true);
发送请求，执行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前端技术

Ajax前端技术前端技术：在浏览器中执行的程序都是前端，html、css、js等等后端技术：在服务器中执行的程序，使用java语言开发的后端程序。servlet、jsp、jdbc、mysql、tomcat等等全局刷新和局部刷新全局刷新：使用form，href等发起的请求是全局刷新用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面缺点：传递数据量比较大，占用网络的带宽浏览器需要重新的渲染整个页面用户的体验不是那么好局部刷新：在当前的页面中，发起请求，获取数据，更
复制链接

扫一扫