使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求示例

本文介绍: 这篇文章解释了 Aja x 的基础知识以及如何使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求。Aja x（异步 Ja va script 和 XML）是一种我们可以在 We b 开发中使用的技术，用于创建更快的用户界面更新和更好的用户体验。Aja x 使用 XMLHt t pReque s t 对象与服务器进行通信。使用 ajax，用户可以在不提交页面或重新加载浏览器页面的情况下将数据发布到后端服务器。使用 servlet 创建 AJAX 示例应用程序非常简单。在这篇文章

这篇文章解释了 Ajax 的基础知识以及如何使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求。

Ajax（异步 Java script 和 XML）是一种我们可以在 Web 开发中使用的技术，用于创建更快的用户界面更新和更好的用户体验。Ajax 使用 XMLHt tpReques t 对象与服务器进行通信。使用 ajax，用户可以在不提交页面或重新加载浏览器页面的情况下将数据发布到后端服务器。使用 servlet 创建 AJAX 示例应用程序非常简单。

在这篇文章中，我们将学习如何使用 Ajax 技术来调用后端 servlet，从 servlet 获取响应并相应地修改用户界面。

我们将通过创建一个简单的 javascript ajax 示例来学习。

版本详情：

Eclip se IDE或NetBeans IDE
Apac he To m cat v8。
json-20140107.jar

创建一个 servlet 类

在上一步中，我们创建了动态 Web 项目。在src 文件夹下创建一个 servlet 类 AjaxHandler.java 。

这个 Ser v let 类处理来自我们前端 html 页面的 Ajax 调用。在这个类中，我们使用硬编码的 JSON 对象值作为响应。Ser v let 类在通过 Ajax 调用调用时返回一个 JSON 数组作为响应。

请注意，要创建 JSON 对象，我们需要将依赖项 jar 添加到动态 Web 项目的类路径或库中。在此示例中，我们使用的是 org.json 依赖 jar。下载最新的 jar 并将其添加到类路径或放在 WEB-INF/lib 目录下。

在下面的代码中，我们实现了 HTTP GET 方法。

我们正在创建一个 JSON 数组并向该数组添加两个 JSON 对象。最后，我们通过响应返回这个 JSON 数组。

我们的 JSON 对象包含姓名和年龄属性。另外，请注意，在我们返回 JSON 数据时，响应 MIME 类型设置为application/json 。


import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

@WebServlet("/AjaxHandler")
public class AjaxHandler extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public AjaxHandler() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        JSONArray array = new JSONArray();

        JSONObject user1 = new JSONObject();
        user1.put("name", "TOM");
        user1.put("age", "26");
        JSONObject user2 = new JSONObject();
        user2.put("name", "ASB");
        user2.put("age", "26");

        array.put(user1);
        array.put(user2);

        response.setContentType("application/json");
        response.getWriter().write(array.toString());
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

从 html 页面使用 Ajax 调用 servlet

在上一步中，我们创建了后端 servlet。现在最后一步是创建一个 html 页面并将 Ajax 调用添加到其中。

在我们动态 Web 项目的Webcontent 文件夹下创建一个 html 页面 index.html 。将以下 html 内容添加到页面。

我们使用 http GET 方法（使用 XMLHttpRequest）调用后端 servlet，并将 servlet 返回的内容附加到 id 为 contentDiv的div html 元素上。

<!DOCTYPEhtml>
<html>
    <head>
        <style>
            #contentTable,th,td{
                border:solid 1px black;
            }
        </style>
    </head>
    <body>
        <h2>Ajax Example with Servlet</h2>

        <button onclick="callAjax();">GetData</button>
        <br/><br/>


        <table id="contentTable">
            <tr>
                <th>Name</th><th>Age</th>
            </tr>
        </table>
        <div id="loading"></div>

        <script type="text/javascript">
            function callAjax() {

                document.getElementById('loading').innerHTML = "LoadingData...";

                httpRequest = new XMLHttpRequest();

                if (!httpRequest) {
                    console.log('Unable to create XMLHTTP instance');
                    returnfalse;
                }
                httpRequest.open('GET', 'AjaxHandler');
                httpRequest.responseType = 'json';
                httpRequest.send();
                httpRequest.onreadystatechange = function () {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {

                        document.getElementById('loading').innerHTML = "";

                        if (httpRequest.status === 200) {

                            var array = httpRequest.response;
                            for (var i = 0; i < array.length; i++) {

                                var table = document.getElementById('contentTable');
                                var row = table.insertRow(table.rows.length);
                                var cell1 = row.insertCell(0);
                                var cell2 = row.insertCell(1);
                                var name = document.createTextNode(array[i].name);
                                var age = document.createTextNode(array[i].age);
                                cell1.appendChild(name);
                                cell2.appendChild(age);
                            }
                        } else {
                            console.log('Something went wrong..!!');
                        }
                    }
                }
            }
        </script>
    </body>
</html>