慧桥教育Ajax学习课件

Copyright©2008-2009WitBridge©2005IBMCorporation课程安排Ajax基础使用Ajax发送异步请求在请求和响应中使用XML使用JSON进行数据传输3ProcessandPortfolioManagement©2005IBMCorporation第一讲Ajax基础4ProcessandPortfolioManagement©2005IBMCorporation什么是Ajax?先来点感觉，看些例子…BACKBASE购物网站GoogleSuggestGoogleMapandmanymore…5ProcessandPortfolioManagement©2005IBMCorporationAjax定义Ajax(AsynchronousJavaScriptandXML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起Ajax的关键技术：使用XHTML(HTML)和CSS构建标准化的展示层使用DOM进行动态显示和交互使用XML和XSLT进行数据交换和操纵使用XMLHttpRequest异步获取数据使用JavaScript将所有元素绑定在一起6ProcessandPortfolioManagement©2005IBMCorporation传统Web应用与Ajax应用的比较7ProcessandPortfolioManagement©2005IBMCorporation传统Web应用与Ajax应用的比较（cont.）在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？只有等待！8ProcessandPortfolioManagement©2005IBMCorporation传统Web应用与Ajax应用的比较（cont.）在传统的Web应用模型下，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理：沙漏（特别是Windows上）旋转皮球（通常在Mac机器上）应用程序基本上冻结了，然后过一段时间光标变化了这正是传统Web应用程序让人感到笨拙或缓慢的原因——缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长9ProcessandPortfolioManagement©2005IBMCorporation传统Web应用与Ajax应用的比较（cont.）Ajax应用通过在用户和服务器之间引入一个媒介（Ajaxengine）来异步发送请求，消除了传统的发送请求－等待－发送请求－等待的特性，极大的提高了用户体验10ProcessandPortfolioManagement©2005IBMCorporationJavaScript基础11ProcessandPortfolioManagement©2005IBMCorporationJavaScript简介JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行在HTML基础上，使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容注意，JavaScript与Java没有任何联系12ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——语句JavaScript脚本的基本组成单位。只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号“；”结束:firststatementsecondstatement但在每条语句的末尾添加“；”是一种良好的编程习惯：firststatement;secondstatement;13ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——注释单行注释（双斜杠）：//line1多行注释：/*line1line2*/HTML风格注释（不推荐使用）：!--line1注意，不需要以“--”来结束14ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——变量JavaScript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明：varage=33;mood=“happy”;但是提前对变量做出声明是一种良好的编程习惯变量名允许包含字母、数字、美元符号($)和下划线字符，但不允许包括空格或标点符号15ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——数据类型JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值：varage=“thirtythree”;age=33;JavaScript中重要的数据类型：未定义（undefined），变量未定义空（null），变量未初始化字符串（string），可以放在单引号或双引号中数值（number），可以表示整数、浮点数布尔型（boolean），true或false对象（object）16ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——数组数组用来存储一组值，使用关键字Array来声明，声明时可以指明数组的长度：varcolors=newArray();varcolors=newArray(3);其中new关键字可以省略，类似其它语言，数组的下标从0开始，赋值方法也和其它语言类似：colors[0]=“red”;colors[1]=“black”;colors[2]=“white”;还可以使用方括号创建数组时同时初始化：varcolors=[“red”,“black”,“white”];17ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——数组（cont.）使用方括号创建数组对象的简单方法：varcolors=[];//声明空数组对象colors[0]=“red”;colors[1]=“black”;通过数组的length属性可以得到数组中元素的个数。数组的长度可以动态扩展：colors[3]=“blue”;colors[8]=“grey”;关联数组：在填充数组时为每个新元素明确地给出下标：colors[“r”]=“red”;colors[“b”]=“black”;18ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——操作、条件语句、循环语句JavaScript中的算术运算符（+、-、*、/、++、--等）、比较运算符（、、=、=、=）、条件语句（if、while、for等）19ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——函数使用函数可以避免重复输入大量相同的内容。JavaScript中使用function关键字定义函数：functionfuncname(arg1,arg2,…){statements;}声明一个简单的函数：functionmultiply(num1,num2){vartotal=num1*num2;returntotal;}声明后可以直接调用此函数获取结果：varresult=multiply(5,9);注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型20ProcessandPortfolioManagement©2005IBMCorporationJavaScript语法——对象JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问：object.propertyobject.method()使用函数来定义“类”：functionPerson(){this.age=12;this.name=“noname”;this.sayHello=function(){alert(“Hello”+this.name);//其中this关键字不能省略！}}使用new关键字来创建对象实例：varvincent=newPerson();21ProcessandPortfolioManagement©2005IBMCorporationDOM基础22ProcessandPortfolioManagement©2005IBMCorporationDOM简介DOM是”DocumentObjectModel”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型DOM把一份文档表示为一棵树23ProcessandPortfolioManagement©2005IBMCorporationDOM树结构如下的HTML页面：24ProcessandPortfolioManagement©2005IBMCorporationDOM树结构（cont.）浏览器加载该页面并将之转换为树形结构：25ProcessandPortfolioManagement©2005IBMCorporationDOM树结构（cont.）DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（rootelement）从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本“Trees,trees,everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本“Trees,trees,everywhere”的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构通常把这样的树结构成为一棵节点树26ProcessandPortfolioManagement©2005IBMCorporation节点（node）DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶DOM中节点的类型：元素节点（elementnode），诸如head、p、div等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是html，它是根元素属性节点（attributenode），元素或多或少地有一些属性，属性可以