JavaWeb学习——Ajax

柿子镭

已于 2022-04-09 16:22:07 修改

阅读量895

点赞数 1

分类专栏： JSON Javaweb 文章标签： JavaWeb Ajax

于 2022-04-05 18:40:28 首次发布

本文链接：https://blog.csdn.net/weixin_45890771/article/details/123972887

版权

Javaweb 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

JSON

13 篇文章 3 订阅

订阅专栏

一、AJAX请求

二、javaScript 原生 Ajax 请求

一、AJAX请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化局部更新不会舍弃原来页面的内容

二、javaScript 原生 Ajax 请求

原生的 Ajax 请求：

我们首先要创建 XMLHttpRequest 对象
调用 open 方法设置请求参数
调用 send 方法发送请求
在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

1）创建一个 html 页面，发起请求。代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript">
    function ajaxRequest() {
// 1、我们首先要创建 XMLHttpRequest
      var xhr = new XMLHttpRequest();
// 2、调用 open 方法设置请求参数
      xhr.open("GET","ajaxServlet?action=javaScriptAjax",true);
// 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
      xhr.onreadystatechange = function() {
// 判断请求完成，并且成功
        if (xhr.readyState == 4 && xhr.status == 200) {
          document.getElementById("div01").innerHTML = xhr.responseText;
        }
      }
// 3、调用 send 方法发送请求
      xhr.send();
    }
  </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

2）创建一个 AjaxServlet 程序接收

public class AjaxServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;
    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
}

3）在 web.xml 文件中的配

    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>com.servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>

4）测试结果：

通过上面的代码我们发现，编写原生的 JavaScript 我们自己要写很多的代码，而且还要考虑浏览器兼容问题。所以 “玩转”Java 系列使用起来非常的不方便。那我们工作之后，怎么处理 Ajax 请求呢？

————我们一般会使用 JavaScript 的框架来解决这个问题，比如 Jquery 框架，它就有很好的 Ajax 解决方案。