ajax学习

Ajax是由Jesse James Garrett创造的，是“Asynchronous JavaScript And XML的简写”。
AJAX不是一个新技术，只是一种理念，是一种在Web应用程序中运用其他技术的方法。
出于安全的考虑，不能使用Ajax从当前域名外请求信息，这就是所谓的Ajax沙盒。

AJAX应用到的技术如下：
HTML
CSS
JavaScript
DOM
XML
XMLHttpRequest核心对象
XSLT
XHTML

AJAX的作用：用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重              新载入整个页面的需求可以交给AJAX来执行。

AJAX的原理：负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网              络服务器间的交流。

AJAX  = 传统(请求,响应) +  现代(AJAX引擎异步)
WEB2.0的效果 = 桌面应用的效果(快。。）+  Web应用的效果（安装。。)
AJAX = C/S + B/S

IE浏览器(早)
ActiveXObject(内置对象) = 引擎功能
   new ActiveXObject("固定的参数");

非IE浏览器
XMLHttpRequest（内置对象）= 引擎的功能
  new XMLHttpRequest()

XHR对象的属性介绍：
xhr.onreadystatechange=callBack;
onreadystatechange:属性，设置回调方法
callBack:回调用方法的名字
xhr.onreadystatechange监听器
xhr.open("发送的方式GET/POST","目标地址URL");
xhr.send(null);
null表示无内容
xhr.responseText;以字符串方式返回XML文件
xhr.responseXML;以XML格式的内容返回(真正)
nodes=xhr.getElementsByTagName("title"); 获取标签为<title>的所有文本，xhr为上一行的XML文本内容
nodes[0].firstChild.data;获得标签为<title>的文本的第一个值
nodes[0].firstChild.nodeValue;与上一行等价

xhr.readyState==4  属性readyState(处理状态)在各类Web浏览器中的工作方式是不一样的。
0未初始化，调用open()前
1正在B->S途中，请求未发送，调用send()前
2正在S端处理，请求已发送，正在处理中
3正在S->B途中，请求已经在处理，未完成
4顺利返回客户端，响应已经完成

运用AJAX的步骤：
1、创建AJAX引擎对象
       if(window.XMLHttpRequest){
xhr=new XMLHttpRequest(); //非IE浏览器
       }else{ //IE浏览器
         try{
           xhr=new ActiveXObject("Msxml2.XMLHTTP");
         }catch(e){
            try{
              xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
              xhr=false;
            }
         }
       }

2、设置监听和回调
       function callBack(){
//B->S->B
if(xhr.readyState==4){
   //正确处理用户的请求
   if(xhr.status==200){
     parserXML();
   }
}
       }
3、准备发送(两个方法等价)
       xhr.open("GET",url);       (发出请求，请求可以是GET、POST、HEAD)
       xhr.open("GET",url,true);  第三个参数用来将请求设置为异步方式，值可设为true或者asynchronous(异步)。
4、真实发送
       xhr.send(null); 可以通过请求传递信息，也可以传送用于过滤返回内容的信息。数据通过不同的变量对来发送，如：
       xhr.send('var2=val1&var2=val2&var3=val3');一定要用escape()方法对要发送的值进行编码。
   在传送数据时，需要修改请求的MIME类型：
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
在Mozilla代码里，如果要确保非XML数据能正确地返回，就需要引入对overrideMimeType()方法的调用：
xhr.overrideMimeType('text/xml');


AJAX的优势：
1、减轻服务器的负担：
       AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
2、带来更好的用户体验：
       无刷新更新页面，减少用户心理和实际的等待时间。
3、利用客户端的处理能力：
       可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担。
4、基于标准化的并被广泛支持的技术：
       不需要下载插件或者小程序。
5、进一步促进页面呈现和数据的分离


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


服务端AJAX框架-----DWR简介
DWR是一个Java开源库，可以让你在浏览器中的JavaScript代码调用Web服务器上的Java，就像在Java代码就在浏览器中一样。
官方网站：http://getahead.org/dwr

DWR的组成：
1、在服务器上运行的Servlet来处理请求并把结果返回浏览器。
2、运行在浏览器上的Javascript，可以发送请求，并动态改变页面。
3、DWR会根据你的Java类动态的生成Javascript代码。这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上     是服务器执行了这些代码，DWR负责数据的传递和转换。
4、这种Java和Javascript之间的远程调用会让DWR用户感觉像是曾经习惯使用的RMI机制。而且这一过程还不需要额外的浏览器插件。
5、Java是同步的，而Ajax是异步的。所以当你调用一个远程方法时，你要给DWR一个回调函数，当数据从网络上回来时，DWR会调用   这个函数。

DWR的作用：
1、客户端代码不再需要直接处理XMLHttpRequest对象或者服务器的响应。
2、不再需要编写对象的序列化代码或者使用第三方工具才能把对象变成XML。
3、不再需要编写servlet代码把Ajax 请求调整成对Java域对象的调用。

DWR原理：
1、DWR是作为Web应用的一个Servlet进行部署的，是一个黑盒子中的Servlet。
2、DWR 动态地生成包含在Web 页面中的JavaScript。并在幕后执行XMLHttpRequest。这些请求被发送给DWR
3、把请求翻译成服务器端Java 对象上的方法调用并把方法的返回值放在Servlet响应中发送回客户端，编码成JavaScript。
4、DWR 还提供了帮助执行常见的用户界面任务的JavaScript 工具函数。

通过DWR封装AJAX公共的操作
(1)开源框架
(2)Java编码的框架
(3)Web
(4)位于服务端
(5)使用基于DWR框架的AJAX仍然是异步的。

评论

1 楼 fly533 2010-08-06  

很完整啊！很好！