软件开发架构平台技术：AJAX

软件开发架构平台技术CH05AJAXI目录Web的发展与AJAX的出现AJAX技术的核心概念异步对象XMLHttpRequest的使用JavaScript与DOMXML介绍互联网的发展互联网的发展过程互联网的发展Cont.Web2.0的特点内容聚合：RSS用户贡献内容社会化网络AJAX效果展示更丰富的用户体验和新的交互方式AJAX效果展示Cont.局部刷新页面，而不是整个页面AJAX效果展示Cont.连续不间断的用户体验AJAX效果展示Cont.提供类似C/S应用的交互效果AJAX是什么？AJAX:AsynchronousJavaScriptandXMLAsynchronous：异步，指客户端和服务端的通信方式。JavaScript:一种客户端脚本语言。(CSS,DOM)XML:数据的表示方式。AJAX核心概念同步和异步通信方式同步通信方式：即典型的请求响应模型。在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。AJAX核心概念Cont.同步和异步通信方式异步通信方式：异步发送请求，消除了传统的“发送请求－等待－发送请求－等待”的特性，极大的提高了用户体验，其核心是XMLHttpRequest对象。AJAX核心概念Cont.传统Web应用和AJAX应用的区别XMLHttpRequest对象XMLHttpRequestXMLHttpRequest对象是实现AJAX技术的核心技术，是一种支持异步通信的机制。XMLHttpRequest对象最早是在Microsoft的IE5中以Active

X组件形式实现的。XMLHttpRequest对象不是W3C中的内容，在不同浏览器上的表现有所不同，不过常用的方法和属性都得到了广泛的支持。XMLHttpRequest对象Cont.创建XMLHttpRequest对象varxmlHttpRequest;functioncreateXMLHttpRequest(){ if(window.XMLHttpRequest)//非IE浏览器

{ xmlHttpRequest=newXMLHttpRequest(); }

elseif(window.ActiveObject)//IE6以上版本的IE浏览器

{ xmlHttpRequest=newActiveObject("Msxml2.XMLHTTP"); }

else//IE6及以下版本IE浏览器

{ xmlHttpRequest=newActiveObject("Microsoft.XMLHTTP"); }}XMLHttpRequest对象Cont.XMLHttpRequest对象的常用方法方法描述abort()停止当前请求getAllResponseHeaders()将响应头作为键值对返回getResponseHeader(“header”)返回指定头部字段的值open(”method”,”url”)建立对服务器的调用。method参数表示请求方法，url表示请求的资源。send(content)向服务器发送请求setRequestHeader()设置请求头中某个字段的值XMLHttpRequest对象Cont.XMLHttpRequest对象的常用方法voidopen(Stringmethod,Stringurl,booleanasynch,Stringusername,Stringpassword)这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，三个可选的参数。第三个boolean值用于指定是异步还是同步通信方式，默认为true，即异步。voidsend(content)这个方法具体向服务器发出请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流，或者串。传入这个方法的内容会作为请求体的一部分发送XMLHttpRequest对象Cont.XMLHttpRequest对象的常用事件和属性属性或事件描述onreadystatechange请求的状态发生改变时会触发这个事件，通常会调用一个JavaScript函数。readyState表示请求状态的属性，有5个可取的值：0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成。responseText服务器的响应，表示为一个字符串responseXML服务器的响应，用XML封装，可以被解析为DOM。status服务器状态码XMLHttpRequest对象Cont.使用XMLHttpRequest对象完成异步通信的流程AJAX使用范例使用AJAX完成简单表单验证AJAX使用范例Cont.客户端register.jsp表单修改<form

action="register"

method="post"

name="registerForm"><td>

<input

type="text"

name="username"

onblur="usernameIsExist();"/>

<divid="usernameMsg"></div></td>AJAX使用范例Cont.客户端register.jsp的JavaScript部分1varxmlHttpRequest;functioncreateXMLHttpRequest(){ if(window.XMLHttpRequest)//非IE浏览器

{ xmlHttpRequest=newXMLHttpRequest(); }

elseif(window.ActiveObject)//IE6以上版本的IE浏览器

{ xmlHttpRequest=newActiveObject("Msxml2.XMLHTTP"); }

else//IE6及以下版本IE浏览器

{ xmlHttpRequest=newActiveObject("Microsoft.XMLHTTP"); }}AJAX使用范例Cont.客户端register.jsp的JavaScript部分2functionusernameIsExist(){

varusername=document.registerForm.username.value; sendRequest("usernameIsExist?username="+username);}functionsendRequest(url){ createXMLHttpRequest(); xmlHttpRequest.open("GET",url,true); xmlHttpRequest.onreadystatechange=processResponse; xmlHttpRequest.send(null);}AJAX使用范例Cont.服务端UsernameIsExistServlet.javapublic

voiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{ Stringusername=request.getParameter("username"); Accountaccount=newAccount(); account.setUsername(username); AccountServiceservice=newAccountService(); response.setContentType("text/xml"); PrintWriterout=response.getWriter();

if(service.usernameIsExist(account)){ out.println("<msg>Exist</msg>"); }

else{ out.println("<msg>NotExist</msg>"); } out.flush(); out.close();}AJAX使用范例Cont.客户端register.jsp的JavaScript部分3functionprocessResponse(){

if(xmlHttpRequest.readyState==4){

if(xmlHttpRequest.status==200){

varresponseInfo=xmlHttpRequest.responseXML. getElementsByTagName("msg")[0].firstChild.data;

vardiv1=document.getElementById("usernameMsg");

if(responseInfo=="Exist"){ div1.innerHTML="<fontcolor='red'>用户名已存在</font>"; }else{ div1.innerHTML="<fontcolor='green'>用户名可用</font>"; } } }}JavaScript简介什么是JavaScript？JavaScript是目前广泛用于客户端开发的一种脚本语言。最初由Netscape公司的Brendan

Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。学习JavaScript语言主要包括三个方面：JavaScript语法内置对象BOM&DOMJavaScript简介Cont.BOM——浏览器对象模型BOM模型提供了独立于内容而与浏览器窗口进行交互的一系列对象。通过这些对象描述了操作浏览器的方法和接口，如弹出新窗口等。JavaScript简介Cont.DOM——文档对象模型DOM是一种标准、规范，不针对特定浏览器和特定语言。DOM规范中包含的是一系列针对XML文档或HTML文档树结构的API。通过这些API能够对XML或HTML文档中的内容进行操作。JavaScript简介Cont.通过DOM获取HTML页面元素一般使用下列三种方法：document.getElementById("p1");document.getElementsByTagName("p");document.getElementsByName("check");通过DOM输出内容到网页一般通过innerHTML：document.getElementById(id).innerHTML=newHTML;<pid="p1">HelloWorld!</p><script> document.getElementById("p1").innerHTML="Newtext!";</script>JavaScript简介Cont.通过DOM改变HTML元素的样式一般使用元素的style相关属性：document.getElementById(id).perty=newstyle;<pid="p2">HelloWorld!</p><script> document.getElementById("p2").style.color="blue";</script>XML简介XML——eXtensibleMarkupLanguage可扩展标记语言XML被设计为易于实现，且可在SGML和HTML之间互操作。标记语言的发展：XML简介Cont.XML语法规范XML规范将一个XML文档分为序言和文档元素两个部分。其中序言部分包含XML声明、注释和文档类型定义等；文档元素部分则包含元素、子元素、属性和文本等。XML声明：XML声明必须是文档的第一行。<?xmlversion="1.0"encoding="UTF-8"standalone="yes"?>XML简介Cont.XML语法规范——根元素每个XML文档有且只有一个根元素。根元素是一个完全包含文档中其他所有元素的元素。<?xmlversion="1.0"encoding="gb2312"?><movies><movietype="冒险片"> <title>空中监狱</title> <actor>尼古拉斯凯奇</actor> <rating>家长指引</rating></movie></movies>XML简介Cont.XML语法规范——元素一个元素由开始标记、结束标记、可选属性和可选文本组成。XML简介Cont.XML文件的格式问题格式良好的XML文档，即符合XML规范的最低要求。必须有声明语句有且仅有一个根元素大小写敏感、属性值用引号、标记成对、空标记关闭。。。有效的XML文档——格式良好+符合DTD或SchemeXML简介Cont.DTD：DocumentTypeDefinition，文档类型定义DTD用来描述XML文档的结构，一个DTD文档包含：元素(ELEMENT)的定义规则元素之间的关系规则属性(ATTLIST)的定义规则可使用的实体(ENTITY)或符号(NOTATION)规则DTD文档与XML文档实例的关系类与对象数据库表结构与数据记录为什么需要DTD文档不同组织的人可以使用一个通用DTD用来交换数据。应用程序可以使用一个标准DTD校验从外部世界接受来的XML数据是否有效。XML简介Cont.DTD使用范例<?xmlversion='1.0'encoding='gb2312'?><!DOCTYPE poem[ <!ELEMENTpoem(author,title,content) <!ELEMENTauthor(#PCDATA