Ajax局部刷新应用案例---简单登录_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>

时间: 2024-10-26 12:29:20

Ajax局部刷新应用案例---简单登录_AJAX相关的相关文章

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

ajax无刷新分页的简单实现_AJAX相关

本文实例为大家分享了ajax无刷新分页的具体代码,供大家参考,具体内容如下 html页 <html> <head> <title></title> <style type="text/css"> table{ border:solid 1px #444; background-color:Aqua;} table td{border:solid 1px #444;} </style> <script src=

Ajax局部刷新应用案例

 Ajax局部刷新在之前的文章中也有介绍过,下面以一个登录的例子为大家介绍下其具体的使用 二话不说了,直接给代码,相信需要的都是代码而不是废话一堆--  1.java代码:   代码如下: package tt;    import java.io.IOException;  import java.io.PrintWriter;    import javax.servlet.ServletException;  import javax.servlet.http.HttpServlet; 

jquery ajax 局部刷新小案例

 这篇文章主要是对jquery ajax 局部刷新的小案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript">  function getOtherMessag

AJAX的原理—如何做到异步和局部刷新【实现代码】_AJAX相关

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新.那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的. 详解: 1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等.当XMLHttpRequest

ajax请求json数据案例详解_AJAX相关

今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求. 如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class="conSixmap"> <div class="name conmap01" data-name="beimeizhou"> <a href="javascript:void(0)">北美洲<

jquery ajax 局部刷新小案例_jquery

复制代码 代码如下: <html><head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> function getOtherMessage(){ $.ajax({ type:"post", url:"${pageConte

PHP+AJAX无刷新实现返回天气预报数据_AJAX相关

用php来写一个天气预报的模块 天气数据是通过采集中国气象网站的.本来中国天气网站也给出了数据的API接口.以下是API的地址.返回的数据格式为json格式. 1. http://www.weather.com.cn/data/sk/101010100.html 2. http://www.weather.com.cn/data/cityinfo/101010100.html 3. http://m.weather.com.cn/data/101010100.html URL中的数字"10101

用Ajax读取xml文件的简单例子_AJAX相关

到此就可以就发送请求读取服务器端的XML数据了,最后要做的就是处理数据了. 关于XMLHttpRequest对象,请参考About XMLHttpRequest Object一文. 看例子: //AjaxDemo.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"