【SpringMVC】——Ajax知识总结

Y小夜

已于 2025-02-13 16:26:48 修改

阅读量1.5k

点赞数 86

分类专栏： ssm框架文章标签： okhttp ajax

于 2025-02-13 10:15:14 首次发布

本文链接：https://blog.youkuaiyun.com/shsjssnn/article/details/140601227

版权

ssm框架专栏收录该内容

5 篇文章

订阅专栏

🎼个人主页：【Y小夜】

😎作者简介：一位双非学校的大二学生，编程爱好者，

专注于基础和实战分享，欢迎私信咨询！

🎆入门专栏：🎇【MySQL，Java基础，Rust】

🎈热门专栏：🎊【Python，Javaweb，Vue框架】

感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️

🎯原生 JavaScript Ajax 实例

🎯Ajax概述

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得网页可以在不刷新页面的情况下，从服务器请求并更新数据。Ajax 的全称是 Asynchronous JavaScript and XML（异步JavaScript和XML），它利用了现有的技术标准，包括 HTML/CSS、JavaScript、DOM 和 XMLHttpRequest 对象。

😎Ajax 的构成要素

XMLHttpRequest 对象：这是 Ajax 技术的核心，用于在后台与服务器进行异步数据交换。通过这个对象，JavaScript 可以发送请求并接收响应，而无需刷新整个页面。
JavaScript 和 DOM：JavaScript 用于编写 Ajax 逻辑，并通过操作 DOM 来动态更新网页内容。
CSS：用于定义数据的显示样式，使得更新后的内容能够与页面的其他部分保持风格一致。
数据格式：虽然 Ajax 名称中包含 XML，但实际上 JSON（JavaScript Object Notation）是更常用的数据交换格式，因为它更轻量且易于处理。

😎Ajax 的工作原理

异步请求：Ajax 最大的特点是其异步性，用户触发某个操作后，JavaScript 会创建 XMLHttpRequest 对象，向服务器发送请求，并继续执行其他脚本或响应用户操作，而不会等待服务器响应。
数据处理：当服务器响应到达时，会触发事先定义好的回调函数，该函数处理返回的数据，通常是通过 DOM 操作将数据显示在页面上。
状态和响应：XMLHttpRequest 对象有两个关键属性：readyState 和 status。readyState 表示请求的状态，值为 4 时表示请求已完成；status 为 200 时表示成功接收到了服务器的响应。

😎Ajax 的应用实例

表单提交：在表单提交时，可以使用 Ajax 异步验证用户输入的信息，如检查用户名是否已被注册。
搜索提示：搜索引擎中的搜索建议功能可以通过 Ajax 实现，用户输入关键字时，无需跳转页面即可显示建议结果。
自动更新：一些网页需要实时展示最新信息，如股票价格或体育赛事数据，Ajax 能够在不刷新页面的情况下定时获取最新数据并更新显示。
动态加载内容：例如，在社交媒体网站中，使用 Ajax 可实现滚动到页面底部时自动加载更多内容，提升用户体验

😎Ajax 的优点

提高用户体验：由于避免了页面重载，用户的浏览体验更加流畅和快速。
减少带宽消耗：Ajax 仅请求必要的数据而非整个页面，减少了数据传输量，节省带宽。
减轻服务器压力：较小的数据请求相比完整的页面请求对服务器的压力更小。
提高兼容性：Ajax 应用独立于浏览器和平台，只要用户的浏览器支持 JavaScript 和 XMLHttpRequest 对象即可。

😎Ajax 的跨域问题

同源策略：浏览器的安全机制限制了 Ajax 请求必须遵守同源策略，即只能请求与当前页面同源（相同协议、域名和端口）的资源。
解决方法：CORS（跨域资源共享）和 JSONP（JSON with Padding）是两种常见的解决跨域问题的方法，它们允许不同源的 Ajax 请求。

🎯jQuery Ajax 实例

😎 实例1: 获取地址经纬度

在这个实例中，用户在网页上输入一个地址，点击按钮后，通过 Ajax 请求高德地图的 API 接口获取该地址的经纬度，并在页面上显示结果。

请求 URL: "https://restapi.amap.com/v3/geocode/geo"
请求方式： GET
请求参数： address - 用户输入的地址， key - 高德地图 API 密钥
成功回调函数：处理并显示经纬度数据
示例代码

$(function() {
  $("#getLocation").click(function() {
    var address = $("#address").val();
    $.ajax({
      url: "https://restapi.amap.com/v3/geocode/geo",
      dataType: "json",
      type: "GET",
      data: {
        address: address,
        key: "7486e10d3ca83a934438176cf941df0c"
      },
      success: function(data) {
        console.log(data);
        alert("经度： " + data.location.lng + "纬度： " + data.location.lat);
      },
      error: function() {
        alert("请求失败！请稍后再试");
      }
    });
  });
});

解释：当用户输入地址并点击“获取经纬度”按钮时，上述 JavaScript 代码会触发 Ajax 请求，向高德地图 API 发送带有地址信息的请求，并接收返回的经纬度数据。成功的回调函数会在控制台打印返回的数据，并以弹窗形式显示经纬度信息。

😎实例2: 表单验证

使用 Ajax 实现表单的实时验证，例如检查用户名是否已存在。

请求 URL: "/checkusername"
请求方式： POST
请求数据： username - 用户输入的用户名
成功回调函数：显示用户名是否可用
示例代码：

$(function() {
  $("#username").blur(function() {
    var username = $(this).val();
    $.ajax({
      url: "/checkusername",
      dataType: "json",
      type: "POST",
      data: {
        username: username
      },
      success: function(data) {
        if (data.exists) {
          alert("用户名已存在");
        } else {
          alert("用户名可用");
        }
      },
      error: function() {
        alert("请求失败！请稍后再试");
      }
    });
  });
});

解释：当用户在用户名输入框失去焦点时，上述 JavaScript 代码会触发 Ajax 请求，向服务器发送用户名并检查其是否已存在。成功的回调函数会根据服务器返回的数据，以弹窗形式告知用户用户名是否可用。

🎯原生 JavaScript Ajax 实例

😎实例3: 加载文本文件内容

：使用 XMLHttpRequest 对象从一个 TXT 文件中异步加载数据，并显示在页面上。

请求 URL: "data.txt"
请求方式： GET
成功回调函数：显示文本文件内容
示例代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("content").innerHTML = xhr.responseText;
  }
};
xhr.open("GET", "data.txt", true);
xhr.send();

解释：上述 JavaScript 代码创建了一个 XMLHttpRequest 对象，指定请求类型为 GET，异步方式，并定义了 onreadystatechange 事件处理函数。当请求完成并且响应状态为 200 (表示成功) 时，将响应文本显示在具有 id "content" 的 HTML 元素中。最后，通过 open() 和 send() 方法发送请求。

😎实例4: 加载 XML 文件并显示

使用 XMLHttpRequest 对象从一个 XML 文件中异步加载数据，并在 HTML 表格中显示这些数据。

请求 URL: "data.xml"
请求方式： GET
成功回调函数：解析并显示 XML 文件内容
示例代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var xmlDoc = xhr.responseXML;
    var table = "<tr><th>Name</th><th>Age</th></tr>";
    var x = xmlDoc.getElementsByTagName("user");
    for (var i = 0; i < x.length; i++) {
      table += "<tr><td>" +
                x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("age")[0].childNodes[0].nodeValue +
                "</td></tr>";
    }
    document.getElementById("users").innerHTML = table;
  }
};
xhr.open("GET", "data.xml", true);
xhr.send();

      解释：上述 JavaScript 代码创建了一个 XMLHttpRequest 对象，指定请求类型为 GET，异步方式，并定义了 onreadystatechange 事件处理函数。当请求完成并且响应状态为 200 (表示成功) 时，解析返回的 XML 数据，遍历每个用户节点，提取名字和年龄信息，并将其添加到一个 HTML 表格字符串中。最后，将这个表格字符串设置为具有 id "users" 的 HTML 元素的 innerHTML，从而在页面上显示数据。通过 open() 和 send() 方法发送请求。

🎯Ajax 与数据库交互实例

😎实例5: 从数据库加载内容

当用户在输入框中键入字符时，通过 Ajax 请求从数据库检索相关内容，并显示在页面上。

请求 URL: "/search.php"
请求方式： GET
请求数据： query - 用户输入的查询字符串
成功回调函数：显示搜索结果
示例代码：

document.getElementById("searchBox").addEventListener("input", function() {
  var query = this.value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      var resultsDiv = document.getElementById("results");
      resultsDiv.innerHTML = "";
      for (var i = 0; i < response.length; i++) {
        resultsDiv.innerHTML += "<div>" + response[i].name + "</div>";
      }
    }
  };
  xhr.open("GET", "/search.php?q=" + query, true);
  xhr.send();
});

解释：上述 JavaScript 代码为搜索输入框添加了输入事件监听器。当用户在输入框中输入时，代码将创建一个新的 XMLHttpRequest 对象，指定请求类型为 GET，异步方式，并定义了 onreadystatechange 事件处理函数。请求的 URL 包括用户输入的查询字符串作为参数。当请求完成并且响应状态为 200 (表示成功) 时，解析返回的 JSON 数据，遍历每个结果项，并将其添加到 id 为 "results" 的 HTML 元素的 innerHTML 中，从而在页面上显示搜索结果。通过 open() 和 send() 方法发送请求。

😎实例6: AJAX 应用程序

一个简单的 CD 目录应用程序，通过 AJAX 从 XML 文件检索 CD 信息，并在 HTML 表格中显示。

请求 URL: "cd_catalog.xml"
请求方式： GET
成功回调函数：解析并显示 CD 目录信息
示例代码：

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var xmlDoc = this.responseXML;
      var table = "<tr><th>Artist</th><th>Title</th></tr>";
      var x = xmlDoc.getElementsByTagName("CD");
      for (var i = 0; i < x.length; i++) {
        table += "<tr><td>" +
                  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
                  "</td><td>" +
                  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
                  "</td></tr>";
      }
      document.getElementById("cdTable").innerHTML = table;
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}

解释：上述 JavaScript 代码定义了一个名为 loadXMLDoc 的函数，该函数创建了一个 XMLHttpRequest 对象，指定请求类型为 GET，异步方式，并定义了 onreadystatechange 事件处理函数。当请求完成并且响应状态为 200 (表示成功) 时，解析返回的 XML 数据，遍历每个 CD 节点，提取艺术家和标题信息，并将其添加到一个 HTML 表格字符串中。最后，将这个表格字符串设置为具有 id "cdTable" 的 HTML 元素的 innerHTML，从而在页面上显示 CD 目录信息。通过 open() 和 send() 方法发送请求。用户可以通过调用 loadXMLDoc 函数来加载和显示 CD 目录。