千里马

天马行空

Ajax技术

1,什么是Ajax技术?
Ajax是一种创建交互式网页的web开发技术。Ajax的一个非常成功的案例就是Google,当用户在Google的搜索输入框中输入关键字的时候。他会提示与关键字相关的另一些关键字。用户可以对自己喜欢的一些关键字进行选择,这样既方便了用户定位自己的需要,又可以很好的引导搜索结果。
在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器进行通信,然后将返回结果提交给客户端页面的Ajax引擎,而有Ajax引擎决定这些数据插入到页面的任何位置。
 Ajax的最大特点的就是很好的用户体验,大多数使用Ajax技术的web应用程序,比同类没有使用的web应用程序的用户体验要好的多,尽管他们都能完成相类似的功能。例如,一个普通的用户注册页面,如果用户希望知道注册的用户名是否已经注册过了,那只能等提交表单到服务器以后并重新来到一个新的页面,才知道用户名是否可用,这种情况每次单击按钮都会导致几秒钟的延迟和屏幕刷新,但事实上页面改动的地方却只有很少一部分,Ajax正在打破这种状况,是页面再无刷新的情况下,完成某些与服务器的交互功能。大大提高了用户的体验感。
2,Ajax不是单一的技术,而是四种技术的集合,有javascript ,css,Dom XMLHttpRequest
Ajax程序是用javascript语言写成的。
Ajax程序可以使用CSS来控制页面的样式。
DOM,指的是文本对象模型,它是一个web页面的对象模型,可以用javascript来操作的页面结构。
XMLHttpRequest对象用来在后台向服务器端发送请求,数据的格式可以使任何的文本格式,如XML、纯文本。他也是Ajax进行异步通信的 关键元素。
这四种技术各司其职,其中javascript是其他三中的粘合剂,javascript可以通过修改DOM的结构来改变界面,或者完全改变DOM的结构来重新绘制用户界面;XMLHttpRequest对象则用来与服务器进行异步通信,javascript也正是通过控制他来提交请求和获取最新数据的。
Ajax也会大量使用DHTML进行编程,并且它与服务器端的异步通信能力使得一个web页面的使用寿命大大增长,用户交互性大大增强了。
2,Ajax技术的优缺点:
作为富客户端技术之一的Ajax的最大优点,就是再不更新整个页面的前提下维护数据。这使得web应用程序能够更为迅捷的回应用户动作,并避免了在网络上发送那些没有改变过的信息。与其他富客户端技术不同,Ajax不需要任何浏览器插件,直接通过浏览器内置的javascript控制浏览器的内容和行为即可。而其他的富客户端技术往往需要安装插件,并且以一个单独的进程来运行这些富客户端,一旦处理不当,很可能造成速度很慢的后果。
缺点:就是Ajax在不同的浏览器运行时,由于各个浏览器之间的差异,是的开发者在众多不同的平台和浏览器上经过严格的测试,但是随着Ajax技术的成熟,一些简化跨平台的Ajax程序库,也相继问世,程序员可以使用这些运行库进行Ajax的开发,也不担心Ajax的跨平台性。还有一个缺点就是;他动态改变的内容无法保存到本地或通过收藏夹来保存。这其实是因为Ajax改变浏览器的内容和行为,往往是通过修改网页的DOM和CSS来控制的,这些新消息都仅仅在浏览器窗口没关之前存在于内存里。
Ajax更适合有少量页面内容需要改变的客户端编程,如果页面的大多说内容都需要改变的时候,还是建议使用让整个页面刷新的方式较好
3,开发Ajax的一般步骤:
 XMLHttprequest对象时专门用来在后台与服务器进行通信的,它是整个Ajax程序的核心部分,在客户端和服务器之间起到了一个桥梁作用。大多说的浏览器都支持XMLHttprequest对象,程序员通过javascript来控制他的行为,如设置参数,发送请求。
在使用XmlHttprequest对象之前,需从浏览器获取一个XMLHttpRequest对象。因为各个浏览器对他的实现不同,所以在获取他的时候,需要针对不同的浏览器采用不同获取方式。例如,FireFox支持原有的对象,可以直接获取,而IE采用ActiveObject的方式 获取的。一般为了避免浏览器之间的差异,在获取对象之前,会进行支持形式的判断,然后在获取对象。
                         var xRequest = null;
    //¶ÔÓÚ³ýIEÒÔÍâµÄ´ó¶àÊýä¯ÀÀÆ÷£¬Ö±½Ó»ñÈ¡XMLHttpRequest¶ÔÏó
    if (window.XMLHttpRequest) {
     xRequest = new XMLHttpRequest();
    }
    //»ñȡ΢ÈíIEä¯ÀÀÆ÷ÀïµÄXMLHttpRequest¶ÔÏó£¬ËüÊÇÒÔActiveXObjectµÄÐÎʽÌṩµÄ
    else if (typeof ActiveXObject != "undefined") {
     xRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
获取到对象之后,就可以向服务器发送Http请求了,其实和普通的http请求没什么区别,同样可以选择post或get方式发送请求,浏览器同样会为请求设置一些头信息,如浏览器的版本、语言和字符、cookie等,必要是还可以发送请求参数。发送请求的大致步骤是:
设置回调函数、打开连接、设置头信息、发送请求参数
                            if (xRequest != null) {
     xRequest.onreadystatechange = function(){ //µ±ÇëÇó״̬¸Ä±äʱµÄ»Øµ÷º¯Êý
      if(xRequest.readyState == 4){   //ÅжÏÇëÇóÊÇ·ñÒѾ­Íê³É
       if(200 == xRequest.status){   //ÅжÏÇëÇóµÄ½á¹ûÊÇ·ñÕýÈ·
        //´òÓ¡·µ»Ø½á¹û
        content.innerHTML = xRequest.responseText;     
       }else if(404 == xRequest.status){
        alert('404 - HTTPÇëÇ󷾶´íÎó');
       }else if(500 == xRequest.status){
        alert('500 - ·þÎñÆ÷¶ËÄÚ²¿´íÎó');
       }    
      }
     };
     //ÒÔPOSTµÄ·½Ê½´ò¿ªÖ¸¶¨URLµÄÇëÇóÁ¬½Ó
     xRequest.open("POST", 'HelloAjaxServlet', true); 
     //ÉèÖÃÇëÇóµÄÀàÐÍΪ±íµ¥ÐÎʽ£¬×Ö·û¼¯ÎªUTF-8
     xRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;;charset=utf-8");
     xRequest.send(null);      //·¢ËÍÇëÇó
回调函数指的是请求状态发生变化以后浏览器自动调用的函数,请求的状态值(readState)从0到4一次代表了从请求到完成的过程,一般的逻辑代码写在状态值为4的条件下。请求完成以后需要判断请求结果(status),正常为200;
服务器端处理请求并返回结果:
服务器端的处理与普通的web请求并无大区别,唯一的区别在于结果的返回格式,Ajax请求返回的结果通常都是数据。对于简单的数据,可以直接以纯文本的格式直接返回到客户端,但是,如果数据复杂,就需要使用另外的数据格式了,目前比较普遍的格式有XML和JSON,前者适用于数据结构复杂和数据量大的情况。后者简单易用,使用与多种情况。
Xml是现代计算机系统无处不用的数据格式,他也是Ajax最先使用的数据格式,服务器端再生成XML的格式文本时,可以使用第三方工具或手动拼接xml字符串。
尽管XMLhttpRequest对象包含了,XML字符串,但是他可以介绍类型的文本信息,包含JSON。JSON格式是按照javascript的对象简单定义模式来设计的。以大括号来表示一个对象,以中括号来表示一个数组。
json的数据量小的多,json更易于客户端javascript的使用。 
客户端解析返回结果和作出相应的相应。
 针对两种不同的结果文本类型,客户端也需要采用两种不同的解析方式,因为XMl的结构要复杂得多,所以他的解析比较麻烦,不过浏览器为开发者提供了必要的解析xml的功能。
从服务器端获得数据以后,就可以根据不同的情况对用户界面做适当的修改。例如,把返回的结果打印在界面上,或改变页面某些DOM元素的结构或数据,再或者隐藏某些网页元素等。javascript的能力还是非常强大的,开发者需要做的是根据实际情况,改变浏览器的内容和行为。一般来说,Ajax调用完成和处理完成以后,需要让用户知道,这样能提高用户的体验感,例如,弹出一个提示框,或者在网页的局部打印一段文字,或局部变色 等。
4,XMLHttpRequest常用的方法:
open():用于设置进行一步请求目标的URL请求方法以及其他参数信息。
send():用于向服务器发送请求。如果请求声明为异步,该方法立即返回,否则,等到接收到响应为止。
setRequestHeader():为请求的Http头设置值。该方法必须在open()之后调用。
abort():停止当前异步请求。
getAllResponseHeaders():用于以字符串的形式返回完整的http头信息,当存在参数时,表示以字符串形式返回由该参数指定的http头信息。
5,XMLhttpRequest对象的常用属性:
   属 性                                        说 明

         onreadystatechange 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数

                            请求的状态。有以下5个取值:
                                0 = "未初始化"
                                1 = "正在加载"
            readyState
                                2 = "已加载"
                                3 = "交互中"
                                4 = "完成"

           responseText     服务器的响应,表示为字符串

           responseXML      服务器的响应,表示为XML ,这个对象可以解析为一个DOM对象

                            返回服务器的HTTP状态码,如:
                            200 = "成功"
                            202 = "请求被接受,但尚未成功"
              status
                            400 = "错误的请求"
                            404 = "文件未找到"
                            500 = "内部服务器错误"

            statusText      返回HTTP状态码对应的文本 
6,Ajax开发中需要注意的几个问题:
    (1),浏览器兼容性问题:Ajax是用来大量的javascript和Ajax引擎,而这些内容需要浏览器提供足够的支持。
    (2),XmlHttpRequest对象封装:Ajax技术的实现主要依赖于XMLhttpRequest对象,但是在调用其进行异步传输数据时,由于XMlhttpRequest对象的实例在处理事件完成以后就会被销毁,所以不对此对象进行封装处理,在下次进行调用时就要重构,要写一大段代码,使用起来很不方便。不过现在很多的Ajax开源的框架都对XmlhttpRequest对象进行了封装。
      (3),性能问题:由于Ajax将大量的计算从服务器移到了客户端,这就意味着浏览器将会承担更大的负担,而不再是只进行简单的文档显示。由于Ajax的核心语言是javascript,而javascript并不以高性能而知名。另外,javascript也不是轻量级的 ,特别是Dom元素耗费了大量的内存。因此如何提供javascript的性能对于Ajax开发者来说尤为重要。以下是优化Ajax应用的执行速度的方法:
     1,优化for循环。
     2,将Dom节点附加到文档上。 
     3,尽量减少“.”号操作符的使用。
  (4),中文编码问题:Ajax不支持多种字符集,默认的字符集编码是utf-8,因此在应用Ajax的程序中,应及时进行编码转换否则对于程序中出现的中文字将产生乱码。一般情况下,有两种情况会发生中文乱码:
        1,在发生路径的参数中包括中文,在服务器端接收参数时产生乱码。解决此乱码的方法有:

① 当接收使用GET方法提交的数据时,要将编码转换为
GB2312,关键代码如下:

      String name=request.getParameter("name");
out.println("姓名"+new String(name.getBytes("iso-8859-1"),"gb2312"));//
解决中文乱码

 ② 由于应用POST方法提交数据时,默认的字符编码是
 UTF-8 ,所以当接收使用POST方法提交的数据时,要将编
 码转换为utf-8 ,关键代码如下:

      String name=request.getParameter("name");
out.println("姓名"+new String(name.getBytes("iso-8859-1"), "utf-8"));//解
决中文乱码
  2,返回到responseText和ResponseXML的值中包含中文是产生乱码。
    由于Ajax在接受responseText或ResponseXML值时是按照utf-8的编码格式进行解码的,所以如果服务器端传输的数据不是utf-8格式就可能产生乱码。解决的方法就是保证从服务器端传输的数据采用utf-8的编码格式。

posted on 2012-06-06 15:57 Mr Lee 阅读(669) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
 

My Links

Blog Stats

常用链接

留言簿

随笔分类

随笔档案

文章档案

(hibernate)http://www.blogjava.net/dyllove98/archive/2012/05/12/377959.html

搜索

最新评论

阅读排行榜

评论排行榜