原文http://blog.csdn.net/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都能运行
但是以为会很难,但实际做了才知道,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都能运行