Ajax局部刷新应用案例---简单登录

前端技术 2023/09/02 AJAX
二话不说了，直接给代码，相信需要的都是代码而不是废话一堆……
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>

本文地址：https://www.stayed.cn/item/5499

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案