太久沒有研究過新技術了.作為一個程序員,我覺得很慚愧.老早就想看看關於XMLhttp的技術了,今天總算有點時間,做個一個最初的體驗.馬上就愛上了它.
如果你想不刷新頁面就可以與後台進行數據交互,或者在異構系統之間交換數據,XMLhttp技術是個不錯的選擇.
下面是我的一個很小的體驗程序,參考了csdn網友s_phoenix()給人的回貼.
首先建一個tomcat的web項目.
1:-------index.htm文件內容如下:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.0 Transitional//EN">
<Html>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="KeyWords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="Javascript">
var XML="<root><test>李春雷</test><test>毛澤東</test></root>"
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
var xmlDoc=new ActiveXObject("MsXML2.DOMDocument");
function test(){//客戶端XML的解析
xmlDoc.loadXML(XML);
if(XMLDoc.parseError.line>0){
throw XMLDoc.parseError.reason;
}
var nodes= XMLDoc.selectNodes("/root/test");
for(var i=0;i<nodes.length;i++){
alert(nodes.item(i).text);
}
}
function action(){//客戶端和服務端的通訊
XMLHttp.open("post","http://127.0.0.1:8888/XMLhttpTest/UrlTestServlet",false);
xmlHttp.setRequestHeader("context-type","text/XML;charset=utf-8");
xmlHttp.send(XML);
var showstr=XMLHttp.responseText;
alert(showstr);
}
</script>
<button onclick="test();">查看將要傳輸的XML</button><br/>
<button onclick="action();">朝服務器傳送XML，並接收服務器回應</button>
</BODY>
</Html>
2:------------寫一個servlet: UrlTestServlet.Java
/*
* 創建日期 2005-4-7
*
* TODO 要更改此生成的文件的模板，請轉至
* 窗口 － 首選項 － Java － 代碼樣式 － 代碼模板
*/
package com.lcl;
import Javax.servlet.*;
import Javax.servlet.http.*;
import Java.io.*;
import Java.util.*;
import org.dom4j.io.*;
import org.dom4j.*;
/**
* @author lcl
*
* TODO 要更改此生成的類型注釋的模板，請轉至
* 窗口 － 首選項 － Java － 代碼樣式 － 代碼模板
*/
public class UrlTestServlet extends HttpServlet {
private static final String CONTENT_TYPE = "text/XML;charset=utf-8";
//Initialize global variables
public void init() throws ServletException {
}
//Process the HTTP Get request
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(CONTENT_TYPE);
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
InputStream is=request.getInputStream();
SAXReader reader=new SAXReader();
Document doc=null;
try{
doc=reader.read(is);
} catch(Exception ex){
System.out.println(ex);
}
String[] s= getElementTexts(doc,"test");
out.println("數據交換成功:返回" + s[0] + s[1]);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
private String getElementText(Document doc,String name){
return doc.getRootElement().element(name).getText();
}
private String[] getElementTexts(Document doc,String name){
List l=doc.getRootElement().elements(name);
Iterator it=l.iterator();
List l1=new LinkedList();
while(it.hasNext()){
Element e=(Element)it.next();
l1.add(e.getText());
}
return (String[])l1.toArray(new String[]{});
}
//Clean up resources
public void destroy() {
}
}
3:--------web.XML更改如下(加servlet映射):
<?XML version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://Java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>Welcome to Tomcat</display-name>
<description>
Welcome to Tomcat
</description>
<!-- JSPC servlet mappings start -->
<servlet>
<servlet-name>UrlTestServlet</servlet-name>
<servlet-class>com.lcl.UrlTestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UrlTestServlet</servlet-name>
<url-pattern>/UrlTestServlet</url-pattern>
</servlet-mapping>
<!-- JSPC servlet mappings end -->
<welcome-file-list>
<welcome-file>index.htm</welcome-file>
</welcome-file-list>
</web-app>
好了,啟動tomcat,訪問:http://127.0.0.1:8888/XMLhttpTest/work/(如果你的tomcat端口是8080,就改一下)
看到結果了吧,真的很不錯.不用刷新頁面,就讓htm前台頁面和後台進行了一次數據交換.
你甚至可以在不同的服務器之間進行數據交換,比如一個mis系統,和一個gis系統,想整合成一個系統,原先我們是用了一個frame,左邊的是mis,右邊的是gis,通過Javascript在兩個系統間交換數據.如果用XMLhttp技術,完全沒必要這樣了.