i2Shopping网上商城v3.0技术交流AJAX.ppt

AJAX技术术介绍绍 议程 AJAX基本介绍 AJAX实战 XMLHttpRequest对象介绍 AJAX工作原理 AJAX介绍 nAJAX（Asynchronous JavaScript and XML）它是一种由多种技术组合 的技术。 n组合的技术包换HTML / XHTML ,CSS, JavaScript / DOM n通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更 新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行 更新。 n有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网 等等。 AJAX介绍 n XHTML，CSS用于呈现 nDOM实现动态显示和交互 nXML和XSTL进行数据交换与处理 nXMLHttpRequest对象用于进行异步数据读取 nJavascript绑定和处理所有数据 AJAX工作原理 AJAX工作原理 AJAX工作原理 7 用 户 界 面 A J A X 引 擎 W E B 服 务 器 后 台 业 务 系 统 JavaScrip调用 HTML+CSS Http请求 XML,JSON数据 Web浏览器 后台服务器 Ajax采用异步方式与后台交互 ajax应用场景 8 采用AJAX技术提升用户体验 XMLHttpRequest对象工作六步曲 9 步骤： 1、使用open方法创建一个请求 2、使用send方法发送一个请求 3、使用onreadystatechange事件捕获请求状态变化 4、使用readyState属性判断请求状态变化 5、使用status属性判断请求的结果 6、使用responseText获得返回的文本 10 function createXHR() var xhr; /声明一个变量 try /针对 Internet Explorer 6.0+ xhr = new ActiveXObject(“Msxml2.XMLHTTP”); catch (e) try /试针对 Internet Explorer 5.5+ xhr = new ActiveXObject(“Microsoft.XMLHTTP“); catch (E) xhr = false; if (!xhr return xhr; 11 var req; function checkUser() var checkResult=document.getElementById(“checkResult“); checkResult.innerHTML=“checking the user name.“; var userName=document.getElementById(“userName“).value; req= createXHR() ; req.open(“get“,“checkUser.jsp?checkUserName=“+userName); req.onreadystatechange =handleRequest; req.send(null); function handleRequest() var checkResult=document.getElementById(“checkResult“); if(req.readyState=4) if(req.status=200) checkResult.innerHTML=req.responseText; else alert(“Anerror occurred:“+req.statusText); 生成XMLHttpRequest对象 function createXHR() var xhr; try xhr = new ActiveXObject(“Msxml2.XMLHTTP“); catch (e) try xhr = new ActiveXObject(“Microsoft.XMLHTTP“); catch (E) xhr = false; if (!xhr return xhr; 监听器捕获请求状态变化 如果open方法中用post请求,则在send中发送数据 req.send(“chenkUserName=“+userName); 创建一个http请求 12 function createXHR() var xhr; /声明一个变量 try /针对 Internet Explorer 6.0+ xhr = new ActiveXObject(“Msxml2.XMLHTTP”); catch (e) try /试针对 Internet Explorer 5.5+ xhr = new ActiveXObject(“Microsoft.XMLHTTP“); catch (E) xhr = false; if (!xhr return xhr; 13 XMLHttpRequest对象(三个属性和两个方法） 1、onreadystatechange 属 性 onreadystatechange 属性存有处理服务器响应的函数 xmlHttp.onreadystatechange=function() if(xmlHttp.readyState=4) / 从服务器的response获得数据 2、readyState 属性 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时， onreadystatechange 函数就会被执行。 14 XMLHttpRequest对象 2、readyState 属性 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时， onreadystatechange 函数就会被执行。 状态描述 0请求未初始化（在调用 open() 之前 1请求已提出（调用 send() 之前） 2请求已发送（这里通常可以从响应得到内容头部） 3请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应 ） 4请求已完成（可以访问服务器响应并使用它） 15 XMLHttpRequest对象 3、responseText 属性 可以通过 responseText 属性来取回由服务器返回的数据。 xmlHttp.onreadystatechange=function() if(xmlHttp.readyState=4) if (http_request.status = 200) / 页面正常，可以开始处理信息 document.myForm.time.value=xmlHttp.responseText; else / 页面有问题 16 XMLHttpRequest对象方法 1、 open( ) 方法 open() 方法需要三个参数。 第一个参数定义发送请求所使用的方法（GET 还是 POST）。 第二个参数规定服务器端脚本的 URL。 第三个参数规定应当对请求进行异步地处理。 2、 send() 方法 send() 方法可将请求送往服务器。 17 DOM(Document Object Model)文档对象模型，它由W3C制定的 标准，它是一个能让程序和脚本动态访问和更新文档内容，结构及 样式的语言平台。 DOM分为三部分 核心，针对于任意文档的标准对象集合 XML DOM针对于XML文档处理的标准对象集 合 HTML DOM针对于HTML文档处理的标准对 象集合 文档对象模型DOM 18 DOM由一系列的节点对象组成，常见的DOM节点类型 Document文档对象 Element元素节点 Attribute属性节点 TextNode文本节点 DOM节点的类型 19 DOM节点都有一些公共的属性： nodeName 节点的名称，如果节点为文本节 点，根据不同的解析器将返回一个默认的值。 nodeValue 节点的值，如果对于元素节点， 那么不同的解析器将返回不同，有些返回空， 有些返回空字符串。 parentNode 节点的父节点，每个元素、属性 和文本都有一个父节点。 childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和 属性节点都没有孩子。 DOM节点属性 20 DOM节点都有一些公共的属性： firstChild 元素的 childNodes 列表中第一个 节点。 lastChild元素的childNodes 列表中的最后一 个节点。 previousSibling 当前节点之前 的兄弟节点。 nextSibling当前节点之前的后置节点。 attributes 当前元素的属性列表。 DOM节点属性 21 DOM节点公共的公共方法： insertBefore(newChild, referenceNode)在 当前元素的referenceNode孩子节点之前插入 newChild replaceChild(newChild, oldChild) 替代孩子 节点 removeChild(oldChild) 删除孩子节点 appendChild(newChild) 追加孩子节点 hasChildNodes() 检查节点是否存在孩子节点 hasAttributes() 检查节点是否存在属性 DOM节点方法 22 文档节点代表整个XML或HTML文档，常见属性及方法。 document.write(html)用于输出HTML内容 document.title文档标题 document.URL文档路径 document.referrer文档的加载路径 document.getElementById(id)根据id获取元 素 createElement(elementName) 使用给定的 名称创建一个元素。 createTextNode(text) 使用提供的文本创建 一个新的文本节点。 createAttribute(attributeName) 用提供的名 称创建一个新属性。 文档节点Document 23 元素节点具有与通用节点相同的属性和方法，另外它还具有一些常 用的方法： 属性处理： getAttribute(name) 返回名为 name 的属性值。 removeAttribute(name) 删除名为 name 的属性。 setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value 。 getAttributeNode(name) 返回名为 name 的属性节点。 removeAttributeNode(node) 删除与指定节点匹配的属性节点。 查找子元素： getElementsByTagName(elementName) 返回具有指定名称的元素节点列 表，包括子元素节点。 元素Element节点 24 元素节点具有与通用节点相同的属性和方法，另外它还具有一些常 用的方法： 属性处理： getAttribute(name) 返回名为 name 的属性值。 removeAttribute(na