使用XMLHTTP可以在页面中实现无涮新自动获取服务器的新数据, 在一些聊天室中可以非常方便实现涮新新数据,同样,也可以在其它 BS应用中实现定时涮新页面数据。但在使用XMLHTTP和DOMDocument时 会碰到一些问题.一个是如何传送参数,二是中文乱码问题,还有就是如何解析XML代码。
1、参数传送和获得参数值 XMLHTTP的send方法 Send(varBody) varBody:指令集。可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。 也可以省略,让指令通过Open方法的URL参数代入。 send方法也可以传送参数对,各参数之间可以用&隔开,比如 var post = "id=1000&page=3"; xmlhttp.send(post);
或是在OPen方法的URL参数上加入,如 xmlhttp.open("POST", "http://localhost:8088/getData?id=1000&page=3", false);
在JSP或是Servlet中,可以和平常一样从request中得到参数 String id = (String)req.getParameter("id"); String page = (String)req.getParameter("page");
因为XMLHTTP发送的请求不是multipart/form-data格式的 因而注意在Servlet不能用multipart/form-data格式的一些方法。
2、中文乱码问题 XMLHTTP是以UTF-8编码格式发送请求和接收返回值的,因而如果不有进行编码处理, 而在发送的参数中或是接收的返回值中有中文,那么我们看到的是乱码 首先对发送的参数进行处理
var post="Years=2004-2005&TermID=秋冬"; //含有中文 xmlhttp.open("POST", "http://localhost:8088/getData", false); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //要有此句 xmlhttp.setRequestHeader("Content-Length",post.length); xmlhttp.send(post);
在servlet里取参数时,对request进行编码处理 req.setCharacterEncoding("UTF-8"); 然后取参数 String years = (String)req.getParameter("Years"); String termID = (String)req.getParameter("TermID");
如果在Servlet里有输出数据到请求的页面时,如果包含有中文, 也要进行编码处理 首先对response进行编码处理 private static final String CONTENT_TYPE = "text/html; charset=UTF-8"; res.setContentType(CONTENT_TYPE);
在输出的XML代码中用UTF-8进行编码 out.println("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\" ?>"); out.println("<root>"); out.println("<person id=1>"); out.println("<name>张三</name>"); out.println("<gender>男</gender>"); out.println("</person>"); out.println("<book id=1>"); out.println("<bookid>11</bookid>"); out.println("<title>设计模式</title>"); out.println("</book>"); ... out.println("</root>");
3、在页面中对XML代码进行解析 全部代码如下
<script language="JavaScript"> function getNodeValue(root,NodeName) { try{ var node = root.selectSingleNode(NodeName); return node.text; }catch(e){ return ""; } }
function getPersonNodeAttributes(XmlDoc) { var text = ""; var obj = XmlDoc.getElementsByTagName("person"); for (var i=0;i<obj.length;i++) { var node = obj.item(i); var id=node.getAttribute("id"); var name=getNodeValue(node,"name"); var gender=getNodeValue(node,"gender"); text = "id = " + id + ",name = " + name + ",gender = " + gender; alert(text); } return text; }
function getBookNodeAttributes(XmlDoc) { var text = ""; var obj = XmlDoc.getElementsByTagName("book"); for (var i=0;i<obj.length;i++) { var node = obj.item(i); var id=node.getAttribute("id"); var bookid=getNodeValue(node,"bookid"); var title=getNodeValue(node,"title"); text = "id = " + id + ",bookid = " + bookid + ",title = " + title; alert(text); } return text; }
//setInterval("checkResult()", 1000);//定时调用checkResult方法取新数据 function checkResult() { var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0"); xmlDoc.async = false; var post="Years=2004-2005&TermID=秋冬"; var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0"); xmlhttp.open("POST", "http://localhost:8088/getData", false); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Length",post.length); xmlhttp.send(post); xmlDoc.loadXML(xmlhttp.responseText); var person = getBookNodeAttributes(xmlDoc); var book = getPersonNodeAttributes(xmlDoc); } </SCRIPT>

|