随笔-50  评论-55  文章-8  trackbacks-0
       刚开始学习AJAX,其实没什么难的,主要的思想就是异步传输,不用整个刷新页面,就是JAVASCRIPT技术,新瓶装老酒罢了;一般分三个步骤走:1、Jsp页面 2、Servlet 3、Javascript
Step1   Create a page:  login.jsp
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Login
</title>
<script src="login.js" type="text/javascript"></script>
</head>
<body bgcolor="#ffffff">
<h1 align="center">
Login
</h1>
<div>
  <table>
    <tr><td>Username:</td>
    <td><input id="username" type="text"/></td>
    </tr>
    <tr><td>Password:</td>
    <td><input id="password" type="text"/></td>
  <td id="user"></td></tr>
  </table>
<br/>
<input id="submit" type="button" value="Submit" onclick="linkServer();">
<input type="button" value="Reset">
  </div>
</body>
</html>
这里不用Form,用JS。

Step2  Create a javascript:  login.js

var xmlHttp;
function linkServer(){
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null){
     alert ("Your browser does not support AJAX!");
     return;
     }
    var url="login"+"?"+"username="+document.getElementById("username").value+
    "&"+"password="+document.getElementById("password").value;

    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.send(null);
}
function stateChanged() {

  if (xmlHttp.readyState==4){
  alert("xmlState:"+xmlHttp.status);
   alert("xmlHttp.responseText:"+xmlHttp.responseText);
     if(xmlHttp.responseText=="DONE"){
     document.getElementById("user").innerHTML="(登录成功)";
  }
else
    document.getElementById("user").innerHTML="(用户名或密码错误)";
}
}

//获得HTTP对象
function GetXmlHttpObject(){
  var xmlHttp=null;
  try{
     xmlHttp=new XMLHttpRequest();
      }catch (e){
       try{
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e)
       {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}


Step3 Create a java servlet: Login.java

package com.service;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class Login extends HttpServlet {
    private static final String CONTENT_TYPE = "text/html; charset=GBK";


    //Process the HTTP Get request
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        String u1 = request.getParameter("username");
        String p1 = request.getParameter("password");
        System.out.println("u1:" + u1);
        System.out.println("u2:" + p1);

        response.setContentType(CONTENT_TYPE);
        PrintWriter out = response.getWriter();
//下面就可以数据库查询,这里简单的作个判断
        if((u1!=null&&u1.equals("hello"))&&((p1!=null&&p1.equals("123456"))))
        out.print("DONE");
    else{
        out.print("FAIL");
    }
        out.close();

    }

    //Process the HTTP Post request
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        doGet(request, response);

    }
}

posted on 2007-09-12 11:51 蒋家狂潮 阅读(211) 评论(0)  编辑  收藏 所属分类: JWeb

只有注册用户登录后才能发表评论。


网站导航: