传智播客——AJAX

首先要对佟刚老师说声谢谢，谢谢你发高烧带病坚持给我们上课，祝愿你早日康复！

今天学习的是Ajax，Ajax是允许浏览器与服务器通信而无须刷新当前页面的技术。不用刷新整个页面便可与服务器通讯的办法有Flash,JavaApplet,框架和XMLHttpRequest，Ajax通常意义上是XMLHttpRequest对象的代名词。下面具体对XMLHttpRequest进行学习：

一.       XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的，非W3C标准，所以在不同浏览器上实现方法不统一。创建XMLHttpRequest对象：

<script language="javascript" type="text/javascript">

<!--

    var xmlhttp;

    // 创建XMLHTTPRequest对象

    function createXMLHTTPRequest(){

        if(window.ActiveXObject){ // 判断是否支持ActiveX控件

            xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象

    }

    else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象

        xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例（本地javascript对象）

    }

    }

//-->

</script>

二.    XMLHttpRequest实例与服务器进行通信

1.发送请求：

(1)onreadystatechange,该事件处理函数由服务器触发，而不是用户；在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange 事件

(2)open(method, url, asynch),method：请求类型,"GET"或"POST"；url：路径字符串，指向所请求的服务器上的那个文件，将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果；asynch：表示请求是否要异步传输，默认值为true

(3)send(data):data为将要传递给服务器的字符串，若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null)

(4)setRequestHeader(header,value),首部信息用来声明一个请求是 GET 还是 POST；如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了；该方法必须在open()之后才能调用；该方法必须在open()之后才能调用

2.接受响应：

(1)readyState:表示Ajax请求的当前状态( 4 代表响应发送完毕),每次 readyState 值的改变，都会触发 readystatechange 事件

(2)status:服务器发送的响应状态码；在 XMLHttpRequest 对象中，通过把这个值和 200 (一切正常)或 304(没有被修改） 比较，可以确保服务器是否已发送了一个成功的响应

(3)responseText:当 readyState 属性值变成 4 时,将服务器返回的文本储存在responseText属性中

(4)responseXML:如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中,MIME 类型必须为 text/xml
三.服务器端返回数据格式

1.XML:优点：跨平台通用；缺点：DOM解析较为复杂

2.JSON:JavaScript原生格式；JSON规则:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔

3.HTML:优点：与InnerHTML搭配，效率高；缺点：若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适

4.对比小结：若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”

l