javascript请求servlet实现ajax示例(分享)

下面我来详细讲解“javascript请求servlet实现ajax示例(分享)”的完整攻略。

什么是 Ajax？

Ajax 指的是一种创建交互式、快速动态网页的技术。利用 Ajax，在不重新加载整个页面的情况下，实现局部更新数据的功能，并且不会打断用户正在进行的操作。

实现 Ajax 的方式

实现 Ajax 的方式有很多，其中比较典型的方式就是使用 JavaScript 和 Servlet 进行交互。

JavaScript 用于在页面上发送请求和获取响应，而 Servlet 则负责处理请求并返回响应结果。

JavaScript 请求 Servlet

下面，我们就来讲一下如何使用 JavaScript 请求 Servlet。

代码示例：

// 创建 XMLHTTPRequest 对象
var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// 设置回调函数
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 处理返回的数据
        document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
}

// 发送请求
xmlhttp.open("GET", "servlet_url", true);
xmlhttp.send();

上面这段代码中，我们首先创建了 XMLHTTPRequest 对象，然后设置了回调函数，回调函数里面处理请求并返回的数据。

接着，我们使用 open() 方法设置请求方式为 GET，请求的 URL 为 servlet_url，并且设置异步请求为 true。最后使用 send() 方法发送请求。

Servlet 处理请求

在 Servlet 中，我们通过 doGet() 或 doPost() 方法处理请求，并返回响应结果。

代码示例：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置响应内容类型
    response.setContentType("text/html;charset=UTF-8");

    // 处理请求
    PrintWriter out = response.getWriter();
    out.println("Hello World!");
}

上面这段代码中，我们首先使用 setContentType() 方法设置响应内容类型为 text/html，编码为 UTF-8，然后在 getWriter() 方法中输出响应结果，最后将响应发送给客户端。

示例说明

接下来，我们通过两个示例来演示如何使用 JavaScript 请求 Servlet。

示例一：计算两数之和

要求：用户输入两个数字，并且点击按钮计算两数之和。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 示例</title>
<script type="text/javascript">
function sum() {
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "sum?q=" + num1 + "&p=" + num2, true);
  xmlhttp.send();
}
</script>
</head>
<body>
  <input type="text" id="num1"> +
  <input type="text" id="num2"> 
  <button onclick="sum()">计算</button><br>
  结果：<span id="result"></span> 
</body>
</html>

上面这段代码中，我们创建了两个输入框和一个按钮，当用户点击按钮时，会调用 sum() 方法进行运算。

在 sum() 方法中，我们首先获取用户输入的两个数字，并且创建了一个 XMLHttpRequest 对象，然后设置了回调函数。在回调函数中，我们将服务器返回的结果输出到页面上。

最后，我们使用 open() 方法设置请求方式为 GET，并且将用户输入的两个数字作为参数传递给 Servlet。最后使用 send() 方法发送请求。

在 Servlet 中，我们获取了用户输入的两个数字，并且将它们相加作为响应结果返回给客户端。

代码示例：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置响应内容类型
    response.setContentType("text/html;charset=UTF-8");

    // 处理请求
    int num1 = Integer.parseInt(request.getParameter("q"));
    int num2 = Integer.parseInt(request.getParameter("p"));
    int sum = num1 + num2;
    PrintWriter out = response.getWriter();
    out.println(sum);
}

示例二：查询城市天气

要求：用户输入城市名称，并且点击按钮查询该城市的天气状况。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 示例</title>
<script type="text/javascript">
function query(city) {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "weather?q=" + city, true);
  xmlhttp.send();
}

function showResult() {
  var city = document.getElementById("city").value;
  query(city);
}
</script>
</head>
<body>
  城市：<input type="text" id="city">
  <button onclick="showResult()">查询</button><br>
  天气：<span id="result"></span>
</body>
</html>

上面这段代码中，我们创建了一个输入框和一个按钮，当用户点击按钮时，会调用 showResult() 方法进行查询。

在 showResult() 方法中，我们首先获取用户输入的城市名称，并且调用 query() 方法进行查询。

在 query() 方法中，我们创建了一个 XMLHttpRequest 对象，然后设置了回调函数。在回调函数中，我们将服务器返回的结果输出到页面上。

最后，我们使用 open() 方法设置请求方式为 GET，并且将用户输入的城市名称作为参数传递给 Servlet。最后使用 send() 方法发送请求。

在 Servlet 中，我们获取了用户输入的城市名称，并且使用一个简单的判断语句，返回该城市当前的天气状况。

代码示例：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置响应内容类型
    response.setContentType("text/html;charset=UTF-8");

    // 处理请求
    String city = request.getParameter("q");
    String result = "";
    if(city.equals("北京")) {
        result = "多云";
    } else if(city.equals("上海")) {
        result = "雨";
    } else if(city.equals("广州")) {
        result = "晴";
    }
    PrintWriter out = response.getWriter();
    out.println(result);
}

以上就是“javascript请求servlet实现ajax示例(分享)”的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript请求servlet实现ajax示例(分享) - Python技术站