AJAX基础教程

《AJAX基础教程》由会员分享，可在线阅读，更多相关《AJAX基础教程（31页珍藏版）》请在装配图网上搜索。

1、AJAXAJAX基础教程基础教程2vAjax简介vAjax原理vXMLHttpRequest的使用vDOM简介v利用DOM操纵HTML文档vAjax请求响应使用XML文档目标3vAJAX（Asynchronous JavaScript and XML）它是一种由多种技术组合的技术。v包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等XHTML，CSS用于呈现DOM实现动态显示和交互 XML和XSTL进行数据交换与处理 XMLHttpRequest对象用于进行异步数据读取 Javascript绑定和处理所有数据 AJAX简介4v传统的Web应

2、用采用同步交互过程。传统Web应用同步处理5v传统的Web应用采用同步交互过程。传统Web应用同步处理6v传统的Web应用中，用户单击一个链接后，待需要等待，直到另外一个页面刷新显示。v如果仅仅需要改变页面的某一部分的内容，也不得不刷新整个页面。传统Web应用同步处理7vAjax采用异步方式与后台交互。基于Ajax的异步处理用户界面AJAX引擎WEB服务器后台业务系统JavaScrip调用HTML+CSSHttp请求XML,JSON数据Web浏览器后台服务器8v基于AJAX的异步交互过程传统Web应用同步处理9vAJAX异步处理的优点减轻服务器的负担，AJAX一般只从服务器获取只需要的数据。无

3、刷新页面更新，减少用户等待时间。更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验。基于标准化的对象，不需要安装特定的插件绝大多数的游览器都能执行彻底将页面与数据分离。传统Web应用同步处理10vAJAX核心对象是XMLHttpRequest，该对象在JavaScript中可用于构建异步的后台服务的调用。v通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，不同的浏览器它的构建方式并不一样：AJAX应用开发qMozilla,NetScape：varhttpRequest=newXMLHttpRequest();qIE：

4、varhttpRequest=newActiveXObject(“MSXML.XMLHTTP”);或varhttpRequest=newActiveXObject(MSXML2.XMLHTTP);11v使用XMLHttpRequest异步调用后台服务的基本步骤：初始化XMLHttpRequest对象指定响应处理函数(回调方法)发出HTTP请求处理服务器返回的信息XMLHttpRequest的使用12v不同的浏览器构建方式并不一样，示例展示了适合IE和Mozilla浏览器的构建立方式：初始化XMLHttpRequestif(window.XMLHttpRequest)/Mozilla,Safar

5、i,.http_request=newXMLHttpRequest();elseif(window.ActiveXObject)/IEhttp_request=newActiveXObject(Microsoft.XMLHTTP);q设置返回服务器返回数据类型的MIME格式http_request.overrideMimeType(“text/xml”);13v回调方法在服务器端返回信息给客户端时被调用，只需将回调方法指定给XMLHttpRequest对象的onreadystatechange属性即可，示例中展示了两种设置方法。指定响应处理函数(回调方法)varprocessRequest=f

6、unction()http_request.onreadystatechange=processRequest;http_request.onreadystatechange=function()14v在发送请求前需要调用XMLHttpRequest的open方法打开链接，之后可通过其send方法发送请求。发出HTTP请求http_request.open(GET,htt:/localhost:8080/useprj/findProduct?id=01,true);qopen方法的三个参数分别为：q请求的方式GET,POST,HEADq请求的路径q是否异步请求，如果指定为异步，在请求发送后，浏

7、览器继续执行，否则等待。15vXMLHttpRequest的send方法用于向服务器发送请求。发出HTTP请求http_request.send(null);q请求如果是以POST方式发出，send方法的参数对应发送到服务器的数据，如果数据为上传的文件，需要设置请求的头信息，例如：http_request.setRequestHeader(“Content-Type”,”multipart/form-data”);16v请求发送后，浏览器会根据请求或响应的状态调用XMLHttpRequest的回调方法，状态信息保存在XMLHttpRequest对象的readyState属性中。v不同的read

8、yState值对应响应的不同阶段，当readyState的值为4时表示服务器响应完成。v示例代码中根据返回的状态及响应的结果状态，执行处理。处理服务器返回if(http_request.readyState=4)/信息已经返回，可以开始处理if(http_request.status=200)/页面正常，可以开始处理信息else/页面有问题else/信息还没有返回，等待17vXMLHttpRequest成功返回的信息有两种处理方式：responseText该属性以字符串的形式返回响应的值responseXML该属性将返回结果作为一个XML的DOM文档返回，可以执行DOM处理。v示例中获取响应的

9、文本并显示处理服务器返回if(http_request.readyState=4)if(http_request.status=200)alert(http_request.responseText);18v示例展示了无刷新的验证用户代码的客户端HTML代码：无刷新用户登录用户登录帐号：密码：19v验证用户代码的客户端AJAX代码：无刷新用户登录functioncheckUserLogin()varrequest=null;tryrequest=newActiveXObject(MSXML.XMLHTTP);catch(e)request=newXMLHttpRequest();request

10、.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;var

11、pwd=document.loginform.pwd.value;request.setRequestHeader(Content-type,application/x-www-form-urlencoded);request.send(userid=+userid+&pwd=+pwd);20v验证用户代码的服务器端代码无刷新用户登录request.setCharacterEncoding(utf-8);response.setContentType(text/html;charset=utf-8);PrintWriterout=response.getWriter();Stringuseri

12、d=request.getParameter(userid);Stringpwd=request.getParameter(pwd);if(jerry.equals(userid)&123.equals(pwd)out.write(true);elseout.write(登录失败，用户名或密码不对！);21vDOM(Document Object Model)文档对象模型，它由W3C制定的标准，它是一个能让程序和脚本动态访问和更新文档内容，结构及样式的语言平台。vDOM分为三部分核心，针对于任意文档的标准对象集合XML DOM针对于XML文档处理的标准对象集合HTML DOM针对于HTML文档

13、处理的标准对象集合文档对象模型DOM22vDOM由一系列的节点对象组成，常见的DOM节点类型Document文档对象Element元素节点Attribute属性节点TextNode文本节点DOM节点的类型23vDOM节点都有一些公共的属性：nodeName 节点的名称，如果节点为文本节点，根据不同的解析器将返回一个默认的值。nodeValue 节点的值，如果对于元素节点，那么不同的解析器将返回不同，有些返回空，有些返回空字符串。parentNode 节点的父节点，每个元素、属性和文本都有一个父节点。childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性

14、节点都没有孩子。DOM节点属性24vDOM节点都有一些公共的属性：firstChild 元素的 childNodes 列表中第一个节点。lastChild元素的childNodes 列表中的最后一个节点。previousSibling 当前节点之前 的兄弟节点。nextSibling当前节点之前的后置节点。attributes 当前元素的属性列表。DOM节点属性25vDOM节点公共的公共方法：insertBefore(newChild,referenceNode)在当前元素的referenceNode孩子节点之前插入newChildreplaceChild(newChild,oldChild)

15、替代孩子节点removeChild(oldChild)删除孩子节点appendChild(newChild)追加孩子节点hasChildNodes()检查节点是否存在孩子节点hasAttributes()检查节点是否存在属性DOM节点方法26v文档节点代表整个XML或HTML文档，常见属性及方法。document.write(html)用于输出HTML内容document.title文档标题document.URL文档路径document.referrer文档的加载路径document.getElementById(id)根据id获取元素createElement(elementName)使用

16、给定的名称创建一个元素。createTextNode(text)使用提供的文本创建一个新的文本节点。createAttribute(attributeName)用提供的名称创建一个新属性。文档节点Document27v元素节点具有与通用节点相同的属性和方法，另外它还具有一些常用的方法：属性处理：getAttribute(name)返回名为 name 的属性值。removeAttribute(name)删除名为 name 的属性。setAttribute(name,value)创建一个名为 name 的属性并将其值设为 value。getAttributeNode(name)返回名为 name

17、的属性节点。removeAttributeNode(node)删除与指定节点匹配的属性节点。查找子元素：getElementsByTagName(elementName)返回具有指定名称的元素节点列表，包括子元素节点。元素Element节点28v元素节点具有与通用节点相同的属性和方法，另外它还具有一些常用的方法：属性处理：getAttribute(name)返回名为 name 的属性值。removeAttribute(name)删除名为 name 的属性。setAttribute(name,value)创建一个名为 name 的属性并将其值设为 value。getAttributeNode(n

18、ame)返回名为 name 的属性节点。removeAttributeNode(node)删除与指定节点匹配的属性节点。查找子元素：getElementsByTagName(elementName)返回具有指定名称的元素节点列表，包括子元素节点。元素Element节点29v通过XMLHttpReques的responseXML属性，可以将服务器获取的内容作为一个XML的DOM对象。v部分浏览器需要设置XMLHttpReques的MIME格式。处理AJAX XMLDOMrequest.overrideMimeType(“text/xml”);30总结vAJAX的原理v同步与异步的区别vAJAX应用的基本开发步骤vDOM的使用结束结束