初步体验Ajax异步提交
首页代码如下 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;document.getElementById ( "address" ).innerHTML = response.replace ( /\n/g , "" );} elsealert ( "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 * @Emailcaobin.cn@Gmail.com* @Blog www3.iteye.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{}}
页:
[1]