|
AJAX是一中运用JavaScript和可扩展编辑语言（XML），在网络浏览器和服务器之间传送或接收数据的技术。
AJAX的工作原理相当与在用户和服务器之间加了一个中间层，使用户请求与服务器响应异步化。这样还可以把以前的一些服务器负担的工作转交给客户端，利用客户端闲置的处理能力来处理，减轻服务器和宽带的负担。 AJAX是WEB2.0的核心之一．AJAX技术运用与浏览器中，使向服务器索取网页的部分信息成为可能． XMLHttpRequest对象 XMLHttpRequest提供客户端同HTTP服务器异步通信的协议．通过这个协议，AJAX可以使页面象桌面程序一样同服务器端进行数据层面的交换，而不必每次都刷新页面，也不用每次都将数据处理的工作都交给服务器来做，这样既减轻了服务器负担又加快了响应速度，缩短了用户等待的时间． XMLHttpRequest对象的方法： Abort() 停止当前请求 getAllResponseHeaders() 返回HTTP请求的所有响应头部的键/值字符串 getResponseHeader("header") 返回指定头部属性的字符串值 Open("method", "url") 建立对服务器的调用。Method参数可以是GET POST PUT, url参数可以是相对URL或绝对对 URL Send(content) 向服务器发送请求 setRequestHeader("header","value") 为指定头部属性设置指定值 XMLHttpRequest对象的属性： Onreadystatechange 状态改变的时间触发器，通常绑定一个JavaScript 函数，每当状态发生改变时，就调用该函数 readyState 请求的状态，有5个可取值： 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 responseText 从服务器返回的文本形式的响应内容 responseXML 从服务器返回的兼容DOM的XML文档对象 Status 从服务器返回的状态码，例如404="文件找不到" 200 = "成功" statusText 从服务器返回的状态文本信息，例如OK或Not Found(未找到) <script language = "javascript"> //定义一个将指向XMLHttpRequest对象的变量 var xmlHttp; //定义一个函数用于创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } //定义一个函数用于启动与服务器的异步同信 function begin(){ createXMLHttpRequest(); //调用createXMLHttpRequest函数 xmlHttp.onreadystatechange = processor; //将事件触发器绑定到 processor上 xmlHttp.open("GET", "test.xml"); //使用GET方法建立对服务器资 源test.xml的一个异步调用 xmlHttp.send(null); //向服务器发送请求 } //定义一个状态处理函数用于处理状态触发器的状态改变 function processor(){ //如果处理请求完成 if(xmlHttp.readyState == 4){ //如果服务器返回状态为成功 if(xmlHttp.status = 200){ //将从服务器返回的内容报告给用户 alert("从服务器返回的内容为：" + xmlHttp.responseText); } } } </script> DOM是面向HTML和XML文档的一组API，它为文档提供了结构化的表示，并定义了如何通过脚本（JavaScript）来访问文档结构。如果没有DOM，JavaScript根本就不存在Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，可通过JavaScript来访问这些元素的属性和方法，实现动态编辑页面的功能。 这里所说的DOM是符合W3C标准的文档对象模型，它以树型结构表示HTML和XML文档，并定义可操作这个树及其节点的一系列方法和属性。在网络浏览器端，通过JavaScript利用DOM提供的API来操作HTML和XML文档。 1.操作HTML文档 HTML文档各个节点在DOM中被视为个种类型的Node对象.而且每个 Node对象都有自己的属性和方法,通常利用这些属性和方法来遍历或动态编辑整个树。 操作HTML文档的常用DOM方法： getElementById(isIDValue) 返回文档中具有指定id属性的元素 getElementByTabName(isTagName) 返回当前元素中有指定标记名的子元素 的数组 appendChild(childNode) 在当前节点的childNodes[]组中增加一个 节点childNode cloneNode(false | true) false表示仅复制当前节点；true表示复制 当前节点以及它的所有子孙节点 hasChildNodes() 判断当前节点是否拥有子节点，有则返回 true insertBefore(newNode,targetNode) 将节点newNode作为当前元素的子节点 插到targetNode元素前面 removeChild(childNode) 从文档树中删除子节点childNode resplaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode getAttribute(sAttrName) 返回指定属性的字符串值 setAttribute(sAttriName, vAttrValue) 把指定的属性设置为镇定的字符串值，如 果该属性不存在则添加一个新属性 removeAttribute(sAttrName) 从元素中删除属性sAttrName 操作HTML文档的常用DOM属性： Attributes 如果该节点是一个Element,则以NamedNodeMap 形式返回该元素的属性 childNodes 以Node[]的形式存放当前节点的子节点，如果没 有子节点，则返回空数组 firstChild 以Node的形式返回当前节点的第一个子节点，如 果没有子节点，则为null lastChild 以Node的形式返回当前节点的最后一个节点，如 果没有子节点，则为null nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null nodeName 节点的名字，Element节点则代表Element的标记 名称 nodeType 代表节点的类型 parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null 操作XML文档 在数据的表示和交换方面XML文档更具优势，针对XML的访问和操作，DOM也用样提供了一系列的API。利用这些API，可方便地从XML文档中读取数据信息，动态创建展示这些数据信息的HTML页面。 操作XML文档，通常遵循以下4个步骤： 载入整个XML文档 从XML文档中提取数据信息 对提取的信息进行加工处理 创建包含处理结果的HTML页面展示给用户 遍历XML文档的常用DOM方法: getElementById(sIDValue) 返回文档中具体指定id属性的元素 getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组 hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值 操作XML文档的常用DOM属性: childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组 firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null nodeName 节点的名字，Element节点则代表Element的标记 名称 nodeType 代表节点的类型 parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null |
|
|
