`
Free-man
  • 浏览: 10230 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

AJAX与后台数据交互

    博客分类:
  • AJAX
阅读更多
    AJAX全称“Asynchronous JavaScript and XML”(异步的JavaScript和XML),是一种创建交互式网页开发技术。其实AJAX是JAVASCRIPT、CSS、XML、COM组件等老技术结合起来的一种新的应用,在AJAX应用中,最核心的技术就是XMLHttpRequest,最初叫做XMLHTTP,它与其他技术不用之处,XMLHttpRequest为运行于浏览器中JAVASCRIPT脚本提供了一种页面内与服务器通信的手段。AJAX应用与传统WEB应用的区别如下:1、不刷新整个页面,在页面内与服务器通信;2、使用异步方式与服务器通信,不会打断用户的操作,具有更加迅速的响应能力,得到一种全新而更好的智能体现。
    AJAX与后台数据交互的应用中,根据本人的认识与了解(使用JAVASCRIPT技术),可视为五步走:1、XMLHttpRequest对象的创建;2、注册回调函数;3、设置与配置连接信息;4、发送指令和数据;5、在回调函数中接收服务器返回的数据。下面本人把实践中用户验证的例子与大家分享,可能网上这类例子很多,我还希望大家可以关注下指点指点,共同学习,共同进步。
    本例子使用典型的MVC模式,使用的技术JDBC(MySQL5.0)+Tomcat6.0+JDK1.6+DAO完成。
数据库创建脚本:
CREATE DATABASE Freeman;
USE Freeman;
CREATE TABLE Person
(
  userID VARCHAR(50) ,
  userName VARCHAR(20),
  pwd VARCHAR(35)
);
INSERT INTO Person VALUES ('1','admin','admin');

数据库与表创建成功,下面就创建JAVABEAN模型类(M)(POJO类:Person.java):
package cn.com.freeman.pojo;

public class Person
{
   private String userID;
   private String userName;
   private String pwd;
   ........
   //setter和getter方法省略
}

POJO类创建完成,下面创建数据库连接类(DBConn.java):
package cn.com.freeman.util;

import java.sql.*;

public class DBConn
{
   private final String userName = "root";
   private final String passWord = "123456";
   private final String URL = "jdbc:mysql:///freeman";
   private final String driver = "org.gjt.mm.mysql.Driver";
   private Connection conn = null;

   public DBConn()
   {
      try
      {
         Class.forName(driver);
         this.conn = DriverManager(URL,userName,passWord);
      }
      catch(Exception e)
      {
        e.printStackTrace();
      }
   }
   
   public Connection getConn()
   {
      return this.conn;
   }
}

数据库连接类创建完成,下面开始DAO设计,先创建一个抽象类(PersonDAO.java):
package cn.com.freeman.dao;

import cn.com.freeman.pojo.Person;

public interface PersonDAO
{
   public boolean(Person p);
}

创建实现类(PersonDAOImpl.java):
package cn.com.freeman.impl;

import cn.com.freeman.pojo.Person;
import cn.com.freeman.dao.PersonDAO;
import cn.com.freeman.util.DBConn;
immport java.sql.*;

public interface PersonDAOImpl implements PersonDAO
{
   public boolean validateUser(Person p)
   {
      boolean flag = false ;
      try
      {
        String sql = "select top 1 * from person where userName = ?";
        PreparedStatement ps = new DBConn().getConn().prepareStatement(sql);
        ps.setString(1,p.getUserName());
        ResultSet rs = ps.executeQuery();

        if(rs.next())
        {
          flag = true;
        }
      }
      catch(Exception e)
      {
        e.printStackTrace();
      }
      return flag;
   }
}

当DAO设计好后,现在开始完成MVC的开发,下面创建一个控制器(C),由一个Servlet类来充当(AjaxServlet.java):
package cn.com.freeman.servlet;

import java.io.*;
import javax.servlet.http.*;
import.javax.servlet.*;
import cn.com.freeman.dao.PersonDAO;
import cn.com.freeman.impl.PersonDAOImpl;
import cn.com.freeman.pojo.Person;

public class AjaxServlet extends HttpServlet
{
   public void doPost(HttpServletRequest request,HttpServletResponse response)
   {
      try
      {
        String userName = request.getParameter("userName")==null?"":(String)request.getParameter("userName");
        
        if("".equals(userName))
        {
          PersonDAO p = new PersonDAOImpl();
          p.setUserName(userName);

          PrintWriter pw = response.getWriter();

          if(p.validateUser(p))
          {
            pw.println("很抱歉,"+userName+"已被使用!");
          }
          else
          {
            pw.println("恭喜您,"+userName+"还未被使用!");
          }
        }
      }
      catch(Exception e)
      {
        e.printStackTrace();
      }
   }
   public void doGet(HttpServletRequest request,HttpServletResponse response)
   {
      this.doPost(request,response);
   }
}

因为控制器是一个Servlet类,所以需要对web.xml进行配置,如下:
<servlet>
  <servlet-name>ajaxServlet</servelt-name>
  <servlet-class>cn.com.freeman.servlet.AjaxServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>ajaxServlet</servlet-name>
  <url-pattern>/check</url-pattern>
</servlet-mapping>

写到这里,项目就剩下创建View(使用普通JSP文件充当:check.jsp),代码如下:
<%@ page contentType="text/html;charset=GBK"%>

<html>

<head>
   <title>AJAX应用之用户验证</title>
   <script type="text/javascript" src="ajax.js"></script>
</head>

<body>

<h2>MVC模式结合AJAX应用</h1>
<hr/>

请输入用户名:<input type="text" id="userName" size="20"/>
<input type="button" value="校验" onclick="verify();"/>

<div id="result"/>

</body>

</html>

JSP页面创建完成,下面就来写JavaScript脚本文件(ajax.js):
var xmlhttp;
function createXMLHttpRequest()
{
   if(window.XMLHttpRequest)
   {
     xmlhttp = new XMLHttpRequest();
   }
   else if(window.ActiveXObject)
   {
     try
     {
       var activeXName = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0;i<activeXName.length;i++)
       {
          xmlhttp = new ActiveXObject(activeXObject[i]);
          break;
       }
     }
     catch(e)
     {
     }
     if(!xmlhttp)
     {
       alert("创建XMLHttpRequest对象失败!");
     }
   }
}

function verify()
{
  var userName = document.getElementById("userName").value;

  createXMLHttpRequest();
 
  xmlhttp.onreadystatechange = callback;

  xmlhttp.open("POST","check?userName="+userName,true);
  
  xmlhttp.send(null);

}

function callback()
{
   if(xmlhttp.readystate == 4)
   {
     if(xmlhttp.status == 200)
     {
       document.getElementById("result").innerHTML = xmlhttp.responseText;
     }
   }
}

    ajax.js脚本文件创建完成,项目也基本搭建完,下面开始部署项目:1、编译下所以JAVA文件;2、启动下Tomcat服务器;3、体现AJAX异步与后台数据交互的效果。
     以上所分享的AJAX用户验证例子,若使用AJAX一些流行的框架(或说JAVASCRIPT库),例如:JQuery,上述的ajax.js文件所需写的代码可能只有四五行,可以实现同样的效果。本实例重点与大家分享XMLHttpRequest的创建过程和它如何与后台服务器数据进行交互,希望大家能互相学习,从中交流交流。
分享到:
评论
1 楼 weilu73 2011-09-19  
  Class.forName(driver); 
         this.conn = DriverManager(URL,userName,passWord); 
      }  有这个方法???浪费我时间

相关推荐

Global site tag (gtag.js) - Google Analytics