AJAX基础教程.ppt

AJAX,2,Ajax简介Ajax原理XMLHttpRequest的使用DOM简介利用DOM操纵HTML文档Ajax请求响应使用XML文档,目标,3,AJAX（AsynchronousJavaScriptandXML）它是一种由多种技术组合的技术。包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等XHTML，CSS用于呈现DOM实现动态显示和交互XML和XSTL进行数据交换与处理XMLHttpRequest对象用于进行异步数据读取Javascript绑定和处理所有数据,AJAX简介,4,传统的Web应用采用同步交互过程。,传统Web应用同步处理,5,传统的Web应用采用同步交互过程。,传统Web应用同步处理,6,传统的Web应用中，用户单击一个链接后，待需要等待，直到另外一个页面刷新显示。如果仅仅需要改变页面的某一部分的内容，也不得不刷新整个页面。,传统Web应用同步处理,7,Ajax采用异步方式与后台交互。,基于Ajax的异步处理,用户界面,AJAX引擎,WEB服务器,后台业务系统,JavaScrip调用,HTML+CSS,Http请求,XML,JSON数据,Web浏览器,后台服务器,8,基于AJAX的异步交互过程,传统Web应用同步处理,9,AJAX异步处理的优点减轻服务器的负担，AJAX一般只从服务器获取只需要的数据。无刷新页面更新，减少用户等待时间。更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验。基于标准化的对象，不需要安装特定的插件绝大多数的游览器都能执行彻底将页面与数据分离。,传统Web应用同步处理,10,AJAX核心对象是XMLHttpRequest，该对象在JavaScript中可用于构建异步的后台服务的调用。通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，不同的浏览器它的构建方式并不一样：,AJAX应用开发,Mozilla,NetScape：,varhttpRequest=newXMLHttpRequest();,IE：,varhttpRequest=newActiveXObject(“MSXML.XMLHTTP”);或varhttpRequest=newActiveXObject(MSXML2.XMLHTTP);,11,使用XMLHttpRequest异步调用后台服务的基本步骤：初始化XMLHttpRequest对象指定响应处理函数(回调方法)发出HTTP请求处理服务器返回的信息,XMLHttpRequest的使用,12,不同的浏览器构建方式并不一样，示例展示了适合IE和Mozilla浏览器的构建立方式：,初始化XMLHttpRequest,if(window.XMLHttpRequest)/Mozilla,Safari,.http_request=newXMLHttpRequest();elseif(window.ActiveXObject)/IEhttp_request=newActiveXObject(Microsoft.XMLHTTP);,设置返回服务器返回数据类型的MIME格式,http_request.overrideMimeType(“text/xml”);,13,回调方法在服务器端返回信息给客户端时被调用，只需将回调方法指定给XMLHttpRequest对象的onreadystatechange属性即可，示例中展示了两种设置方法。,指定响应处理函数(回调方法),varprocessRequest=function()http_request.onreadystatechange=processRequest;,http_request.onreadystatechange=function(),14,在发送请求前需要调用XMLHttpRequest的open方法打开链接，之后可通过其send方法发送请求。,发出HTTP请求,http_request.open(GET,htt:/localhost:8080/useprj/findProduct?id=01,true);,open方法的三个参数分别为：请求的方式GET,POST,HEAD请求的路径是否异步请求，如果指定为异步，在请求发送后，浏览器继续执行，否则等待。,15,XMLHttpRequest的send方法用于向服务器发送请求。,发出HTTP请求,http_request.send(null);,请求如果是以POST方式发出，send方法的参数对应发送到服务器的数据，如果数据为上传的文件，需要设置请求的头信息，例如：,http_request.setRequestHeader(“Content-Type”,”multipart/form-data”);,16,请求发送后，浏览器会根据请求或响应的状态调用XMLHttpRequest的回调方法，状态信息保存在XMLHttpRequest对象的readyState属性中。不同的readyState值对应响应的不同阶段，当readyState的值为4时表示服务器响应完成。示例代码中根据返回的状态及响应的结果状态，执行处理。,处理服务器返回,if(http_request.readyState=4)/信息已经返回，可以开始处理if(http_request.status=200)/页面正常，可以开始处理信息else/页面有问题else/信息还没有返回，等待,17,XMLHttpRequest成功返回的信息有两种处理方式：responseText该属性以字符串的形式返回响应的值responseXML该属性将返回结果作为一个XML的DOM文档返回，可以执行DOM处理。示例中获取响应的文本并显示,处理服务器返回,if(http_request.readyState=4)if(http_request.status=200)alert(http_request.responseText);,18,示例展示了无刷新的验证用户代码的客户端HTML代码：,无刷新用户登录,用户登录帐号：密码：,19,验证用户代码的客户端AJAX代码：,无刷新用户登录,functioncheckUserLogin()varrequest=null;tryrequest=newActiveXObject(MSXML.XMLHTTP);catch(e)request=newXMLHttpRequest();request.onreadystatechange=function()if(request.readyState=4)if(request.status=200)if(request.responseText=true)document.write(欢迎光临!);elsedocument.getElementById(msg).innerHTML=request.responseText;document.loginform.reset();request.open(post,LoginServlet,true);varuserid=document.loginform.userid.value;varpwd=document.loginform.pwd.value;request.setRequestHeader(Content-type,application/x-www-form-urlencoded);request.send(userid=+userid+,20,验证用户代码的服务器端代码,无刷新用户登录,request.setCharacterEncoding(utf-8);response.setContentType(text/html;charset=utf-8);PrintWriterout=response.getWriter();Stringuserid=request.getParameter(userid);Stringpwd=request.getParameter(pwd);if(jerry.equals(userid),21,DOM(DocumentObjectModel)文档对象模型，它由W3C制定的标准，它是一个能让程序和脚本动态访问和更新文档内容，结构及样式的语言平台。DOM分为三部分核心，针对于任意文档的标准对象集合XMLDOM针对于XML文档处理的标准对象集合HTMLDOM针对于HTML文档处理的标准对象集合,文档对象模型DOM,22,DOM由一系列的节点对象组成，常见的DOM节点类型Document文档对象Element元素节点Attribute属性节点TextNode文本节点,DOM节点的类型,23,DOM节点都有一些公共的属性：nodeName节点的名称，如果节点为文本节点，根据不同的解析器将返回一个默认的值。nodeValue节点的值，如果对于元素节点，那么不同的解析器将返回不同，有些返回空，有些返回空字符串。parentNode节点的父节点，每个元素、属性和文本都有一个父节点。childNodes是节点的孩子节点列表。对于HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。,DOM节点属性,24,DOM节点都有一些公共的属性：firstChild元素的childNodes列表中第一个节点。lastChild元素的childNodes列表中的最后一个节点。previousSibling当前节点之前的兄弟节点。nextSibling当前节点之前的后置节点。attributes当前元素的属性列表。,DOM节点属性,25,DOM节点公共的公共方法：insertBefore(newChild,referenceNode)在当前元素的referenceNode孩子节点之前插入newChildreplaceChild(newChild,oldChild)替代孩子节点removeChild(oldChild)删除孩子节点appendChild(newChild)追加孩子节点hasChildNodes()检查节点是否存在孩子节点hasAttributes()检查节点是否存在属性,DOM节点方法,26,文档节点代表整个XML或HTML文档，常见属性及方法。document.write(html)用于输出HTML内容document.title文档标题document.URL文档路径document.referrer文档的加载路径document.getElementById(id)根据id获取元素createElement(elementName)使用给定的名称创建一个元素。createTextNode(text)使用提供的文本创建一个新的文本节点。createAttribute(attributeName)用提供的名称创建一个新属性。,文档节点Document,27,元素节点具有与通用节点相同的属性和方法，另外它还具有一些常用的方法：属性处理：getAttribute(name)返回名为name的属性值。removeAttribute(name)删除名为name的属性。setAttribute(name,value)创建一个名为name的属性并将其值设为value。getAttributeNode(name)返回名为name的属性节点。removeAttributeNode(node)删除与指定节点匹配的属性节点。查找子元素：getElementsByTagName(elementName)返回具有指定名称的元素节点列表，包括子元素节点。,元素Element节点,28,元素节点具有与通用节点相同的属性和方法，另外它还具有一些常用的方法：属性处理：getAttribute(name)返回名为name的属性值。removeAttribute(name)删除名为name的属性。setAttribute(name,value)创建一个名为name的属性并将其值设为value。getAttributeNode(name)返回名为name的属性节点。removeAttributeNode(node)删除与指定