java ajax教程_JAVA AJAX教程第一章—初识AJAX

java ajax教程_JAVA AJAX教程第一章—初识AJAX既然是认识AJAX,理论和实践相结合,这样让自己学的更快,理解更深入,我分一下几点:1、认识传统的同步交互方式和AJAX解决方案2、AJAX使用到的技术3、实例体验AJAX一、同步交互方式和AJAX解决方案传统的WEB应用是同步交互的方式,这种同步交互方式的处理过程如下图什么是同步交互方式:首先,用户向HTTP服务器提交一个处理请求。接着,服务器端接收到请求后,按照预先编写好的程序中的…

大家好,又见面了,我是你们的朋友全栈君。

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

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

2、  AJAX使用到的技术

3、  实例体验AJAX

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

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

%E5%90%8C%E6%AD%A5%E4%BA%A4%E4%BA%92.png

什么是同步交互方式:

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

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

AJAX解决方案

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

%E5%BC%82%E6%AD%A5%E4%BA%A4%E4%BA%92.png

二、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模式工作如下:

model2.png

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

要有三个东西,如下:

一个页面,也就是View,先制定好是login.jsp,用来登陆的;

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

好了,奇怪为什么没有Control,也就是没有控制器呢?后面就知道咯!

下面是Eclipse中的层次结果:

cc1.png

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设计模式,如图:

%E9%87%87%E7%94%A8AJAX%E5%90%8E%E7%9A%84MVC.png

文件层次如下:

cc2.png

先来看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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/156398.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • springboot mybatis项目搭建_idea配置javaweb开发环境

    springboot mybatis项目搭建_idea配置javaweb开发环境利用IDEA搭建SpringBoot项目,整合mybatis,实现简单的登录功能。利用闲余时间想自己搭建一个springboot+mybatis的项目,提升一下自己对项目的了解,毕竟自己还是一个小白,在这里为自己创建项目的过程做一个记录,以便以后回忆。同时将搭建中遇到的问题也在这里做记录。如有遇到同样问题的同学,希望能给你一下借鉴。springboot的优势之一…

  • java redis 没密码配置_jeeplus设置Redis密码

    java redis 没密码配置_jeeplus设置Redis密码接手过来的jeeplus系统原本没有设置redis密码,近期要上线,为保证redis安全性,运维要求添加redis密码,且在线上环境为redis设置了密码。接下来我需要修改程序内容来迎合运维此项修改,方式如下:设置Redis密码涉及到以下三个文件,分别是:jeeplus.properties、spring-context-jedis.xml和JedisUtils.java。以上三个文件的含义为如下…

  • macbook用什么记笔记_macbook怎么查看文件

    macbook用什么记笔记_macbook怎么查看文件朋友发过来一个,ziw文件,我Mac端下载了为知笔记Mac客户端,还是打不开,导入文件后只有文件标题没有文件内容解决方法:把.ziw文件后缀改成,.zip文件解压,zip文件打开HTML文件就可以正常浏览了…

    2022年10月12日
  • vue 路由嵌套_vue嵌套路由怎么定义

    vue 路由嵌套_vue嵌套路由怎么定义嵌套路由有时候在路由中,主要的部分是相同的,但是下面可能是不同的。比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message。这时候就需要使用到嵌套路由。项目结构如下:

  • CGLIB代理使用与原理详解

    CGLIB代理使用与原理详解JDK中提供的生成动态代理类的机制有个鲜明的特点是:某个类必须有实现的接口,而生成的代理类也只能代理某个类接口定义的方法。那么如果一个类没有实现接口怎么办呢?这就有CGLIB的诞生了,前面说的JDK的动态代理的实现方式是实现相关的接口成为接口的实现类,那么我们自然可以想到用继承的方式实现相关的代理类。【1】CGLIB简单实现①pom依赖如下&amp;amp;amp;amp;amp;amp;amp;lt;!–https://…

  • pycharm永久激活码2021_最新在线免费激活

    (pycharm永久激活码2021)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S32PGH0SQB-eyJsaWNlbnNlSWQiOi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号