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省事不少。