JAVA AJAX教程第一章-初始AJAX

既然是认识AJAX，理论和实践相结合，这样让自己学的更快，理解更深入，我分一下几点：

1、认识传统的同步交互方式和AJAX解决方案

2、 AJAX使用到的技术

3、实例体验AJAX

一、同步交互方式和AJAX解决方案

传统的WEB应用是同步交互的方式，这种同步交互方式的处理过程如下图

什么是同步交互方式：

首先，用户向HTTP服务器提交一个处理请求。接着，服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。

同步交互的不足之处，会给用户一种不连贯的体验，当服务器处理请求时，用户只能等待状态，页面中的显示内容只能是空白。

AJAX解决方案

AJAX采用的异步交互的处理方式，很好的解决不连贯的用户体验，处理过程如图：

二、AJAX使用的技术

1、JavaScript脚本

2、XHTML和CSS

3、DOM

4、XML和XSTL

5、XMLHTTPRequest

三、实例体验AJAX

首先，布置好开发环境：

JDK 1.4以上，我使用1.6

Eclipse 3.1以上，我使用3.4

Tomcat 5.0以上，我使用6.0

MySql 4以上，我使用5.0

如果你没有十足的把握请搭建和我一样的环境。

实例1：

我先做一个传统同步交互的实例，然后同AJAX的异步交互进行对比。

这里还要介绍下J2EE中经常提到的MVC模式：

MVC模式，即模型—视图—控制器模式，核心是代码分为相对独立的3个组成部分，其功能如下：

模型（Model），业务逻辑层。实现业务逻辑、状态管理的功能。

视图（View），表示层。即实现与用户交互的界面，通常实现数据的输入和输出功能。

控制器（Control），控制层。起到控制整个业务流程的作用，实现View和Model部分的协同工作。

在Model2中，采用Servlet作为控制器，负责接收客户端Web浏览器发送来的所有请求，并依据处理的不同结果，转发到对应的JSP页面实现在浏览器客户端的显示。

Model2模式工作如下：

好现在就开始写代码来实现上面的原理了：

要有三个东西，如下：

一个页面，也就是View，先制定好是，用来登陆的；

一个Servlet，也就是Model，用来作为控制层。

好了，奇怪为什么没有Control，也就是没有控制器呢？后面就知道咯！

下面是Eclipse中的层次结果：

代码如下：

<%@ page contentType="text/html; charset=UTF-8" language="java"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">

String result = (String)("result");

if(result != null && result != ""){

if(("ok")){

("<script>('热烈的欢迎你！')</script>");

}else{

("<script>('对不起，登陆失败！')</script>");

}

();

}

<html>

<head>

<title>Insert title here</title>

</head>

<body>

用户名：<input type="text" name="uname">

密码：<input type="password" size="20" name="pwd">

</form>

</body>

</html>

代码如下：

package classmate;

import ;

public class LoginAction_refersh extends HttpServlet {

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

// TODO Auto-generated method stub

String uname = ("uname");

String pwd = ("pwd");

String target = "";

HttpSession session = ();

if(("yhw")&&("admin")){

("result", "ok");

target = "/ajaxtest/";

}else{

("result", "wrong");

target = "/ajaxtest/";

}

(target);

}

代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http:///2001/XMLSchema-instance"

xmlns="/xml/ns/javaee"

xmlns:web="/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID"

version="2.5">

<display-name>ajaxtest</display-name>

<servlet-name>login</servlet-name>

<servlet-class></servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>login</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>login.jsp</welcome-file>

</welcome-file-list>

</web-app>

这样就完成了一个传统同步交互了哦。看看你的成果。

实例2：

做完了同步交互，现在要来正式体验AJAX异步体验了哦。注意的是，现在要使用MySql，而且也涉及到了采用AJAX后的MVC设计模式：

MySql就不说了，你要做的准备就是安装好MySql数据库，和下一个驱动JAR包。

采用AJAX后的MVC设计模式，如图：

文件层次如下：

先来看View，视图部分的代码，:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

var XMLHttpReq = false;

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

XMLHttpReq = new XMLHttpRequest();

}else if(window.ActiveXObject){

try{

XMLHttpReq = new ActiveXObject("");

}catch(e){

try{

XMLHttpReq = new ActiveXObject("");

}catch(e1){}

}

function sendRequest(url){

createXMLHttpRequest();

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

= processResponse;

XMLHttpReq.send(null);

}

function processResponse(){

if(XMLHttpReq.readyState == 4){

if(XMLHttpReq.status == 200){

var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].;

(res);

document.="";

}else{

("你请求的页面有异常");

}

function userCheck(){

var uname = document.myform.;

var pwd = document.myform.;

if(uname == ""){

("用户名不能为空");

document.myform.="";

document.myform.uname.focus();

return false;

}else{

sendRequest("login?uname="+uname+"&pwd="+pwd);

}

</script>

用户名：<input type="text" name="uname">

密码：<input type="password" size="20" name="pwd">

</form>

</body>

</html>

现在讲解下采用AJAX的几步骤：

1、在浏览器客户端创建对应的XMLHttpRequest

如上代码中的：

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

XMLHttpReq = new XMLHttpRequest();

}else if(window.ActiveXObject){

try{

XMLHttpReq = new ActiveXObject("");

}catch(e){

try{

XMLHttpReq = new ActiveXObject("");

}catch(e1){}

}

根据不同的浏览器创建对应的XMLHttpRequest对象

2、当用户点击按钮提交请求后，通过内置的AJAX核心对象XMLHttpRequest以异步的方式发送请求，如上代码中的：

function userCheck(){

var uname = document.myform.;

var pwd = document.myform.;

if(uname == ""){

("用户名不能为空");

document.myform.="";

document.myform.uname.focus();

return false;

}else{

sendRequest("login?uname="+uname+"&pwd="+pwd);

}

function sendRequest(url){

createXMLHttpRequest();

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

= processResponse;

XMLHttpReq.send(null);

}

3、在请求提交后为AJAX核心对象的XMLHttpRequest指定好响应的函数后，该监听器就开始监听工作。

如上代码中的：

function processResponse(){

if(XMLHttpReq.readyState == 4){

if(XMLHttpReq.status == 200){

var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].;

(res);

document.="";

}else{

("你请求的页面有异常");

}

其中

var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].;

用户解析由服务器端返回的XML的格式。

代码如下：

package classmate;

import ;

public class DB {

Connection conn = null;

Statement stmt = null;

ResultSet rs = null;

public DB(){

try{

("");

//("classdb");

}catch( e){

();

}

public ResultSet executeQuery(String sql){

try{

conn = ("jdbc:mysql://localhost:3306/ajaxtest", "root", "888888");

//("conn");

stmt = (ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);

//("stmt");

rs = (sql);

//("rs");

}catch(SQLException e){

();

}

return rs;

}

public int executeUpdate(String sql){

int result = 0;

try{

conn = ("jdbc:mysql://localhost:3306/ajaxtest?useunicode=true&characterEncoding=GBK", "root", "888888");

stmt = ();

result = (sql);

}catch(SQLException e){

(());

}

return result;

}

public void close(){

if(rs != null){

try{

();

}catch(Exception e1){

();

}

if(stmt != null){

try{

();

}catch(Exception e1){

();

}

if(conn != null){

try{

();

}catch(Exception e1){

();

}

代码如下：

package classmate;

import ;

public class LoginAction extends HttpServlet {

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

// TODO Auto-generated method stub

("UTF-8");

String uname = ("uname");

String pwd = ("pwd");

("text/xml;charset=UTF-8");

("Cache-Control", "no-cache");

PrintWriter out = ();

("<response>");

DB db = new DB();

ResultSet rs;

String strSql = null;

strSql = "select * from classuser where username='" + uname + "' and password='"

+ pwd + "';";

rs = (strSql);

try{

if(()){

("<res>" + "热烈欢迎" + "</res>");

}else{

("<res>" + "登陆失败" + "</res>");

}

}catch(SQLException e){

();

}

("</response>");

();

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

// TODO Auto-generated method stub

(req, resp);

}

@Override

public void init(ServletConfig config) throws ServletException {

// TODO Auto-generated method stub

}

代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http:///2001/XMLSchema-instance"

xmlns="/xml/ns/javaee"

xmlns:web="/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID"

version="2.5">

<display-name>ajaxtest</display-name>

<servlet-name>login</servlet-name>

<servlet-class></servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>login</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>login.jsp</welcome-file>

</welcome-file-list>

</web-app>

这样就完成了AJAX实践咯。

有联系请联系QQ：540528747，我也在学习AJAX，大家一起研究，欢迎各位朋友一起交流技术。

秒客网

JAVA AJAX教程第一章-初始AJAX

相关文章