在 AJAX 中处理 servlet 输出

Posted 2023-02-25

【中文标题】在 AJAX 中处理 servlet 输出

【英文标题】：Handling servlet output in AJAX

【发布时间】：2010-12-26 10:07:14

【问题描述】：

我的问题：我正在从 JSP 中的 AJAX 函数向 servlet 发送请求。

servlet 处理数据并返回ArrayList。

我的问题是如何处理 AJAX 中的ArrayList，并在同一个 JSP 中将其显示为表格。

代码是

function ajaxFunction ( ) 

 // var url= codeid.options[codeid.selectedIndex].text;
 url="mstParts?caseNo=9&cdid=QCYST0020E1";
 //  alert(cid);
   var httpRequest;
    if (window.XMLHttpRequest) 
        httpRequest = new XMLHttpRequest();
     else if (window.ActiveXObject) 
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    
  if (httpRequest == null) alert('null');

alert(url);
    httpRequest.open("GET", url, true );

   httpRequest.onreadystatechange = function()  alertContents(httpRequest); ;
  //httpRequest.setRequestHeader('Content-Type', 'text/plain');
    httpRequest.send(null);

  alert('t1');


function alertContents(httpRequest) 
    if (httpRequest.readyState == 4) 
        var cType =httpRequest.getResponseHeader("Content-Type");
        //document.write(httpRequest.toString());
      // alert(cType);
       // var xmlDoc=httpRequest.responseText;
        //document.write(xmlDoc.toString());
      //  if (xmlDoc == null) alert('null returned');
        if (!httpRequest.status == 200) 
            alert('Request error. Http code: ' + httpRequest.status);
        
        else
            
                var profileXML = eval(<%=request.getAttribute("data")%>);
                if ( profileXML != null) alert('null'); //else  alert(profileXML(0)); 
               // httpRequest.getAttribute("data");


            
    

【参考方案1】：

var profileXML = eval(<%=request.getAttribute("data")%>);

首先，我建议你了解一下 javascript 和 JSP 之间的墙。 JS 完全在客户端运行，JSP/Java 完全在服务器端运行。它们当然不会像您想象的那样同步运行。要了解更多信息，请阅读this blog article。

function ajaxFunction ( )

其次，我建议您使用具有 Ajaxical 功能的现有、健壮、彻底开发、维护良好的 JavaScript 库，例如 jQuery，而不是重新发明 AJAX ***并与浏览器特定问题作斗争/挣扎/担心/麻烦/行为/痛苦。我还建议使用JSON 作为服务器端的 Java Servlet 和客户端的 JavaScript 之间的数据传输格式。在 Java 方面，您可以为此使用出色的 Gson 库。

这是一个包含所有提到的技术的启动示例。让我们从一个 Servlet 和一个 JavaBean 开始：

public class JsonServlet extends HttpServlet 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        List<Data> list = dataDAO.list();
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(new Gson().toJson(list));
    


public class Data 
    private Long id;
    private String name;
    private Integer value;
    // Add/generate getters/setters.

JsonServlet（您可以随意命名，这只是一个基本示例）应该映射到已知url-pattern 上的web.xml，我们在此示例中使用/json。 Data 类只代表 html 表（和数据库表）的一行。

现在，您可以在 jQuery.getJSON 的帮助下加载表格：

$.getJSON("http://example.com/json", function(list) 
    var table = $('#tableid');
    $.each(list, function(index, data) 
        $('<tr>').appendTo(table)
            .append($('<td>').text(data.id))
            .append($('<td>').text(data.name))
            .append($('<td>').text(data.value));
    );
);

tableid 当然表示有问题的<table> 元素的id。

应该是这样的。毕竟这很简单，相信我。祝你好运。

【讨论】：

感谢 BalusC 先生，我很感激。我只是被这个项目装箱了，因为我的公司没有其他选择:-)，基本上我和 MS 的人有很长的联系。所以我觉得有点难以采用，无论如何我都会把它作为一个初学者来学习。再次感谢。