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¶m2=大家好";
    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(""1.0\" encoding=\"UTF-8\"?>\n");
    sb.append("\n");
    sb.append("  \n");
    sb.append("    不雅视频爆料人:有比雷政富级别高者漏网\n");
    sb.append("    昨日上午,朱在律师的陪同下来到辖区北京德胜门外派出所\n");
    sb.append("  \n");
    sb.append("  \n");
    sb.append("    广州城中村已迁户挖河沟孤立未搬村民\n");
    sb.append("    当我抵达广州,站在杨箕村举头四望的时候,有一种很奇异的感觉,因为四周都是高楼林立,这\n");
    sb.append("  \n");
    sb.append("\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());    
%>

 结果

AJAX通过post提交数据,并获取XML格式返回结果_第1张图片

你可能感兴趣的:(AJAX通过post提交数据,并获取XML格式返回结果)