慧桥教育Ajax学习课件.ppt

慧桥教育Ajax学习课件.ppt

《慧桥教育Ajax学习课件.ppt》由会员分享，可在线阅读，更多相关《慧桥教育Ajax学习课件.ppt（82页珍藏版）》请在冰豆网上搜索。

,Ajax,课程安排,Ajax基础使用Ajax发送异步请求在请求和响应中使用XML使用JSON进行数据传输,第一讲,Ajax基础,什么是Ajax?

先来点感觉，看些例子BACKBASE购物网站GoogleSuggestGoogleMapandmanymore,Ajax定义,Ajax（AsynchronousJavaScriptandXML）不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起Ajax的关键技术：

使用XHTML（HTML）和CSS构建标准化的展示层使用DOM进行动态显示和交互使用XML和XSLT进行数据交换和操纵使用XMLHttpRequest异步获取数据使用JavaScript将所有元素绑定在一起,传统Web应用与Ajax应用的比较,传统Web应用与Ajax应用的比较（cont.）,在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。

当服务器处理请求时，用户能够做什么呢？

只有等待！

传统Web应用与Ajax应用的比较（cont.）,在传统的Web应用模型下，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。

该请求是同步的，客户机等待服务器的响应。

当客户机等待的时候，会用某种形式通知您正在处理：

沙漏（特别是Windows上）旋转皮球（通常在Mac机器上）应用程序基本上冻结了，然后过一段时间光标变化了这正是传统Web应用程序让人感到笨拙或缓慢的原因缺乏真正的交互性。

按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。

如果请求需要大量服务器处理，那么等待的时间可能很长,传统Web应用与Ajax应用的比较（cont.）,Ajax应用通过在用户和服务器之间引入一个媒介（Ajaxengine）来异步发送请求，消除了传统的发送请求等待发送请求等待的特性，极大的提高了用户体验,JavaScript基础,JavaScript简介,JavaScript是Netscape公司与Sun公司合作开发的。

在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。

而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。

JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行在HTML基础上，使用JavaScript可以开发交互式Web网页。

JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容注意，JavaScript与Java没有任何联系,JavaScript语法语句,JavaScript脚本的基本组成单位。

只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号“；”结束:

firststatementsecondstatement但在每条语句的末尾添加“；”是一种良好的编程习惯：

firststatement;secondstatement;,JavaScript语法注释,单行注释（双斜杠）：

/line1多行注释：

/*line1line2*/HTML风格注释（不推荐使用）：

”来结束,JavaScript语法变量,JavaScript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明：

varage=33;mood=“happy”;但是提前对变量做出声明是一种良好的编程习惯变量名允许包含字母、数字、美元符号（$）和下划线字符，但不允许包括空格或标点符号,JavaScript语法数据类型,JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值：

varage=“thirtythree”;age=33;JavaScript中重要的数据类型：

未定义（undefined），变量未定义空（null），变量未初始化字符串（string），可以放在单引号或双引号中数值（number），可以表示整数、浮点数布尔型（boolean），true或false对象（object）,JavaScript语法数组,数组用来存储一组值，使用关键字Array来声明，声明时可以指明数组的长度：

varcolors=newArray（）;varcolors=newArray（3）;其中new关键字可以省略，类似其它语言，数组的下标从0开始，赋值方法也和其它语言类似：

colors0=“red”;colors1=“black”;colors2=“white”;还可以使用方括号创建数组时同时初始化：

varcolors=“red”,“black”,“white”;,JavaScript语法数组（cont.）,使用方括号创建数组对象的简单方法：

varcolors=;/声明空数组对象colors0=“red”;colors1=“black”;通过数组的length属性可以得到数组中元素的个数。

数组的长度可以动态扩展：

colors3=“blue”;colors8=“grey”;关联数组：

在填充数组时为每个新元素明确地给出下标：

colors“r”=“red”;colors“b”=“black”;,JavaScript语法操作、条件语句、循环语句,JavaScript中的算术运算符（+、-、*、/、+、-等）、比较运算符（、=）、条件语句（if、while、for等）,JavaScript语法函数,使用函数可以避免重复输入大量相同的内容。

JavaScript中使用function关键字定义函数：

functionfuncname（arg1,arg2,）statements;声明一个简单的函数：

functionmultiply（num1,num2）vartotal=num1*num2;returntotal;声明后可以直接调用此函数获取结果：

varresult=multiply（5,9）;注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型,JavaScript语法对象,JavaScript对象是由一组相关的属性和方法构成的数据实体。

属性和方法都要使用“.”来访问：

object.propertyobject.method（）使用函数来定义“类”：

functionPerson（）this.age=12;this.name=“noname”;this.sayHello=function（）alert（“Hello”+this.name）;/其中this关键字不能省略！

使用new关键字来创建对象实例：

varvincent=newPerson（）;,DOM基础,DOM简介,DOM是”DocumentObjectModel”（文档对象模型）的首字母缩写。

当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型DOM表示被加载到浏览器窗口里的当前页面：

浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型DOM把一份文档表示为一棵树,DOM树结构,如下的HTML页面：

DOM树结构（cont.）,浏览器加载该页面并将之转换为树形结构：

DOM树结构（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）关系。

整个树就这样组织下去，直到浏览器获得与上图类似的结构通常把这样的树结构成为一棵节点树,节点（node）,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶DOM中节点的类型：

元素节点（elementnode），诸如、等。

元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是，它是根元素属性节点（attributenode），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。

因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中文本节点（textnode），元素中包含着文本节点“Trees,trees,everywhere”,基本DOM方法,getElementById（id）返回一个给定id属性的元素节点相对应的对象。

这个方法是与document对象相关联的函数。

其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素getElementsByTagName（tagname）返回一个对象数组，它们分别对应着文档里的一个特定的元素节点getAttribute（）返回对象的属性值setAttribute（）修改对象的属性值,重要DOM属性,childNodes可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素nodeName返回元素节点的名称。

注意，返回的结果全部是大写nodeType用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3nodeValue可以用来存取文本节点的值。

对于元素节点或属性节点这个属性返回空,重要DOM属性（cont.）,firstChild和lastChild第一个和最后一个孩子节点。

node.firstChild等价于node.childNodes0，node.lastChild等价于node.childNodesnode.childNodes.length1parentNode返回元素的父节点nextSibling返回下一个兄弟节点,改变网页结构的DOM方法,createElement（tagname）创建新的元素节点，此方法与document对象相关联。

新建的元素节点并未与节点树相连appendChild（node）把新建的节点插入到节点树的某个节点下，成为这个节点的子节点createTextNode（text）创建文本节点insertBefore（newNode,targetNode）把一个新元素插入到一个现有元素的前面replaceChild（newChild,oldChild）替换一个孩子节点removeChild（node）删除一个孩子节点,基于DOM的Web应用程序示例,基于DOM的Web应用程序示例,首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。

注意，DOM可以移动网页中的任何东西而不需要提交表单。

创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为HocusPocus!

的按钮,初始的HTML清单,注意按钮的类型是button而不是提交按钮。

如果使用提交按钮，单击该按钮将导致浏览器提交表单。

通过使用一般输入按钮而不是提交按钮，可以把JavaScript函数和它连接起来与浏览器交互而无需提交表单,初始的HTML页面预览,目标效果,下面增加一些魔法，用兔子的图片替换页面中原有的图片：

使用getElementById（）函数获得元素节点,首先找到网页中表示img元素的DOM节点。

一般来说，最简单的办法是用getElementById（）方法，它属于代表Web页面的document对象：

varelementNode=document.getElementById（“id）;