AJAX登陆实例!

最新推荐文章于 2020-09-19 10:25:23 发布

最新推荐文章于 2020-09-19 10:25:23 发布 · 194 阅读

文章标签：

#Ajax #Servlet #Java #XML #Cache

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Ajax实现客户端与服务器端交互的例子。通过一个简单的登录检测功能，展示了如何利用Ajax发送异步请求到服务器端的Servlet，并接收处理后的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=red]index.jsp文件:[/color][code]
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<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);
}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>
</form>
</body>
</html>
[/code]

[color=red]TestA.java这是一个Servlet文件:[/color]
[code]
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 {

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("and4walker")){
out.println("<content>"+"对不起,此名已经注册"+"</content>");
}else{
out.println("<content>"+"可以注册"+"</content>");
}
out.println("</pront>");
out.close();
}

}

[/code]

[color=red]web.xml文件:[/color]
[code]
<?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>
</web-app>

[/code]