AJAX

全局刷新和局部刷新

1.全局刷新

整个浏览器界面数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等

2.局部刷新

浏览器在展示数据时，此时在窗口既可以看到本次的响应数据，同时又可以看到浏览器内存中原有数据。

3.AJAX实现局部刷新的一种技术

通过XMLHttpRequest这个异步请求对象代替浏览器发起请求并接收响应数据。该异步对象是AJAX的核心对象

XMLHttpRequest对象的创建

var xmlhttp = new XMLHttpRequest();

Ajax概述

概念：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
1. 同步的请求：客户端必须等待服务器的响应。在等待的期间客户端不能做其他操作。
2. 异步的请求：客户端不需要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
优点：AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。核心：局部刷新、异步请求。

AJAX异步实现步骤

XMLHttpRequest对象介绍

1.创建该对象的方式

var xmlHttp = new XMLHttpRequest();

2.onreadstatechange 事件

XMLHttpRequest 对象的三个重要的属性：

属性说明：
onreadystatechange 属性：一个 js 函数名 或 直接定义函数，每当 readyState 属性
改变时，就会调用该函数
readyState 属性：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
    1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
    2: 异步对象发送请求， xmlHttp.send()
    3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。
    4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。
status 属性：
    200: "OK"
    404: 未找到页面
    500：服务器端代码出错

每当 readyState属性改变时，就会触发 onreadystatechange事件。此事件可以指定一个处理函数 function

//判断 XMLHttpReqeust对象的状态，获取服务端返回的数据。
// 当请求的状态发生变化时，异步对象会自动调用onreadystatechange
//事件对应的函数
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        // 处理服务器返回的数据,更新当前页面
        var data = xmlHttp.responseText;
        document.getElementById("name").value = data;
        
    }
}

3.初始化异步请求对象的请求参数

方法：open(method,url,async)用于初始化异步请求对象。

参数说明：
• method：请求的类型；GET 或 POST
• url：服务器的 servlet 地址
• async：true（异步,默认）或 false（同步）

4.发送请求

使用xmlHttp.send();

5.接收服务器响应的数据

使用 XMLHttpRequest 对象的 responseText 或
responseXML 属性。

responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据

实现方式

1.原生的js实现方式

示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>BMI的计算</title>
    <script type="text/javascript">
        function doAjax() {
            // 创建异步对象
            var xmlHttp = new XMLHttpRequest();
            // 绑定事件
            xmlHttp.onreadystatechange = function() {
                // 局部更新页面上的数据
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        var data = xmlHttp.responseText;
                        document.getElementById("dataUpdate").innerText = data;
                }
            }
            // 初始化异步请求对象的请求参数

            // 获取页面DOM对象中的数据
            var name = document.getElementById("name").value;
            var height = document.getElementById("height").value;
            var weight = document.getElementById("weight").value;
            var param = "name=" + name + "&height=" + height + "&weight=" + weight;
            xmlHttp.open("get", "bmiAjax?" + param, true);
            // 发送Ajax异步请求对象
            xmlHttp.send();
        }
    </script>
</head>
<body>
  <div style="margin-left: 500px">
      姓名为：<input type="text" id="name"/><br/>
      身高为：<input type="text" id="height"/><br/>
      体重为：<input type="text" id="weight"/><br/>
      <input type="button" value="计算BMI" onclick="doAjax()"/>
      <br/>
      <div id="dataUpdate">BMI:</div>
  </div>

</body>
</html>

public class BmiAjaxServlet extends HttpServlet {
   @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求成功处理！");
        String name = req.getParameter("name");
        String height = req.getParameter("height");
        String weight = req.getParameter("weight");

        String result = "name:" + name + ",BMI:" + height + weight;
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.println(result);
    }
}

2.JQuery实现方式

$.ajax()：是 jQuery 中 AJAX 请求的核心方法

语法：
$.ajax( { name:value, name:value, ... } )
参数是json的数据，包含请求方式、数据、回调方法等，参数说明如下
    async:其值表示是否异步处理，默认为true
    contentType：发送数据到服务端所使用的内容类型
    默认是"application/x-www-form-urlencoded"
    data:发送到服务器的数据，可以是：string，数组，多数是json
    dataType:期望从服务器响应的数据类型，例如：
    "xml" - 一个 XML 文档
    "html" - HTML 作为纯文本
    "text" - 纯文本字符串
    "json" - 以 JSON 运行响应，并以对象返回
    url:规定发送请求的URL
    type：规定请求的类型，默认是GET
    error(xhr,status,error)：如果请求失败要运行的函数, 
    其中 xhr, status, error 是自定义的形参名
    success(result,status,xhr)：当请求成功时运行的函数，
    其中 result, status, xhr 是自定义的形参名
    xhr 是 XMLHttpRequest 对象
    
    
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function func() {
            // 使用$.ajax()发送异步请求
            $.ajax({
                url:"adjaxServlet", // 请求路径
                type:"POST",// 请求方式，不写默认为get
                //data:"userName=NrvCer&age=23",//请求参数
                data:{"username":"jack", "age":23}
                success:function (data) {
                    alert(data);    //  弹出服务端的响应数据
                },  // 响应成功后的回调函数
            });

        }

    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="func();"/>
    <input/>
</body>
</html>

$.get():发送get请求

语法：
$.get(url,[data],[callback],[type]);
url:请求的路径
data:请求参数
callback:响应成功后执行的回调函数
type:响应结果的类型


 function func() {
    // 使用$.get()发送get请求方式的异步请求
    $.get(
        "adjaxServlet",
        {userName:"NrvCer",age:23},
        function(data) {
            alert(data);
        },
        "text"
    );

}

$.post()：发送post请求

语法和上面一样,只是请求方式不同

posted on 2022-08-24 22:15 scrutiny-span 阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航