jsp和ajax案例,Ajax+jsp用户登陆例子

用Ajax可以在不刷新整个页面的情况下与服务器动态连接，这里做了个简单小的例子用到了jsp ajax servlet

先创建一个web项目 Login_demo

1.首先写个servlet，用户输入的登陆信息被提交到这里servlet中，对用户输入的信息判断

Loginservlet.java

在web.xml中的配置如下

Loginservlet

com.login.Loginservlet

Loginservlet

/servlet/Loginservlet

——————————————————————

package com.login;

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 Loginservlet extends HttpServlet {

public Loginservlet() {

super();

}

public void destroy() {

super.destroy();

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

response.setCharacterEncoding("gbk");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

String pass = request.getParameter("pass");

//这里为了方便就硬性的给了两个值，当然你可以从数据库中得到

if(name.equals("luofang")&&pass.equals("123")){

out.print("suc");//用户名密码正确就返回字符suc

} else {

out.print("fail");//失败就返回字符fail

}

out.flush();

out.close();

}

public void init() throws ServletException {

// Put your code here

}

}

2.现在来写jsp页面主要就是写javascript

用户登陆

var xmlhttp;

var name;

//创建XMLHttprequest

function createXMLHttpRequest(){

if(window.ActiveXObject){

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}else{

xmlhttp = new XMLHttpRequest();

}

}

function startRequest(){

name=document.getElementById("name").value;

var pass=document.getElementById("pass").value;

if(name==""){

alert("用户名为空！");

return false;

}

if(pass==""){

alert("密码为空！");

return false;

}

var url="http://localhost:8080/Login_demo/servlet/Loginservlet?name="+name+"&pass="+pass;

createXMLHttpRequest();

//设置状态改变时所调用的函数

xmlhttp.onreadystatechange = stateChange ;

//设置对服务器的调用

xmlhttp.open("GET",url,true);

//发送请求

xmlhttp.send(null);

}

function stateChange(){

if(xmlhttp.readyState==4){

if(xmlhttp.status==200){

//做你想在页面上做的事情

//document.getElementById("mess").innerHTML=xmlhttp.responseText;

//如果用户名密码正确返回suc，错误返回fail

if(xmlhttp.responseText=="suc"){

// document.getElementById('login').style.display='none';

//document.getElementById("mess").innerHTML=name+"：您好！";

document.getElementById('login').innerHTML=name+":您好!";

}

else{

alert("登陆失败！用户名或密码不正确！");

document.getElementById("pass").value="";

document.getElementById("name").focus();

}

}

}

}

名字：

密码：

这样就ok了