Ajax讲解（一）

                               Ajax讲解（一）

什么是 Ajax：

读音：(e:j^ks) 。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。

Ajax的技术的产生:

     jax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

“Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。

而 Ajax 这项技术，是 Google 在Google Labs发布Google Maps和Google Suggest后真正为人所认识。

Ajax的工作原理   

     Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。   在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能： 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。  提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。  消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。  直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。    一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

同步交互和异步交互:

        举个例子：普通B/S模式(同步)       AJAX技术(异步)

       *  同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

       *   异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

         同步是指：发送方发出数据后，等接收方发回响应以后才发下一个

                        数据包的通讯方式。  
    异步是指：发送方发出数据后，不等接收方发回响应，接着发送下

                       个数据包的通讯方式 

     

 易懂的理解:

     异步传输:   你传输吧，我去做我的事了，传输完了告诉我一声   
     同步传输:   你现在传输，我要亲眼看你传输完成，才去做别的事 

Ajax工具包:

   Ajax并不是一项新技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起

服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择

XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；

DOM（Document Object Model,文档对象模型）实现动态显示和交互；

使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

使用JavaScript绑定和处理所有数据

AJAX的缺陷 :

 AJAX不是完美的技术。也存在缺陷：

1    AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。 

2   AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 

3    对流媒体的支持没有FLASH、Java Applet好。 

4    一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

XMLHttpRequest对象:

  XMLHttpRequest对象
　　 XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。 

XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.

创建XMLHttpRequest对象（由于非标准所以实现方法不统一）

Internet Explorer把XMLHttpRequest实现为一个ActiveX对象

其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

XMLHttpRequest对象初始化:

   function   createXmlHttpRequest(){

   var xmlHttp;

   try{    //Firefox, Opera 8.0+, Safari

           xmlHttp=new XMLHttpRequest();

    }catch (e){

           try{    //Internet Explorer

                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }catch (e){

                  try{

                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                  }catch (e){}  

           }

    }

   return xmlHttp;

 }

XMLHttpRequest对象方法    

见附件中

XMLHttpRequest对象属性:

onreadystatechange            状态改变的事件触发器

readyState                对象状态(integer):

                0 = 未初始化

                1 = 读取中

                2 = 已读取

                3 = 交互中

                4 = 完成

responseText        服务器进程返回数据的文本版本

responseXML        服务器进程返回数据的兼容DOM的XML文档对象

status            服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"

statusText            服务器返回的状态文本信息

发送请求--方法和属性介绍:

    利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：

onreadystatechange 事件处理函数

open 方法

send 方法 

open(method, url, asynch)

XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。

method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。

在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。 

url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

send(data)：

open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令

data：将要传递给服务器的字符串。

若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);

当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.

onreadystatechange:

该事件处理函数由服务器触发，而不是用户

在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。

每次 readyState 属性的改变都会触发 readystatechange事件

setRequestHeader(header,value)

当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。

Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成

参数header： 首部的名字;  参数value：首部的值。

如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。

该方法必须在open()之后才能调用

案例分析：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ajax01.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  

  <body>  

     This is my HTML page. <br>

  </body>

</html>

<script>

    function getXmlHttpRequest(){

      var xhr ;

      try{

         //firefox,opera浏览器

         xhr = new XMLHttpRequest();

      }catch(err){

          try{

          //IE浏览器5.0

             xhr = new ActiveXObject("Microsoft.XMLHTTP");

          }catch(er){

            alert("您的浏览器版本太低了......");

          }

      }

      return xhr;

    }

    

   

      var xhr = getXmlHttpRequest();

      //get请求的发送

      xhr.open("get","./index.jsp?num="+Math.random(),true);

      //发送

      xhr.send(null);

      

      alert("111111111111111");

      //onreadystatechange事件

      xhr.onreadystatechange = function (){

          alert(xhr.readyState+"=====");

          if(xhr.status==200){

              alert(xhr.responseXML);

          }

      }

   

</script>