太久没有研究过新技术了.作为一个程序员,我觉得很惭愧.老早就想看看关于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 -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./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技术,完全没必要这样了.
|