在AJAX中处理servlet输出

时间:2009-12-14 12:41:37

标签: ajax jsp servlets arraylist

我的问题:我正在从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 个答案:

答案 0 :(得分:19)

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

首先,我建议您了解JavaScript和JSP之间的隔阂。 JS完全在客户端运行,JSP / Java完全在服务器端运行。它们肯定不像你想象的那样同步。要了解详情,请阅读this blog article

function ajaxFunction ( )

其次,我建议您使用现有的,健壮的,彻底开发的,维护良好的JavaScript库以及jQuery之类的Ajax功能,而不是重新发明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(您可以根据需要命名,这只是一个基本示例)应该在web.xml上映射到已知的url-pattern上,让我们使用/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当然表示相关id元素的<table>

那应该是它。毕竟它相当简单,相信我。祝你好运。