ajax学习笔记

在以前开发的web项目中,向服务器提交请求时,总是要对页面进行刷新.如果数据量比较大的情况下,往往会出现长时间空白.用户对此很不满.后来在进行技术交流时有人建议用ajax,优点就是不需要提交表单就能对数据进行更新.但是,ajax入门较难,所以在开发项目中还是较多采用传统的表单提交方式.直到前不久发现dwr.
1.Ajax介绍
AJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用.它包括：
使用XHTML和CSS标准化呈现；
使用DOM实现动态显示和交互；
使用XML和XSLT进行数据交换与处理；
使用XMLHttpRequest进行异步数据读取；
最后用JavaScript绑定和处理所有数据。

2.AJAX的缺陷
   AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
   AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
   对流媒体的支持没有FLASH、Java Applet好。一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

3.dwr介绍
DWR(直接Web远程控制)项目是在Apache许可下的一个开源的解决方案，它供给那些想要以一种简单的方式使用Ajax和XMLHttpRequest的开发者。它具有一套javascript功能集，它们把从HTML页面调用应用服务器上的Java对象的方法简化。它操控不同类型的参数，并同时保持了HTML代码的可读性。DWR的主要部件有：dwr.xml,engine.js,util.js，前者是DWR的Servlet使用的配置文件，后两者DWR封装了Ajax的代码

4.AJAX框架的核心类XMLHttpRequest介绍
(1)XMLHttpRequest对象的方法
abort():停止当前请求
getAllResponseHeaders():作为字符串返回完整的headers
getResponseHeader("headerLabel"):作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]):设置未决的请求的目标 URL方法，和其他参数
send(content):发送请求
setRequestHeader("label", "value"):设置header并和请求一起发送
(2)XMLHttpRequest对象的属性
readyState:对象状态(0 = 未初始化,1 = 读取中,2 = 已读取,3 = 交互中,4 = 完成)
responseText:服务器进程返回数据的文本版本
responseXML:服务器进程返回数据的兼容DOM的XML文档对象
status:服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功"
statusText:服务器返回的状态文本信息

5.应用AJAX的流程：
(1)实例化XMLHttpRequest对象

 //为了让编写的程序能够跨浏览器运行
 if  (window.XMLHttpRequest)  { 
//  Mozilla,  Safari,  ...以XMLHttpRequest 类的形式提供
  req  =  new  XMLHttpRequest();
 }  else  if  (window.ActiveXObject)  { 
 //  IE,以ActiveX  控件的形式提供
  req  =  new  ActiveXObject("Microsoft.XMLHTTP");
 }

(2)指定响应处理函数

//将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性
   http_request.onreadystatechange  =  function()  {};
(3)发出HTTP请求

 
http_request.open('GET',  'http://localhost:8080/mytest2/ajax.do',  true);
 http_request.send(null);

(4)处理服务器返回的信息

 if  (http_request.readyState  ==  4)  {
  //  信息已经返回，可以开始处理
 }  else  {
  //  信息还没有返回，等待
 }
　 if  (http_request.status  ==  200)  {
  //  页面正常，可以开始处理信息
 }  else  {
  //  页面有问题
 }

5、dwr实例
从下面的实例可以看出:DWR实现Ajax应用的确很简单，它完成XmlHttpRequest对象的实例化、异步请求的发送、数据的远程调用、XML数据的打包解包及数据的透明传输工作，对于开发人员来说，只需要将数据请求交给DWR去做，接受它传回的数据再做处理就可以了。
例子:
demo.jsp用来展示界面服务端;
DemoAction是Struts中的Action子类负责控制转换;
DemoFacade是业务类负责业务处理;
Goods是一个业务实体类
(1)dwr.xml配置

<dwr>
    <allow>
        <convert converter="bean" match="dwr.demo.Goods"/>
        <create creator="new" javascript="DemoAction" class="dwr.demo.DemoAction">
            <include method="queryList"/>
        </create>

      </allow>
</dwr>

(2)Action类
DemoAction:

public ActionForward query(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
        String type = request.getParameter("type");
        List goodsList = query4dwr(Integer.parseInt(type), true, request);
        request.setAttribute("goodsList", goodsList);
        return mapping.findForward("success");
    }

public List queryList(int type, boolean needClear, HttpServletRequest request) {
        if (needClear) request.getSession().removeAttribute("dwr.demo.goodsId");
        return demoFacade.queryList(type);
}

(3)jsp

  function updateResults() {
    DWRUtil.removeAllRows("goodsbody");
    var type = document.getElementById("type").value;
    //在客户端直接调用后台类
    DemoAction.queryList(type, true, fillTable);
  }
  //回调函数
  function fillTable(goods) {
    document.getElementById("totalRecords").innerHTML = goods.length;
    DWRUtil.addRows("goodsbody", goods, [ addCheckbox, getName, getPrice, getCount]);
  }