AJAX 编程 笔记

1月6日
什么是AJAX？
AJAX全称“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页开发技术，它是很多技术的结合体
AJAX包含内容：
基于web标准（standards-based presentation）XHTML+CSS的表示：
使用DOM（Document Object Model）进行动态显示及交互
使用XML和XSLT进行数据库交换及相关操作
使用XMLHttpRequest进行异步数据查询，检索
XMLHttpRequest对象介绍：
最初，Microsoft设计XMLHttpRequest是用来实现在IE环境中用JavaScript载入XML文档的。虽然其名字中有XML，XMLHttpRequest实际上是针对JavaScript的普通HTTP客户端。基于此，JavaScript可以发起GET或POST类的HTTP请求
WEB：
WEB应用程序：ERP，CRM
Java技术：
JSP+Struts+Hibernate+Spring+DWR+Ext(Dojo)
WEB(网站)：
JSP+Struts+Hibernate+Spring+Jquery(ui.jquery)
主要AJAX框架(与Java相关)：
DWR(通信)，ICEFace（界面）,GWT(Google)，Dojo,SmartClient,echo2(服务器端)，Jquery,YUI(雅虎)
AJAX框架的共同点：
1 解决程序员大量编写JavaScript代码
2 提供丰富的WEB UI组件
3 将一些WEB特效进行封装
AJAX底层技术实现：
XMLHttpRequest
DWR：java to javascript
GWT：java to javascript
程序员编写Java代码通过编译器将Java编译为JavaScript
优点：程序员只需要调试Java就可以
AJAX最终目标：
1 增加WEB应用的用户体验
学习步骤：
1 手工开发AJAX
2 DWR重点
3 GWT了解
4 整合：DWR+Ext+Struts
XMLHttpRequest对象的常用方法：
1 初始化XMLHttpRequest对象
2 XMLHttpRequest方法简介----Open( )
open (type,url,isAsync,username,password)
示例：
req.open(‘GET’,’index.html’,true);
解释：使用open方法来配置一个对index.html的异步GET请求
Send( )
Send(payload)
Send方法用来连接open方法中指定的URL
SetRequestHeader( )
SetRequestHeader(header,value);
SetRequestHeader()最常见的用途设置Content-type
示例：
req.setRequestHeader(‘Content-type’,charset=”UTF-8;’);
abort( )
abort()方法，它可以用来取消一个正在处理的异步请求
体会：
ajax的数据传输，也是通过事件驱动实现
例如：当键盘释放的时候，激活ajax异步传输
新建项目：FirstAJAX
WebContent/index.jsp
js/ myAjax.js
myAjax.js实现：
1 new出XMLHttpRequest
2 open()   //提交到服务器的哪个服务
3 如何获得用户输入：
         src/ServletValidate
ServletValidateHex   //传输中文
总结：
手工开发AJAX程序，相对比较复杂，主要复杂在，在程序编写和出现异常时，程序员最少要对两种以上的语言进行编写或者调试
编写java + 编写JavaScript
但是程序实现了无刷新的动态效果，给用户增强了使用的体验
所以一般在开发AJAX程序的时候，都使用相对成熟的AJAX框架进行开发，来减少JavaScript的编写数量，便于程序员的调试，提高开发效率
DWR（Direct Web Remoting）简介：
DWR（Direct Web Remoting）是一个WEB远程调用框架，利用这个框架可以让AJAX开发变得很简单，利用DWR可以在客户端利用JavaScript直接调用服务端Java方法并返回值给JavaScript就好像直接本地客户端调用一样（DWR根据Java类来动态生成JavaScript代码）
http://directwebremoting.org/
DWR环境配置
//主要支持
&TOMCAT/lib/dwr.jar
//依赖支持
$TOMCAT/lib/commons-logging-1.1.1.jar
$ TOMCAT/lib/jdom.jar
DWR的配置：
1 jar包
2 web.xml
3 WEB-INF/dwr.xml
新建项目：DWRFirst
          WebContent/Web-INF/
编写DWR程序：
         src/com.user.dwr.HelloWorld.java
编写dwr.xml
         WebContent/index.jsp
导入DWR支持
使用DWR
使用DWR的步骤：
1 jar包
2 配置文件：web.xml,dwr.xml
3 编写dwr的java类
4 修改dwr.xml
5 在jsp中加入dwr支持
6 调用dwr翻译的JavaScript
DWR只负责完成AJAX（XMLHttpRequest）通信，没有UI，可以方便的和任何Java程序关联
1月7日
DWR工作机制：
DWR是作为Web应用程序中的servlet部署的,它像是一个黑盒子,这个servlet有两个主要作用：
1 动态地生成包含在Web页面的JavaScript，并在幕后执行XMLHttpRequest;
2 把请求翻译成服务器Java对象上的方法调用并把方法的返回值放在servlet响应中发送回客户端，编码成JavaScript
练习：
用户名的验证功能
新建项目：DWRValidate
练习：
无刷新的用户注册功能，可在用户输入时判断，此用户名是否可用
新建项目：MyDWRRegsitry
com.user.domain/User.java
String id, String name, String password
com.user.dao/IUserDAO.java
           UserDAOImpl.java
public boolean createUser(User user);
public boolean findUserById(String id);
           DAOFactory.java
com.user.dwr/ValidateUser.java
DWR JavaScript对象到Java对象的自动转换：
dwr.xml
<convert converter=”bean” match=”pack.class” />
实现：
one application one page   
//方便用户的操作，避免在多个页面间的切换
//缺点：浏览器有可能会占用系统较多的内存
页面的动态导入：
实现通过：
WebContext对象的：forwardToString(“xxx.jsp”)实现
新建项目：DWRInclude
src/com.user.dwr.MyInclude.java
DWR基本操作：
1 java to javascript的操作
2 javascript对象to java对象的转换
3 动态导入
寒假项目：
1大唐任务管理系统
Struts + Tiles + ajax
2 项目：
提供参考网站：
http://www.doudouboshi.com
http://www.dr-hannah.com
http://www.xaxr.com
1 采取团队的方式：
时间安排：
1 明天将团队的成员提交
2 在1月13日将demo(首页的设计)发：[e-mail]
网站地图
1月8日
1 动态表格
新建项目：DWRDynaTable
          WebContent/OperTable
掌握：
1 dwr.util.cloneNode     //复制节点
2 dwr.util.setValues      //自动进行对象匹配
3 dwr.util.getValues
新建项目：DWRTabs(teacher)
java to javascript
Extjs入门        //优势提供丰富的组件
使用ExtTaglib快速开发Extjs界面
新建项目：Ext_Tags
Js lib tags
WebContent/js
          WEB-INF/lib
tags
firstext.jsp
1 导入ext标签库：
<%@ taglib tagdir=”WEB-INF/tags/ext” prefix=”ext” %>
2 使用：
<ext:body>
</ext:body>   //用户编写Ext界面的主体
<ext:onReady>
</ext:onReady>   //Ext程序的入口

2 动态tab页
3 ext_tag_lib使用
寒假项目：[e-mail]
时间安排：
网络项目提交：
第一次：1月13日-----首页设计，网站地图
第二次：1月20日----网站基本框架编写：M，V，C
第三次：1月25日---项目雏行提交
1月26日----2月5日休息
第四次：1月9日，最后一次项目提交
要求：界面一定要精美，CSS一定要控制好