Ajax简单实例

原文http://blog.youkuaiyun.com/kingbug/archive/2005/10/06/495914.aspx

 

最初看到ajax感觉好惊喜啊，不用刷新全部页面，就可以更改局部页面数据。真的很方法

但是以为会很难，但实际做了才知道，AJAX很简单。至少入门很简单 如果你会ajax那就不要看了。更不要骂我。比我牛的人太多了

互相交流，学习。MSN:whw_dream(AT)hotmail.com

首先是jsp页面和脚本，为了方便写在一个里面

这是一个很常见的检测用户名是否存在的功能

这里用的是struts

<% @ page contentType = " text/html; charset=GBK "   %>
< html >
< head >
< title >
ajax
</ title >
</ head >
< body bgcolor = " #ffffff " >
< h1 >
< input name = " username "  type = " text "  maxlength = " 20 "   />
< input id = " chk-name-btn "  type = " button "  value = " 检测帐号 "  onclick = " testName('<%=request.getContextPath()%>') "   />
< div id = " view_name " ></ div >
</ h1 >
</ body >
</ html >
< script language = " javascript " >
   if  (window.ActiveXObject  &&   ! window.XMLHttpRequest)  ... {
      window.XMLHttpRequest=function() ...{
      return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
   };
  } // 取得XMLHttpRequest对象

function  testName(path) ... {

//path是取得系统路径
                var view_name=document.getElementById("view_name");
      var req=new XMLHttpRequest();
      if (req) ...{
          req.onreadystatechange=function() ...{
           if (req.readyState==4 && req.status==200) ...{//判断状态，4是已发送，200已完成
                 if(req.responseText==0)...{
                 view_name.style.color='green';
                view_name.innerHTML='该用户名可以正常使用';
                 }else if(req.responseText==1)...{
                view_name.style.color='red';
                   view_name.innerHTML='该用户名已经被使用';
                       }else...{
                     view_name.style.color='red';
                     view_name.innerHTML='该用户名含有非法字符！';
                     }
                 }
         }
                        req.open('POST', path+'/ajax.do');//struts

                        //req.open('POST', path+'/ajax.servlet');//servlet

                        //req.open('POST', path+'/ajax.action');//webwork


                          req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                          req.send("");//发送参数如果有参数req.send("username="+user_name);用request取得
      }
}
</ script >

这个jsp页面并没有取得用户名，就是演示一下。还有 < div > 可以换span，具体作用问美工吧。

接受ajax请求的action。

import org.apache.struts.action. * ;
import javax.servlet.http. * ;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;

/**/ /**
 * <p>Title:AjaxAction </p>
 */

public class AjaxAction extends Action  ... {
  public ActionForward execute(ActionMapping mapping,
                               ActionForm form,
                               HttpServletRequest request,
                               HttpServletResponse response)
      throws Exception ...{
    PrintWriter out = response.getWriter();
    out.print(1);//ajax取得都是字符的输出。如果数据量大的话，还可以用xml来发送和接受
    return null;
  }
}

struts - config.xml

     < action type = " test.whw.upload.AjaxAction "  validate = " false "  scope = " request "   path = " /ajax " />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－

如果是servlet

web.xml

  < servlet >
   < servlet - name > AjaxServlet  </ servlet - name >
   < servlet - class > servlet.AjaxServlet  </ servlet - class >
  </ servlet >
     < servlet - mapping >
         < servlet - name > AjaxServlet  </ servlet - name >
         < url - pattern >/ AjaxServlet .servlet </ url - pattern >
     </ servlet - mapping >

AjaxServlet.java

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;


public class AjaxServlet extends HttpServlet  ... {
 Logger log = Logger.getLogger(this.getClass());
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException,IOException ...{
  response.setContentType("text/xml; charset=GBK");
  PrintWriter out = response.getWriter();
    out.print(2);
   }
 }
  // Process the HTTP Post request
 public  void  doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException  ... {
  doGet(request, response);
 }

  // Process the HTTP Put request
 public  void  doPut(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException  ... {
 }

  // Process the HTTP Delete request
 public  void  doDelete(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException  ... {
 }

  // Clean up resources
 public  void  destroy()  ... {
 }
}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

如果是webwork

xwork.xml

    < action name = " ajax "  class = " com.whw.upload.action.webwork.AjaxAction "  method = " ajax " />


AjaxAction.java

import java.io.PrintWriter;

public class AjexAlbumAction extends ActionSupport implements Action ... {

  public void ajax()throws IOException ...{
             PrintWriter pw = ServletActionContext.getResponse().getWriter();
            ServletActionContext.getResponse().setContentType("text/html;charset=GBK");
            pw.print(1);
            pw.close();
  }


}

本例子在winXPsp2、JB9、Eclipse3，j2sdk1. 4.1  、Tomcat5、Tomcat4.1都能运行