(转)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，先制定好是login.jsp，用来登陆的；
一个Servlet，也就是Model，用来作为控制层。
好了，奇怪为什么没有Control，也就是没有控制器呢？后面就知道咯！
下面是Eclipse中的层次结果：
login.jsp代码如下：
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String result = (String)session.getAttribute("result");
if(result != null && result != ""){
if(result.equals("ok")){
out.println("<script>window.alert('热烈的欢迎你！')</script>");
}else{
out.println("<script>winodw.alert('对不起，登陆失败！')</script>");
}
session.invalidate();
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="login" method="post">
用户名：<input type="text" name="uname">
密码：<input type="password" size="20" name="pwd">
<input type="submit" value="login">
</form>
</body>
</html>
LoginAction.java代码如下：
package classmate;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LoginAction_refersh extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
String uname = req.getParameter("uname");
String pwd = req.getParameter("pwd");
String target = "";
HttpSession session = req.getSession();
if(uname.equals("yhw")&&pwd.equals("admin")){
session.setAttribute("result", "ok");
target = "/ajaxtest/login.jsp";
}else{
session.setAttribute("result", "wrong");
target = "/ajaxtest/login.jsp";
}
resp.sendRedirect(target);
}
}
web.xml代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID"
version="2.5">
<display-name>ajaxtest</display-name>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>classmate.LoginAction</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，视图部分的代码，login.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script language="javascript">
var XMLHttpReq = false;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP");
}catch(e1){}
}
}
}
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function processResponse(){
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
window.alert(res);
document.myform.uname.value="";
document.myform.pwd.value="";
}else{
window.alert("你请求的页面有异常");
}
}
}
function userCheck(){
var uname = document.myform.uname.value;
var pwd = document.myform.pwd.value;
if(uname == ""){
window.alert("用户名不能为空");
document.myform.pwd.value="";
document.myform.uname.focus();
return false;
}else{
sendRequest("login?uname="+uname+"&pwd="+pwd);
}
}
</script>
<form action="" method="post" name="myform">
用户名：<input type="text" name="uname">
密码：<input type="password" size="20" name="pwd">
<input type="button" value="login" onclick="userCheck()">
</form>
</body>
</html>
现在讲解下采用AJAX的几步骤：
1、 在浏览器客户端创建对应的XMLHttpRequest
如上代码中的：
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP");
}catch(e1){}
}
}
}
根据不同的浏览器创建对应的XMLHttpRequest对象
2、 当用户点击按钮提交请求后，通过内置的AJAX核心对象XMLHttpRequest以异步的方式发送请求，如上代码中的：
function userCheck(){
var uname = document.myform.uname.value;
var pwd = document.myform.pwd.value;
if(uname == ""){
window.alert("用户名不能为空");
document.myform.pwd.value="";
document.myform.uname.focus();
return false;
}else{
sendRequest("login?uname="+uname+"&pwd="+pwd);
}
}
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
3、 在请求提交后为AJAX核心对象的XMLHttpRequest指定好响应的函数后，该监听器就开始监听工作。
如上代码中的：
function processResponse(){
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
window.alert(res);
document.myform.uname.value="";
document.myform.pwd.value="";
}else{
window.alert("你请求的页面有异常");
}
}
}
其中
var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
用户解析由服务器端返回的XML的格式。
DB.java代码如下：
package classmate;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DB {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
public DB(){
try{
Class.forName("com.mysql.jdbc.Driver");
//System.out.println("classdb");
}catch(java.lang.ClassNotFoundException e){
e.printStackTrace();
}
}
public ResultSet executeQuery(String sql){
try{
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajaxtest", "root", "888888");
//System.out.println("conn");
stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
//System.out.println("stmt");
rs = stmt.executeQuery(sql);
//System.out.println("rs");
}catch(SQLException e){
e.printStackTrace();
}
return rs;
}
public int executeUpdate(String sql){
int result = 0;
try{
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajaxtest?useunicode=true&characterEncoding=GBK", "root", "888888");
stmt = conn.createStatement();
result = stmt.executeUpdate(sql);
}catch(SQLException e){
System.out.println(e.getMessage());
}
return result;
}
public void close(){
if(rs != null){
try{
rs.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
if(stmt != null){
try{
stmt.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
if(conn != null){
try{
conn.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
}
}
LoginAction.java代码如下：
package classmate;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
String uname = req.getParameter("uname");
String pwd = req.getParameter("pwd");
resp.setContentType("text/xml;charset=UTF-8");
resp.setHeader("Cache-Control", "no-cache");
PrintWriter out = resp.getWriter();
out.println("<response>");
DB db = new DB();
ResultSet rs;
String strSql = null;
strSql = "select * from classuser where username='" + uname + "' and password='"
+ pwd + "';";
rs = db.executeQuery(strSql);
try{
if(rs.next()){
out.println("<res>" + "热烈欢迎" + "</res>");
}else{
out.println("<res>" + "登陆失败" + "</res>");
}
}catch(SQLException e){
e.printStackTrace();
}
out.println("</response>");
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
@Override
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
}
}
web.xml代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID"
version="2.5">
<display-name>ajaxtest</display-name>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>classmate.LoginAction</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实践咯。
(转)JAVA AJAX教程第一章-初始AJAX的更多相关文章
- [ABP教程]第一章 创建服务端
Web应用程序开发教程 - 第一章: 创建服务端 关于本教程 在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发 ...
- [Learn Android Studio 汉化教程]第一章 : Android Studio 介绍
注:为了看上去比较清晰这里只转载了中文 原地址: [Learn Android Studio 汉化教程]第一章 : Android Studio 介绍 本章将引导您完成安装和设置开发环境,然后你就可 ...
- 第一章 初始C语言
第一章 初始C语言 目录 第一章 初始C语言 1. C语言起源 2. 选择C语言的理由 2.1 设计特性 2.2 高效性 2.3 可移植性 2.4 强大而灵活 2.5 面向程序员 3. C语言的应用范 ...
- 村田噪声抑制基础教程-第一章 需要EMI静噪滤波器的原因
1-1. 简介 EMI静噪滤波器 (EMIFIL®) 是为电子设备提供电磁噪声抑制的电子元件,配合屏蔽罩和其他保护装置一起使用.这种滤波器仅从通过连线传导的电流中提取并移除引起电磁噪声的元件.第1章说 ...
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...
- 《进击吧！Blazor！》系列入门教程 第一章 8.部署
<进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...
- (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
- （李南江jQuery+Ajax）第一章：初识jQuery
第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...
- Java学习笔记 第一章 入门<转>
第一章 JAVA入门 一.基础常识 1.软件开发 什么是软件? 软件:一系列按照特定顺序组织的计算机数据和指令的集合 系统软件:DOS,Windows,Linux 应用软件:扫雷.QQ.迅雷 什么是开 ...
随机推荐
- BZOJ-1066 蜥蜴 最大流+拆点+超级源超级汇
1066: [SCOI2007]蜥蜴 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 2582 Solved: 1272 [Submit][Status] ...
- POJ3749 破译密码
Description 据说最早的密码来自于罗马的凯撒大帝.消息加密的办法是:对消息原文中的每个字母,分别用该字母之后的第5个字母替换(例如:消息原文中的每个字母A都分别替换成字母F).而你要获得消息 ...
- bzoj1069 SCOI2007 最大土地面积
1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 2560 Solved: 983 Description ...
- groovy–运算符重载
Groovy支持运算符重载,各种运算符被映射到普通的java对象的方法调用,这就使得开发者可以利用运算符重载的优势来编写自己的Java或者groovy对象. 下面的表格描述了groovy中的操作符所映 ...
- Linux强制访问控制机制模块分析之mls_type.h
2.4.2 mls_type.h 2.4.2.1文件描述 对于mls_type.h文件,其完整文件名为security/selinux/ss/mls_types.h,该文件定义了MLS策略使用的类型. ...
- iOS代码工具箱再续
if (CGRectContainsPoint(self.menuView.frame, point)) { point = [self.view convertPoint:point toView ...
- P1049送给圣诞夜的礼品(矩阵十大问题之四）
https://vijos.org/p/1049 P1049送给圣诞夜的礼品 Accepted 标签:组合数学送给圣诞夜的礼物[显示标签] 返回代码界面 | 关闭 Pascal Pasca ...
- Java初学(七)
一.内部类 1.内部类概述:把类定义在其他类内部,这个类被称为内部类(内部类可以使用static修饰,外部类不可) 2.内部类访问特点:内部类可以直接访问外部类成员,包括私有的 外部类要访问内 ...
- Servlet之Filter详细讲解
Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时候,有时候发一些敏感的信息,发出后显示时 就会将敏感信息用*等字符替代,这就是用过滤器对信息进行 ...
- 不错的linux下通用的java程序启动脚本
不错的linux下通用的java程序启动脚本(转载) 虽然写起动shell的频率非常不高...但是每次要写都要对付一大堆的jar文件路径,新加jar包也必须要修改起动shell. 在网上找到一个挺好的 ...