AJAX与后台数据交互

最新推荐文章于 2022-08-17 22:46:55 发布

J2EEcrazy

最新推荐文章于 2022-08-17 22:46:55 发布

阅读量386

点赞数 1

分类专栏： AJAX 文章标签： Ajax Java JavaScript 应用服务器 DAO ViewUI

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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的创建过程和它如何与后台服务器数据进行交互，希望大家能互相学习，从中交流交流。