异步传输概念及流程.ppt

异步传输概念及流程,AJAX技术,Ajax概念,Asynchronous JavaScriptXML Ajax不是一个新的技术，应算一个技巧 JavaScript是其主要的组件 XMLHttpRequest对象(XHR)是Ajax中的重要对象,Ajax概念,互联网默认的请求/响应模式有了重大转变，这正式Ajax的核心 Web应用开发人员可以自由地与服务器异步交互 可以完成许多原本只能在胖客户上完成的任务,Ajax概念,Ajax是一个客户端技术，不论使用何种服务器端技术，都能使用Ajax 需要注意的是，使用Ajax，服务器端程序可能不会返回一个完整页面，而只是返回一点点文本,Ajax的四个主要组件,JavaScript CSS DOM XMLHttpRequest对象,XMLHttpRequest对象,XMLHttpRequest最早是在IE5中以ActiveX组件形式实现的 最近，很多新的浏览器都支持XHR,创建XMLHttpRequest对象,使用XHR前，必须用JavaScript创建一个XHR对象 IE把XHR实现为一个ActiveX对象 其他浏览器实现为一个本地JavaScript对象 由于这些差别，所以创建XHR时需要用分支逻辑,创建XMLHttpRequest对象,Var xmlHttp; Function createXMLHttpRequest() if(window.ActiveXObject) xmlHttp=new ActiveXObject(“Microsoft.XMLHttp”); else if(window.XMLHttpRequest) xmlHttp=new XMLHttpRequest(); ,XMLHttpRequest方法,Abort:停止当前请求 getAllResponseHeaders:把Http请求的所有响应首部作为键/值对返回 getResponseHeader(“header”):返回指定首部的串值,XMLHttpRequest方法,Open(“method”,”url”):建立对服务器的调用，method可以是get、post、或put Send（content）:向服务器发送请求，POST方式是，数据用此方法发送，GET方式时一般为NULL setRequestHeader(“header”,”value”):为首部设定值，之前必须调用open方法,XMLHttpRequest属性,Onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数 readyState：请求的状态。有5个可取值：0未初始化，1正在加载，2已加载。3交互中，4完成 responseText:服务器的响应，表示为一个字符串,XMLHttpRequest属性,responseXML:服务器的响应，表示为XML，这个对象可以解析成一个DOM对象 status:服务器的HTTP状态码（200为ok，404为Not Found） statusText:HTTP状态码的对应文本（OK，NOT Found等）,GET与POST,用GET方式，向服务器发送的数据都追加到URL后，所以长度往往受限制 POST方式，长度不受限，需要用XHR对象设置Content-Type首部，如下 xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”),发送简单请求步骤,创建XHR对象 告诉XHR对象，哪个函数会处理XHR对象状态的改变，为此，要把对象的onreadystatechange属性设置为指向JavaScript函数的指针 指定请求的属性，用open方法，指定HTTP方式，请求的URL，默认为异步 将请求发送给服务器，用send方法，参数可以是串或DOM对象，不过有参数时，一定是POST方式,处理服务器响应,XHR对象提供了两个可以用来访问服务器响应的属性 第一个属性responseText将响应提供为一个串 第二个属性responseXML将响应提供为一个XML对象,使用innerHTML属性,结合HTML元素的innerHTML属性，responseText属性就会变得非常有用 innerHTML是一个串，表示一组开始标记和结束标记之间的内容 如： Document.getElementById(“results”).innerHTML=xmlHttp.responseText; 其中results是div,将响应解析成XML,如果服务器端，把Content-Type设置为text/xml，则返回的是XML 浏览器把返回的XML看成是DOM对象 接下来，看看DOM是什么？,DOM基本概念,文档对象模型（DOM）是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式 可以把DOM认为是页面上数据和结构的一个树形表示,DOM与JavaScript,DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本访问文档结构 JavaScript则是用于访问和处理DOM的语言 文档中每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法,DOM与JavaScript,DOM独立于具体的变成语言，通常用JavaScript访问DOM，不过并不是严格要求这样 可以使用任何脚本语言访问DOM，因为DOM有一致的API 有了DOM，就能编写跨浏览器的脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质,用于处理XML文档的DOM属性,childNodes:返回当前元素所有子元素的数组 firstChild:返回当前元素的第一个下级子元素 lastChild:返回当前元素的最后一个子元素,用于处理XML文档的DOM属性,nextSibling:返回紧跟在当前元素后面的元素 nodeValue：指定表示元素值的读、写属性 parentNode：返回元素的父节点 previousSibling：返回紧邻当前元素之前的元素,用于处理XML文档的DOM方法,getElementById(document):获取有指定唯一ID属性值文档中的元素 getElementByTagName(name):返回当前元素中指定标记名的子元素的数组,用于处理XML文档的DOM方法,hasChildNodes():返回布尔值，表示元素是否有子元素 getAttribute(name):返回元素的属性值，属性由name指定,动态创建内容时的DOM方法,Document.createElement(tagName):可以创建由tagName指定的元素，如果以div为参数，就会生成一个div元素 Document.createTextNode(text)：创建包含静态文本的节点 .appendChild(childNode)：将指定的节点增加到当前元素的子节点（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点,动态创建内容时的DOM方法,.getAttribute(name)：获得元素中name属性的值 .setAttribute(name,value)：设置属性 .insertBefore(newNode,targetNode)：将节点newNod