ajax从始到终例子

 原理不说了。

两个javascript脚本

一个处理的servlet作为父类

后台的java处理不在讨论之列。

设计:jsp+javascript+servlrt+html

业务：向数据库中增加一条数据，成功或者失败在页面上提示：

流程：点击页面的增加按钮触发adddate()事件，组合xml标准字符串格式传给后台servlet，经servlet处理后返回以xml格式的字符串处理结果。

特点：

1、没有使用其他的xml解析器，使用虚拟机的解析器和浏览器内置的解析器。

2、实现了页面无闪的动态操作。

3、页面使用post提交、xml字符流数据交换。

难点：

1、国际化处理，注意代码中关于前台和后台字符流处理的前后要做的事件。

2、servlet父类。

公用的servlet父类：

package servlet.ajax;
import java.io.BufferedReader;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.UnsupportedEncodingException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerConfigurationException;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import org.w3c.dom.Document;
public  class AJAXServlet extends HttpServlet
{
 /**
  *
  */
 private static final long serialVersionUID = 1L;
 /**
  * 读取request中的体转化为字符串
  * @param request
  * @return
  * @throws IOException
  */
 protected String readXMLFromRequestBody(HttpServletRequest request)
    {       
     StringBuffer xml = new StringBuffer();
     try
     {           
      //设置编码方式，非常重要。post默认使用utf-8传送。
      request.setCharacterEncoding("UTF-8");
      BufferedReader reader = request.getReader();           
      String line = null;           
      while((line = reader.readLine()) != null)
      {               
       xml.append(line);           
      }       
     }      
     catch (UnsupportedEncodingException e1)
     {   
   e1.printStackTrace();
  } catch (IOException e1)
     { 
   e1.printStackTrace();
  }
  String gb_xml=xml.toString();
  //System.out.println(gb_xml);
     return gb_xml;   
    }
  /**
  * 把Document转化为字符串
  * @param xmlDoc
  * @return
  */
 protected String prepareXMLResponse(Document xmlDoc)
 {       
      TransformerFactory  tf  =  TransformerFactory.newInstance();
      Transformer t=null;
      ByteArrayOutputStream  bos=null;
   try
   {
    t = tf.newTransformer();
       t.setOutputProperty("encoding","GB2312");//解决中文问题，试过用GBK不行
       bos  =  new  ByteArrayOutputStream();
       t.transform(new DOMSource(xmlDoc), new StreamResult(bos));   
    
   } catch (TransformerConfigurationException e)
   {
    e.printStackTrace();
   } catch (TransformerException e)
   {
    e.printStackTrace();
   }
      return bos.toString(); 
 }           
}

javascript:

   //增加事件
   function adddate()
   {
           //要传送的xml数据
           var xml = "<?xml version=/"1.0/" encoding=/"GB2312/"?>";
           xml=xml+"<root>";
           
           xml=xml+"<safetitle>";
           xml=xml+document.getElementById("safetitle").value;
           xml=xml+"</safetitle>";
           
           xml=xml+"<grade>";
           xml=xml+document.getElementById("grade").value;
           xml=xml+"</grade>";           
           
            xml=xml+"<safecontent>";
           xml=xml+document.getElementById("safecontent").value;
           xml=xml+"</safecontent>";           
           
            xml=xml+"<starttime>";
           xml=xml+document.getElementById("starttime").value+" "+document.getElementById("startour").value;
           xml=xml+"</starttime>"; 
                      
            xml=xml+"<endtime>";
           xml=xml+document.getElementById("endtime").value+" "+document.getElementById("endour").value;
           xml=xml+"</endtime>";
           
            xml=xml+"<author>";
           xml=xml+document.getElementById("author").value;
           xml=xml+"</author>";            
                      
           xml=xml+"</root>";
    if(window.XMLHttpRequest)
    {        http_request = new XMLHttpRequest();   
    }else if(window.ActiveXObject)
    {       
      http_request = new ActiveXObject("Microsoft.XMLHTTP");   
    }
    http_request.onreadystatechange = readddate;   
    http_request.open("POST", '<bean:write name="host"></bean:write>/SafeeditAdddateServlet');   
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    http_request.send(xml);      
   }
   function readddate()
   {
       var xmlResponse=null;
       if(http_request.readyState==4)
       {
           if(http_request.status==200)
           {
               xmlResponse = http_request.responseXML;
             var alert_cons = xmlResponse.getElementsByTagName("alert_con");         
               for(var i = 0; i < alert_cons.length; i++)
               {
                   var alert_con = alert_cons[i].childNodes[0].nodeValue;
                   alert(alert_con);
               }
             } }   
   }

业务servlet子类：

package servlet.ajax.report;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.ParserConfigurationException;
import mode.report.SafeeditAdddateBean;
import org.w3c.dom.Document;
import org.xml.sax.SAXException;
import servlet.ajax.AJAXServlet;
public class SafeeditAdddateServlet extends AJAXServlet
{
 private static final long serialVersionUID = 1L;
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException
    {
  String xml=readXMLFromRequestBody(request);
  if(xml!=null)
  {
   try
   {
    
    Document doc=new SafeeditAdddateBean().domtostring(xml);//调用后台处理
    response.setContentType("text/xml;charset=gb2312");
    response.getWriter().print(prepareXMLResponse(doc));
   
   } catch (ParserConfigurationException e)
   {
    e.printStackTrace();
   } catch (SAXException e)
   {
    e.printStackTrace();
   }
  }else
  {
   response.setContentType("text/xml;charset=gb2312");
   response.getWriter().print("<?xml version=/"1.0/" encoding=/"UTF-8/"?> <root><alert_con>没有接受到要保存的数据!!!</alert_con></root>");

  }
    }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException
    {
  doGet(request,response);
    } 
}