ajax和servlet交互

网上有比较多的教程来将如何实现ajax与servlet的交互了，这里和这里的教程可以参考参考，在此处我只简单说明一下，并记录一下我这次遇到的问题。

整个思路是：写个js函数，在里面使用XHR(ajax的教程）的open和send方法与服务器进行交互

我遇到的问题是将setRequestHeader的第二个参数设置错了，导致send发送的数据服务器没有接收到。正确的形式如下：

xmlHttp.open("POST","newProject",true);

        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

        xmlHttp.send("newProjectName=" + project_name);

在服务器端使用servlet处理接收到的数据：

@WebServlet("/newProject")

public class ProjectNewServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    ……

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

        // TODO Auto-generated method stub

        request.setCharacterEncoding("UTF-8");

        String projectName = request.getParameter("newProjectName");

        String fileContent = "";

……

}

}

然后就可以对接收到的数据进行处理了，处理完后还可以使用response发送数据给客户端，客户端在onreadystatechange绑定的函数里对数据进行处理，这些东西上面的教程有详解。servlet返回数据的部分代码如下：

response.setContentType("text/xml;charset=UTF-8");

        PrintWriter out = response.getWriter();

        out.write(fileContent);

        out.close();

fileContent为xml数据

事实上，这种使用原始的javascript和ajax有点麻烦，如果直接用jquery的.post或者.get或者.ajax方法，更方便更简单，js代码如下：

$.post("./newProject",{newProjectName:project_name},

            function(data,status){

        //alert("data:" + data + "status:" + status);

        if(status == "success"){

            var nodes = data.getElementsByTagName("project");

            //alert(nodes[0].getAttribute("name"));

            for(var i = 0;i < nodes.length;i ++){

                $("#project_items").append("<option value=\"" + (i+1) + "\">" + nodes[i].getAttribute("name") + "</option>");

            }

        }

    });

"newProject"为上面的servlet的注解路径，data为servlet返回的xml数据。使用jquery省事很多。

秒客网

ajax和servlet交互

相关文章