Ajax 和 Servlet 联动

最新推荐文章于 2021-08-06 00:15:08 发布

放气

最新推荐文章于 2021-08-06 00:15:08 发布

阅读量143

点赞数

分类专栏： Java 相关文章标签： ajax java

本文链接：https://blog.csdn.net/liu1shi/article/details/112252453

版权

Java 相关专栏收录该内容

86 篇文章 0 订阅

订阅专栏

在这里插入图片描述

AJAX, Asynchronous JavaScript and XML。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

简单封装 Ajax 工具类。


// ajax.js
function getXmlhttpRequset() {
    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {

            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                alert("您的浏览器不支持AJAX！");
                return false;
            }
        }
    }
    return xmlHttp;
}


function ajax(param) {

    // 1.获取xmlHttpRequset
    var xmlHttp = getXmlhttpRequset();

    // 2.设置请求参数
    xmlHttp.open(param.method, param.url);

    // 设置请求头
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 3.发送请求
    if (param.method == "POST") {
        xmlHttp.send(param.data);
    } else if (param.method == "GET") {
        xmlHttp.send();
    }

    // 4.监听请求状态
    xmlHttp.onreadystatechange = function () {

        // readyState，Ajax响应状态；status，服务端响应状态。
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

			// 接收 xml 数据。
            console.log("XML: " + xmlHttp.responseXML)

            // 6、调用回调函数
            param.callback(xmlHttp.responseText);
        }
    }
}

服务端接收数据和响应。（部分代码）


@WebServlet("/AjaxServlet/*")
public class AjaxServlet extends DispacherServlet {

    public void hello(HttpServletRequest request, HttpServletResponse response) {

        // 接收服务端原数据
        try {
            BufferedReader reader = request.getReader();
            System.out.println(reader.readLine());
        } catch (IOException e) {
            e.printStackTrace();
        }

        // 接收服务端数据，application/x-www-form-urlencoded
        String username = request.getParameter("username");
        String age = request.getParameter("age");
        System.out.println(username + "\t" + age);

        // 响应文本信息到客户端
        try {
        	response.getWriter().write("响应文本。");
            // response.getWriter().write("<html><body><p>Hello</p> <div>Ajax</div></body></html>");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

index.jsp。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">

      window.onload = function () {
        document.getElementById("button1").addEventListener("click", function () {

          var param = {
            // method: "GET",
            // url:"AjaxServlet/hello?username=zs&age=23",
            method: "POST",
            url:"AjaxServlet/hello",
            data:"username=zs&age=23",
            callback: function (res) {
              console.log(res);
              document.getElementById("div1").innerText = res;
            }
          };

          ajax(param);

        })
      }

    </script>

  </head>
  <body>

    <button id="button1">异步访问AjaxServlet</button>
    <div id="div1" style="border: antiquewhite solid 1px;width: 100px;height: 100px;"></div>

  </body>
</html>

放气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 和 Servlet 联动

AJAX, Asynchronous JavaScript and XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。封装 Ajax 工具类。// ajax.jsfunction getXmlhttpRequset() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = ..
复制链接

扫一扫