XMLHTTP和DOMDocument在WEB應用上的使用問題

  XMLHTTP和DOMDocument在WEB應用上的使用問題     選擇自 rabbitbug 的 Blog

使用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>

作者Blog：http://blog.csdn.net/rabbitbug/