`

利用AJax方式提交和Webservice完成页面输入汉字简体字回显繁体字

阅读更多

最近一直在学习新的东西,当然也在回顾一些老的知识点。本博客涉及的主要是webservice的调用和Ajax底层的知识的应用,做了一个在页面输入中文的简体字,Ajax方式异步的调用后台webservice服务的小工程,仅作为老知识的回顾和新知识的学习,当然我主要是为了学习webservice的调用,好了,废话不多说,直接上代码吧。

 

首先index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">

<title>简化字转换为繁体字</title>

<script>
	function showResult(transferContent) {

		//声明一个XMLHttpRequest对象
		var xmlhttp;

		//var transferContent = document.getElementById("txt1").value();

		//重置显示的区域
		if (transferContent.length == 0) {
			document.getElementById("transResult").innerHTML = "";
			return;
		}

		//根据浏览器的对象不同,初始化AJAX对象
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		//设置回调函数,当发送的异步请求返回时调用的方法
		xmlhttp.onreadystatechange = function() {
			//alert(xmlhttp.readyState + '  ' + xmlhttp.status);
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("transResult").innerHTML = xmlhttp.responseText;
			}
		};

		//GET 方式,但是在此时不适用,因为我要提交的有汉字,GET提交会乱码的
		/* var date = new Date();
		
		xmlhttp
				.open(
						"GET",
						"http://localhost:8080/ToolsForSimpleToTraditional/simple2traditional?transferContent="
								+ transferContent + "&date=" + date, true); 
		xmlhttp.send();*/

		//POST 方式
		xmlhttp
				.open(
						"POST",
						"http://localhost:8080/ToolsForSimpleToTraditional/simple2traditional",
						true);

		//在提交方式是POST的时候,这一句非常的重要!!!!(作者就在学习的时候还没有在这个坑到,没有想到写博客的竟然栽倒了。。。)
		xmlhttp.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		xmlhttp.send("transferContent=" + transferContent);
	}
</script>

</head>
<body>

	<h3>Start typing a name in the input field below:</h3>

	<form action="url">
		Simple Chinese: <input type="text" id="txt1"
			onblur="showResult(this.value)" />
	</form>
	<p>
		Traditional Chinese: <span id="transResult"></span>
	</p>

</body>
</html>

 

接着后台的Servlet,就一个简单的servlet,所以就直接写了。

package com.fit.test01;

import java.io.IOException;
import java.io.OutputStream;
import java.io.OutputStreamWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class SimpleToTraditionalServlet
 */
public class SimpleToTraditionalServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public SimpleToTraditionalServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		// System.out.println("----------------------------------------");
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");

		String param = request.getParameter("transferContent");
		System.out.println("---------------------" + param);
		String result = "";

		try {
			result = new Simple2TraditionalServiceImpl()
					.getTraditionalChinese(param);
		} catch (Exception e) {
			e.printStackTrace();
		}

		OutputStream os = response.getOutputStream();

		OutputStreamWriter osw = new OutputStreamWriter(os, "utf-8");

		osw.write(result);

		osw.flush();

		osw.close();

		// System.out.println("===================================" + result);
	}

}

 

后台调用Webservice的service,(当然我直接用了一个网站提供的Webservice服务,主义此网站提供的服务仅供学习使用,不能作为商业用途。)

package com.fit.test01;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.net.URL;
import java.net.URLConnection;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;

import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

public class Simple2TraditionalServiceImpl {

	private String buildSOAPString(String content) {
		StringBuilder sb = new StringBuilder();

		sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>")
				.append("<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">")
				.append("<soap:Body>")
				.append("<toTraditionalChinese xmlns=\"http://webxml.com.cn/\">")
				.append("<sText>").append(content).append("</sText>")
				.append("</toTraditionalChinese>").append("</soap:Body>")
				.append("</soap:Envelope>");

		return sb.toString();
	}

	private InputStream sendSOAPMessage(String content) throws IOException {

		String soapMessage = this.buildSOAPString(content);
		URL url = new URL(
				"http://webservice.webxml.com.cn/WebServices/TraditionalSimplifiedWebService.asmx");

		URLConnection conn = url.openConnection();

		conn.setUseCaches(false);
		conn.setDoInput(true);
		conn.setDoOutput(true);

		conn.setRequestProperty("Content-Type", "text/xml; charset=utf-8");
		conn.setRequestProperty("Content-Length",
				String.valueOf(soapMessage.length()));
		conn.setRequestProperty("SOAPAction",
				"http://webxml.com.cn/toTraditionalChinese");

		OutputStream os = conn.getOutputStream();

		OutputStreamWriter osw = new OutputStreamWriter(os, "utf-8");

		osw.write(soapMessage);
		osw.flush();

		osw.close();

		InputStream is = conn.getInputStream();

		return is;

	}

	public String getTraditionalChinese(String content) throws Exception {

		DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();

		DocumentBuilder builder = factory.newDocumentBuilder();

		InputStream is = null;
		String result = "";
		try {
			is = sendSOAPMessage(content);

			Document doc = builder.parse(is);

			NodeList nodeList = doc
					.getElementsByTagName("toTraditionalChineseResult");

			for (int i = 0; i < nodeList.getLength(); i++) {
				Node node = nodeList.item(i);
				result = node.getFirstChild().getNodeValue();
				System.out.println(node.getFirstChild().getNodeValue());
			}
		} catch (Exception e) {
			throw e;
		} finally {
			if (is != null) {
				is.close();
			}
		}

		return result;
	}

	public static void main(String[] args) throws Exception {
		new Simple2TraditionalServiceImpl().getTraditionalChinese("���յ�");
	}
}

 

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>ToolsForSimpleToTraditional</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	<servlet>
		<description></description>
		<display-name>SimpleToTraditionalServlet</display-name>
		<servlet-name>SimpleToTraditionalServlet</servlet-name>
		<servlet-class>com.fit.test01.SimpleToTraditionalServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>SimpleToTraditionalServlet</servlet-name>
		<url-pattern>/simple2traditional</url-pattern>
	</servlet-mapping>
</web-app>

 

附件为全部的工程代码,下载下来导入到Eclipse中可以直接在tomcat中跑起来,不用做什么配置,也不依赖于其他jar包等。

 

 运行页面的结果如下图:


 

  • 大小: 4.1 KB
分享到:
评论

相关推荐

    WebService和Ajax总结

    **WebService和Ajax总结** 在IT领域,WebService和Ajax是两种重要的技术,它们分别在Web应用程序的交互和用户体验提升上发挥了重要作用。本篇文章将全面探讨这两种技术的原理、应用及其在.NET环境下的实现。 **一...

    ajax和JavaScript分别调用Webservice实例

    本压缩包包含的三个文档详细讲解了如何利用Ajax和JavaScript来调用WebService,这对于理解这两种技术的集成至关重要。 首先,让我们了解一下Ajax。Ajax是一种在不刷新整个网页的情况下,能够更新部分网页内容的技术...

    ajax异步调用webservice实例

    本实例将重点讲解如何利用AJAX进行异步调用WebService,为用户提供无缝的交互体验。 一、AJAX基础 1. AJAX的核心是XMLHttpRequest对象,它提供了与服务器通信的能力,可以在后台与服务器进行数据交换。 2. AJAX通过...

    jQuery使用Ajax方法调用WebService.doc

    ### jQuery使用Ajax方法调用WebService知识点详解 #### 一、简介 在Web开发领域中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现页面局部刷新等功能,极大地提升了用户体验。结合jQuery这一流行的...

    jQuery使用Ajax方法调用WebService

    总结来说,jQuery的Ajax方法提供了一种灵活的方式来调用WebService,实现在不刷新页面的情况下获取和更新数据。理解并熟练运用这些方法,能够提高你的Web应用性能,提升用户体验。在实际项目中,应根据具体需求选择...

    使用Ajax和WebService重构网上书店AjaxWebService

    本篇文章将详细探讨如何利用Ajax和WebService来重构一个网上书店系统,使其更具效率和用户友好性。 Ajax的核心在于提供异步数据交换,使得网页无需刷新即可更新部分内容。通过JavaScript发送HTTP请求到服务器,获取...

    ajax跨域请求WebService.asmx

    【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景,主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...

    利用ajax和WebService实现的无刷新三级联动源码

    【标题】"利用ajax和WebService实现的无刷新三级联动源码"揭示了这个项目的核心技术,即使用Ajax和WebService来创建一个动态、无需刷新页面的三级联动效果。这是一个常见的前端与后端交互方式,用于提高用户体验,...

    基于 AJAX和Webservice 的长轮询方式ServerPush技术模拟

    **基于 AJAX 和 Webservice 的长轮询方式 ServerPush 技术模拟** 在现代网页应用中,实时性成为了不可或缺的需求,例如股票更新、聊天室、在线游戏等场景。传统的 HTTP 协议是基于请求-响应模式的,即客户端发起...

    利用ajax和WebService实现的无刷新三级联动源码.zip

    在这个"利用ajax和WebService实现的无刷新三级联动源码"中,我们可以深入理解如何结合这两种技术来创建高效、流畅的用户体验。 1. **Ajax(Asynchronous JavaScript and XML)**: Ajax的核心是通过JavaScript异步...

    C#调用WebService实现的Ajax电子相册

    总结起来,这个C#调用WebService实现的Ajax电子相册项目充分利用了XML的数据存储能力,WebService的跨平台通信特性,Ajax的页面无刷新功能,以及Jquery的DOM操作和动画功能。这些技术的结合,使得电子相册在保持高...

    ajax 调用WebService 很简单的demo

    总之,Ajax调用WebService是Web开发中的重要技巧,它使Web应用能够无刷新地获取和提交数据,提高了用户交互体验。通过理解和实践这个“ajax 调用WebService 很简单的demo”,开发者可以快速掌握这一技能,并将其应用...

    ajax+webservice

    通过查看这些文件,我们可以深入理解Ajax与WebService的集成应用,学习如何在实际项目中实现动态页面和后端服务的高效交互。 总结来说,Ajax和WebService是Web开发中的重要技术,它们的结合使用能提升网页的交互性...

    ajax调用webservice_demo

    本示例着重讲解如何利用Ajax技术调用Web Service,并将返回的数据动态展示在网页上。 首先,我们需要了解Ajax,即异步JavaScript和XML(Asynchronous JavaScript and XML)。尽管其名称中包含“XML”,但实际应用中...

    ajax跨域请求调用webservice接口+视频教程

    【标题】"Ajax跨域请求调用WebService接口"是一个关键的技术点,主要涉及到Web开发中的异步数据交互和跨域安全策略。在Web应用程序中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况...

    ajax+WebService应用实例

    例如,一个简单的应用实例可能是用户输入表单信息,Ajax发送这些数据到WebService,WebService验证数据并返回结果,Ajax接收到结果后更新页面显示,整个过程用户几乎感觉不到页面刷新。 在提供的"AjaxServer"文件中...

    ajax+webservice跨域实现文件上传

    【Ajax+WebService跨域实现文件上传】是一种在Web应用程序中常用的技术组合,它允许前端页面通过Ajax异步地与远程Web服务进行通信,同时解决跨域限制,实现文件的上传功能。这一技术主要涉及到以下几个核心知识点: ...

    ajax调用webservice.rar

    总的来说,Ajax调用Web Service是Web应用程序与远程服务交互的一种有效方式,它提高了页面的响应速度,减少了用户等待时间。理解并熟练掌握这一技术对于开发交互性强、响应快的Web应用至关重要。

    基于HTML5_Ajax和WebService的WebGIS研究_徐卓揆

    基于HTML5_Ajax和WebService的WebGIS研究_徐卓揆 论文

Global site tag (gtag.js) - Google Analytics