AJAX通过post提交数据，并获取XML格式返回结果

AJAX简单示范：以post方式提交查询，获取查询结果，后台以XML格式返回数据，前端解析XML并显示。

sample2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Ajax例子二</TITLE>
<SCRIPT language="JavaScript">
var xmlHttp = null;
function createXMLHttpRequest() {
    if(xmlHttp == null){
         if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }else {
            alert("无法创建 XML HTTP 对象");
        }
    }
}
function getInfo() {
    // 后台提交
    var url = "sample2Action.jsp";
    var queryStr = "param1=hello&param2=大家好";
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStatsChange;
    xmlHttp.open("post", url, true);
    // 此代码需要放置在open方法下面，否则异常，后台获取不到查询参数
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.send(queryStr);
}
function handleStatsChange() {
    var divInfo = document.getElementById("divInfo");
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var addDocument = xmlHttp.responseXML;
            var docs = addDocument.getElementsByTagName("doc");
            
            // 创建table对象，然后将xml解析结果放置进去
            var tableNode = document.createElement("table");
            tableNode.setAttribute("border", "1");
            
            // 设置标题栏
            var tr = tableNode.insertRow(0);
            var td = tr.insertCell();
            td.appendChild(document.createTextNode("title"));
            td = tr.insertCell();
            td.appendChild(document.createTextNode("content"));
            
            // 下面是内容 
            for(var i=0; i<docs.length; i++) {
                var doc = docs[i];
                tr = tableNode.insertRow(i+1);
                for(var j=0; j<2; j++) {
                    td = tr.insertCell(j);
                    var title1 = doc.childNodes[j];
                    var text = document.createTextNode(title1.firstChild.nodeValue);
                    td.appendChild(text);
                }
            }
            divInfo.appendChild(tableNode);
        }
    }
}    
</SCRIPT>
</HEAD>
<BODY>
    <input type="button" onclick="getInfo();" value="查询">
    <DIV id="divInfo"></DIV>
</BODY>
</HTML>

sample2Action.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.*"%>
<%
    String param1 = request.getParameter("param1");
    String param2 = request.getParameter("param2"); // 因为是post传递，中文参数不需要额外转换

    // do something......
    StringBuilder sb = new StringBuilder("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
    sb.append("<add>\n");
    sb.append("  <doc>\n");
    sb.append("    <title>不雅视频爆料人：有比雷政富级别高者漏网</title>\n");
    sb.append("    <content>昨日上午，朱在律师的陪同下来到辖区北京德胜门外派出所</content>\n");
    sb.append("  </doc>\n");
    sb.append("  <doc>\n");
    sb.append("    <title>广州城中村已迁户挖河沟孤立未搬村民</title>\n");
    sb.append("    <content>当我抵达广州，站在杨箕村举头四望的时候，有一种很奇异的感觉，因为四周都是高楼林立，这</content>\n");
    sb.append("  </doc>\n");
    sb.append("</add>\n");
    
    System.out.println(param1 + "\t" + param2 + "\t" + new java.util.Date());
    System.out.println(sb.toString());
    
    // 返回值包含了中文，需要编码            
    response.setContentType("text/xml;charset=utf-8");
    response.getWriter().print(sb.toString());    
%>

 结果

posted @ 2013-01-29 22:35  那些年的事儿  阅读(1046)  评论(0)  编辑  收藏  举报