ajax

         今天第一次注册这个javablog，写个学习笔记，在北京培训的第三个项目drp开始了,今天写该项目第一个版本的第一个模块——用户模块，首先会用到一个设计模式——单例模式，用来生成用户管理员类UserManager的一个instance,采用其中的饿汉式方法，其次用到的是ajax技术用来验证用的信息，下面来根据自己的理解大约介绍一下ajax技术：
                                                                                        Ajax:
  1, 首先ajax是一种综合javascript和xml的技术。
  2. 用来异步传输信息，for example:以往的验证用户信息的技术，都是在用户填完需要填写的信息后将整个页面提交交给后台验证，如有异常就会返回刷新让用户重新填写，这样就会浪费用户的时间等资源，也会使该网站的用量产生消减。当用了ajax以后就不用刷新就可以更新内容，也就是在等待传输的过程中， 用户就可以和系统进行交互，拿上个例子来说，如果当你填写到用户名的时候，如过系统发现你的用户名已经和系统中的重复的话就会在你填写完用户名后给你一个提示，而不用你填完整个页面向信息后在提示你，这样就会让系统更加人性化。
3.ajax的一个主要属性XMLHttpRequest，通过它可以提起和服务器的请求，所以必须首先产生一个XMLHttpRequest对象用来处理事件；
4.一些方法比如open,send在下面的例子中将会提到；
                                                                                
              以下是项目第一版本中的ajax用来验证用户输入的用户代码是否与系统中的已有代码重复的用例：

   首先必须在客户端添加一个事件用来触发我们的验证程序：
      <input name="userId" type="text" class="text1" id="userId"   onblur="validate()"><span id="resText"></span>
然后在javascript中添加以下方法：

var xmlHttp;
 
 function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
  if(window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
   function validate() { //主方法

  createXMLHttpRequest();    //用来创建一个XMLHttpRequest对象
  var userId = document.getElementById("userId").value; //得到用户输入的userid
  var url = "user_validate.jsp?userId=" + userId + "&timestamp=" + new Date().getTime(); //将用户填写信息交到user_validate.jsp用于判断用户是 否重复，其中timestamp用于消除缓存，也可一在user_validate.jsp页面添加以下代码用于缓存：
/*
 response.setContentType("text/xml");
 response.setHeader("Cache-Control", "no-store"); //HTTP1.1 
 response.setHeader("Pragma", "no-cache"); //HTTP1.0
 response.setDateHeader("Expires", 0);
   */
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange=callback;  //calllback方法用来将反馈信息出入到页面，给用户提示
  xmlHttp.send(null);
 }
function callback() {
     if (xmlHttp.readyState == 4) { //判断页面是否处理完毕
     if (xmlHttp.status == 200) { //判断user_validate.jsp页面是否找到 ，200代表页面一找到，如果没找到则返回404，你可以在这alert  (xmlHttp.status )来查看代码；
   var resTextSpan = document.getElementById("resText"); //根据id得到span 区域用于输出提示信息
   resTextSpan.innerHTML = "<font color='red'>" +     
              xmlHttp.responseText + "</font>"; //在span输出提示信息，其中  xmlHttp.responseText 用来得到user_validate.jsp 的out.println信息
     }
    }
 
下面是user_validate.jsp：//可以写成servlet体现mvc结构。

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ page import="com.bjsxt.drp.sysmgr.*" %>   
<%

 /*
 //可以采用清除缓存的方法，如下
 response.setContentType("text/xml");
 response.setHeader("Cache-Control", "no-store"); //HTTP1.1 
 response.setHeader("Pragma", "no-cache"); //HTTP1.0
 response.setDateHeader("Expires", 0);
   */

 String userId = request.getParameter("userId");
 if (UserManager.getInstance().findUserById(userId) != null) {//其中findUserById(userId)是javabeen中的一个函数findUserById(String userId)方法
  out.println("用户代码[" + userId + "]存在!");
 }
 %>   
以下是所用到的javabeen类://只是一部分其中有一个User类没有贴出来 ，里面就是一些成员变量和get,set方法
import java.sql.*;
private static UserManager instance = new UserManager();
 
 //私有的构造函数
 private UserManager() {
 }
 
 /**
  * 入口点方法
  * @return UserManager实例
  */
 public static UserManager getInstance() {
  return instance;
 }
public User findUserById(String userId) {
  String sql = "select * from t_user where user_id=?";
  Connection conn = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
  User user = null;
  try{
   conn = DB.getConn();
   pstmt = conn.prepareStatement(sql);
   pstmt.setString(1, userId);
   rs = pstmt.executeQuery();
   if (rs.next()) {
    user = new User();
    user.setUserId(rs.getString("user_id"));
    user.setUserName(rs.getString("user_name"));
    user.setPassword(rs.getString("password"));
    user.setContactTel(rs.getString("contact_tel"));
    user.setEmail(rs.getString("email"));
    user.setCreateDate(rs.getTimestamp("create_date"));
   }
  }catch(SQLException e) {
   e.printStackTrace();
  }finally {
   DB.close(rs);
   DB.close(pstmt);
   DB.close(conn);
  }
  return user;
 }

这就是整个例子;
    总结它的流程：
       用户触发一个事件交给validate() 处理，在validate()方法里首先创建一个 XMLHttpRequest对象用来与服务器打交道，然后是得到用户输入的信息交给user_validate.jsp处理（因为要和数据库打交道所以新建一个页面user_validate.jsp）user_validate.jsp得到用户输入的信息，与数据库中的信息进行验证，如果数据库中有这个用户就输出（用户代码[" + userId + "]存在!");然后由xmlHttp.responseText 方法得到user_validate.jsp 的out.println信息，然后给用户打印出来。

整个过程就是这样。明天写分页组件。tomorrow  is comming!! 
  第一次在这写，对这个编辑器不是很熟悉，没有对代码进行高亮显示，见谅！！

评论

1 楼 chenzheng8975 2012-08-02