Ajax技术

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的编码格式。