java ajax教程_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代码如下:
String result = (String)session.getAttribute("result");
if(result != null && result != ""){
if(result.equals("ok")){
out.println("<script>window.alert('热烈的欢迎你!')");
}else{
out.println("");
}
session.invalidate();
}
%>
Insert title here
用户名:
密码:
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代码如下:
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">
ajaxtest
login
classmate.LoginAction
login
/login
login.jsp
这样就完成了一个传统同步交互了哦。看看你的成果。
实例2:
做完了同步交互,现在要来正式体验AJAX异步体验了哦。注意的是,现在要使用MySql,而且也涉及到了采用AJAX后的MVC设计模式:
MySql就不说了,你要做的准备就是安装好MySql数据库,和下一个驱动JAR包。
采用AJAX后的MVC设计模式,如图:
文件层次如下:
先来看View,视图部分的代码,login.jsp:
Insert title here
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 = proce***esponse;
XMLHttpReq.send(null);
}
function proce***esponse(){
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);
}
}
用户名:
密码:
现在讲解下采用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 = proce***esponse;
XMLHttpReq.send(null);
}
3、 在请求提交后为AJAX核心对象的XMLHttpRequest指定好响应的函数后,该监听器就开始监听工作。
如上代码中的:
function proce***esponse(){
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("");
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("" + "热烈欢迎" + "");
}else{
out.println("" + "登陆失败" + "");
}
}catch(SQLException e){
e.printStackTrace();
}
out.println("");
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代码如下:
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">
ajaxtest
login
classmate.LoginAction
login
/login
login.jsp
这样就完成了AJAX实践咯。
有联系请联系QQ:540528747,我也在学习AJAX,大家一起研究,欢迎各位朋友一起交流技术。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/jackieban/archive/2009/10/11/4653526.aspx
java ajax教程_JAVA AJAX教程第一章—初识AJAX相关推荐
- java类加载器_java底层内功 第一章,类加载器的任性
java类是怎么加载的? 类加载机制 JVM主要包含三大核心部分:类加载器,运行时数据区和执行引擎. 虚拟机将描述类的数据从class文件加载到内存,并对数据进行校验,准备,解析和初始化,最终就会形成 ...
- 《Android移动应用基础教程》(Android Studio)(第二版)黑马教程 课后题答案第一章
<Android移动应用基础教程>(Android Studio)(第二版)黑马教程 课后题答案 第一章 一.填空题 1.dex 2.@color 3.AndroidManifest.xm ...
- 第一章:AJAX与jQuery
AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...
- 黑马程序员全套Java教程_Java基础教程_异常(含扩展)(二十三)
黑马程序员全套Java教程_Java基础教程_异常(含扩展)(二十三) 1.1 异常概述与异常体系结构 1.2 JVM遇到异常时的默认处理方案 1.3 异常处理 1.4 异常处理之try--catch ...
- Java Persistence with MyBatis 3(中文版) 第一章 MyBatis入门
本章将涵盖以下话题: ž MyBatis是什么? ž 为什么选择MyBatis? ž MyBatis安装配置 ž 域模型样例 1.1 MyBatis是什么 MyBatis是一个简化和实现了Ja ...
- 尚学堂百战程序员1573题---答案总结第一章 初识Java
第一章 初识Java 1. 你学习编程的目的是什么?学习编程最快的办法是什么? 答:我觉得的我喜欢计算机,我认为计算机是一个很神奇的东西,所以我要学计算机专业,同时,我认为学计算机学编程是一个比较容易 ...
- 《起跑吧,Opa》 -- 中译本 第一章 初识Opa
第一章 初识opa 本章,你将初识opa.你将学习如何安装Opa,编写opa程序以及熟悉Opa开发周期中的各个步骤. 安装opa 需要你预先从opa网站(http://opalang.org/)下载适 ...
- 第一章 初识EmguCV
第一章 初识EmguCV 1.1 EmguCV的基本介绍 1.1.1 计算机视觉.OpenCV和EmguCV 计算机视觉是一门研究如何使机器"看"的科学,更进一步的说,就是是指用摄 ...
- c生万物【第一章 初识c语言】
c生万物---第一章 初识c语言 前言 1.什么是C语言 2.第一个C语言程序 3.数据类型 4.变量.常量 4.1定义变量的方法 4.2变量的分类 4.3变量的使用 4.4 变量的作用域和生命周期 ...
- 第一章 初识Mathematica
第一章 初识Mathematica 1.Mathematica是什么 Matematica是由美国Wolfram公司研究开发的一个著名的数学软件,它提供了非常强大的功能,能够完成符号运算.数学图 ...
最新文章
- 一文运维zookeeper
- 如何使用Github管理自己的代码
- 敏捷开发:软件与文档
- 3-unit1 IPv6网络的管理
- C++基础05-类构造函数与析构函数
- z-index优先级总结
- Spring Cloud Alibaba迁移指南(三):极简的 Config 1
- 【报告分享】产业互联网发展趋势及机会分析报告.pptx(附下载链接)
- Node JS Buffer使用理解
- LeetCode-29:不使用乘法、除法和 mod 运算符如何求解两数之商,真实面试中遇到过
- Cloudera Hadoop 4 实战课程(Hadoop 2.0、集群界面化管理、电商在线查询+日志离线分析)...
- 程序员面试金典——3.6双栈排序
- 面向对象程序的设计模式
- 【运筹学】产销平衡问题的表上作业法
- wireshark蓝牙数据包分析_Wireshark数据包分析
- 解决WinHTTP Web Proxy Auto-Discovery Service无法启动问题
- 华为云SSL证书申请流程
- 扇贝编程python学习笔记-基础篇4
- spack file hierarchy system
- ping命令的多种玩法,以前竟然只用它来测试网速!