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("<?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()); %>
结果
