作者:
winner720
鏈接：
http://www3.javaeye.com/blog/237931
發表時間: 2008年09月06日
聲明：本文系JavaEye網站發布的原創博客文章，未經作者書面許可，嚴禁任何網站轉載本文，否則必將追究法律責任！
首頁代碼如下 index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.html</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<form action="/AjaxTest/Test">
<p><!-- 提交后的號碼會發到servlet，然后顯示在下面的div標簽里面 -->
輸入電話號碼:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<div id="address"></div>
<p>
下面會輸出servlet里面的文字:
</p>
<p>
<textarea name="order" rows="6" cols="50" id="order"></textarea>
</p>
<p>
<input type="submit" value="提交" id="submit" />
</p>
</form>
</body>
</html>
index.js javascript文件
var request = false;
try
{// 根據瀏覽器的不同創建XMLHttpRequest對象
request = new XMLHttpRequest ();
} catch ( trymicrosoft )
{
try
{
request = new ActiveXObject ( "Msxml2.XMLHTTP" );
} catch ( othermicrosoft )
{
try
{
request = new ActiveXObject ( "Microsoft.XMLHTTP" );
} catch ( failed )
{
request = false;
}
}
}
if ( ! request )
alert ( "Error initializing XMLHttpRequest!" );
/**
* 在鼠標離開控件的時候在后臺和服務器連接，異步提交
*/
function getCustomerInfo ()
{
var phone = document.getElementById ( "phone" ).value;
var url = "Test?phone=" + escape ( phone );// 請求地址
request.open ( "GET" , url , true );// 以GET方式請求url，true表示請求是異步的
request.onreadystatechange = updatePage;// 服務器返回成功后的回調函數
request.send ( null );
}
/**
* 服務器返回后調用的回調函數
*/
function updatePage ()
{
if ( request.readyState == 4 )
{
if ( request.status == 200 )
{// responseText得到返回文本字符串
var response = request.responseText.split ( "|" );
alert ( unescape ( response ) );
document.getElementById ( "order" ).value = response[0];
document.getElementById ( "address" ).innerHTML = response[1]
.replace ( /\n/g , "" );
} else
alert ( "status is " + request.status );
}
}
后臺servlet文件：Test.java
package com.egt.ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @Author 曹斌 Sep 6, 2008
* @Email caobin.cn@Gmail.com
* @Blog www3.JavaEye.com
*
* @Description
*/
public class Test extends HttpServlet
{
public Test ()
{
super();
}
public void destroy ()
{
super.destroy();
}
public void doGet ( HttpServletRequest request ,
HttpServletResponse response ) throws ServletException ,
IOException
{
//這里要設置字符編碼格式，否則GET方式要出現亂碼。
response.setContentType("text/HTML;charset=GBK");
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
out.println("servlet里面的GET方法文字|"+request.getParameter("phone"));
out.flush();
out.close();
}
public void init () throws ServletException
{
}
}
已有 0 人發表留言，猛擊->>這里<<-參與討論
JavaEye推薦
文章來源:
http://www3.javaeye.com/blog/237931
posted on 2008-09-10 14:55
清風颯影 閱讀(508)
評論(1) 編輯 收藏