Ajax技术与移动互联网汇.ppt

4.1-Ajax技术 Ajax技术与移动互联网 付长冬 北京邮电大学 Ajax定义 Ajax不是一种技术。实际上，Ajax由几种蓬勃发展的技术以新的强大方式组合而成。 Ajax包含： 基于XHTML和CSS标准的表示； 使用Document Object Model(DOM)进行动态显示和交互； 使用XMLHttpRequest与Web服务器进行异步通信； 使用JavaScript绑定一切(CSSL)。 为什么需要Ajax？ Ajax工作原理 Ajax工作原理 Ajax工作原理 在会话的开始，浏览器加载了一个Ajax引擎---采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互--不用等待Web服务器的通讯。 通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器---例如简单的数据校验，内存中的数据编辑，甚至一些页面导航---引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作---假设它提交需要处理的数据，载入另外的界面代码，或者接收新的数据---引擎让这些工作异步进行，通常使用XML, 不用再担误用户界面的交互。 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 Ajax技术 Ajax技术 JavaScript XMLHttpRequest CSS CSS提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX应用中扮演至关重要的角色，但它也是构建创建跨浏览器应用的一大阻碍，因为不同的浏览器厂商支持各种不同的CSS级别。 DHTML DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。 DOM 文档对象模型 DOM 用于(通过 Javascript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。 Ajax-结构关系 Ajax实例分析 try{　　if( window.ActiveXObject ){ //IE　　for( var i = 5; i; i-- ){　　try{　　if( i == 2 ){　　xmlhttp_request = new ActiveXObject( “Microsoft.XMLHTTP” );　　}else{　　xmlhttp_request = new ActiveXObject( “Msxml2.XMLHTTP.” + i + “.0” );　　}　　xmlhttp_request.setRequestHeader(“Content-Type”,“text/xml”);　　xmlhttp_request.setRequestHeader(“Content-Type”,“gb2312”);　　break;}　　catch(e){　　xmlhttp_request = false;　　}　　}　　}else if( window.XMLHttpRequest ){ //Firefox，Mozilla　　xmlhttp_request = new XMLHttpRequest();　　if (xmlhttp_request.overrideMimeType) {　　xmlhttp_request.overrideMimeType(text/xml);　　}　　}　　}catch(e){　　xmlhttp_request = false;　　} Ajax实例分析 用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：　xmlhttp_request.onreadystatechange =FunctionName; 在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。if (http_request.readyState == 4)