Ajax局部刷新应用案例---简单登录
程序员文章站
2023-10-27 21:10:10
二话不说了，直接给代码，相信需要的都是代码而不是废话一堆…… 1.java代码： 复制代码 代码如下: package tt; import java.io.ioexcep...
二话不说了，直接给代码，相信需要的都是代码而不是废话一堆……
1.java代码：
package tt;
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 testa extends httpservlet {
private static final long serialversionuid = -7999241892841130740l;
protected void doget(httpservletrequest request,
httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
string name = request.getparameter("name");
response.setcontenttype("text/xml; charset=utf-8");
response.setheader("cache-control", "no-cache");
printwriter out = response.getwriter();
out.println("<pront>");
if (name.equals("yangjinde")) {
out.println("<content>" + "对不起,'yangjinde'此名已经注册" + "</content>");
} else {
out.println("<content>" + "可以注册哦" + "</content>");
}
out.println("</pront>");
out.close();
}
}
2.jsp代码：
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";
%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<base href="<%=basepath%>">
<title>my jsp 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<script>
//设一个变量
var xmlhttpreq=false;
//创建一个xmlhttprequest对象
function createxmlhttprequest(){
if(window.xmlhttprequest){ //mozilla
xmlhttpreq=new xmlhttprequest();
}
else if(window.activexobject){
try{
xmlhttpreq=new activexobject("msxml2.xmlhttp");
}catch(e){
try{
xmlhttpreq=new activexobject("microsoft.xmlhttp");
}catch(e){}
}
}
}
//发送请求函数
function send(url){
createxmlhttprequest();
xmlhttpreq.open("get",url,true);
xmlhttpreq.onreadystatechange=proce; //指定响应的函数
xmlhttpreq.send(null); //发送请求
}
function proce(){
if(xmlhttpreq.readystate==4){ //对象状态
if(xmlhttpreq.status==200){//信息已成功返回，开始处理信息
var res=xmlhttpreq.responsexml.getelementsbytagname("content")[0].firstchild.data;
window.alert(res);
document.getelementbyid("data").innerhtml = res;
document.getelementbyid("name").value = res;
}else{
window.alert("不好意思，所请求的页面有异常");
}
}
}
//身份验证
function check(){
var name=document.getelementbyid("name").value;
if(name==""){
alert("请输入内容哦");
return false;
}
else{
send('login?name='+name);
}
}
</script>
</head>
<body>
<form action="login" method="post">
<tr><td>姓名: <input id="name" type="text" name="name"/>
<input type="button" value="点我试试看" onclick="check()"/>
</td>
</tr>
<tr><td><div id="data">等下我会变哦！！</div></td></tr>
</form>
</body>
</html>
3.xml配置文件代码：
<?xml version="1.0" encoding="utf-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"
xsi:schemalocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>tt.testa</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
1.java代码：
复制代码 代码如下:
package tt;
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 testa extends httpservlet {
private static final long serialversionuid = -7999241892841130740l;
protected void doget(httpservletrequest request,
httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
string name = request.getparameter("name");
response.setcontenttype("text/xml; charset=utf-8");
response.setheader("cache-control", "no-cache");
printwriter out = response.getwriter();
out.println("<pront>");
if (name.equals("yangjinde")) {
out.println("<content>" + "对不起,'yangjinde'此名已经注册" + "</content>");
} else {
out.println("<content>" + "可以注册哦" + "</content>");
}
out.println("</pront>");
out.close();
}
}
2.jsp代码：
复制代码 代码如下:
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";
%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<base href="<%=basepath%>">
<title>my jsp 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<script>
//设一个变量
var xmlhttpreq=false;
//创建一个xmlhttprequest对象
function createxmlhttprequest(){
if(window.xmlhttprequest){ //mozilla
xmlhttpreq=new xmlhttprequest();
}
else if(window.activexobject){
try{
xmlhttpreq=new activexobject("msxml2.xmlhttp");
}catch(e){
try{
xmlhttpreq=new activexobject("microsoft.xmlhttp");
}catch(e){}
}
}
}
//发送请求函数
function send(url){
createxmlhttprequest();
xmlhttpreq.open("get",url,true);
xmlhttpreq.onreadystatechange=proce; //指定响应的函数
xmlhttpreq.send(null); //发送请求
}
function proce(){
if(xmlhttpreq.readystate==4){ //对象状态
if(xmlhttpreq.status==200){//信息已成功返回，开始处理信息
var res=xmlhttpreq.responsexml.getelementsbytagname("content")[0].firstchild.data;
window.alert(res);
document.getelementbyid("data").innerhtml = res;
document.getelementbyid("name").value = res;
}else{
window.alert("不好意思，所请求的页面有异常");
}
}
}
//身份验证
function check(){
var name=document.getelementbyid("name").value;
if(name==""){
alert("请输入内容哦");
return false;
}
else{
send('login?name='+name);
}
}
</script>
</head>
<body>
<form action="login" method="post">
<tr><td>姓名: <input id="name" type="text" name="name"/>
<input type="button" value="点我试试看" onclick="check()"/>
</td>
</tr>
<tr><td><div id="data">等下我会变哦！！</div></td></tr>
</form>
</body>
</html>
3.xml配置文件代码：
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"
xsi:schemalocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>tt.testa</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
下一篇： 夏季宝宝防暑的小妙招