《慧桥教育ajax学习课件》由会员分享，可在线阅读，更多相关《慧桥教育ajax学习课件（82页珍藏版）》请在金锄头文库上搜索。
1、,Ajax,课程安排,Ajax基础 使用Ajax发送异步请求 在请求和响应中使用XML 使用JSON进行数据传输,第一讲,Ajax基础,什么是Ajax?,先来点感觉，看些例子 BACKBASE购物网站 Google Suggest Google Map and many more,Ajax定义,Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术： 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM进行动态显示和交互 使用XML和XSLT进行数据交换和
2、操纵 使用XMLHttpRequest异步获取数据 使用JavaScript将所有元素绑定在一起,传统Web应用与Ajax应用的比较,传统Web应用与Ajax应用的比较（cont.）,在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？只有等待！,传统Web应用与Ajax应用的比较（cont.）,在传统的Web应用模型下，客户机 （浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用
3、某种形式通知您正在处理： 沙漏（特别是 Windows 上） 旋转皮球（通常在 Mac 机器上） 应用程序基本上冻结了，然后过一段时间光标变化了 这正是传统Web 应用程序让人感到笨拙或缓慢的原因 缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长,传统Web应用与Ajax应用的比较（cont.）,Ajax应用通过在用户和服务器之间引入一个媒介（Ajax engine）来异步发送请求，消除了传统的发送请求等待发送请求等待的特性，极大的提高了用户体验,JavaScript基础,JavaScript简介,Java
4、Script是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善 JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行 在HTML基础上，使用JavaScript 可以开发交互式Web网页。 JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精
5、彩的内容 注意，JavaScript与Java没有任何联系,JavaScript语法 语句,JavaScript脚本的基本组成单位。 只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号“；”结束: first statement second statement 但在每条语句的末尾添加“；”是一种良好的编程习惯： first statement; second statement;,JavaScript语法注释,单行注释（双斜杠）： / line1 多行注释： /* line1 line2 */ HTML风格注释（不推荐使用）： ”来结束,JavaScript语法变量,JavaS
6、cript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明： var age = 33; mood = “happy”; 但是提前对变量做出声明是一种良好的编程习惯 变量名允许包含字母、数字、美元符号($)和下划线字符，但不允许包括空格或标点符号,JavaScript语法数据类型,JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值： var age = “thirty three”; age = 33; JavaScript中重要的数据类型： 未定义（undefined），变量未定义 空（
7、null），变量未初始化 字符串（string），可以放在单引号或双引号中 数值（number），可以表示整数、浮点数 布尔型（boolean），true或false 对象（object）,JavaScript语法数组,数组用来存储一组值，使用关键字Array来声明，声明时可以指明数组的长度： var colors = new Array(); var colors = new Array(3); 其中new关键字可以省略，类似其它语言，数组的下标从0开始，赋值方法也和其它语言类似： colors0 = “red”; colors1 = “black”; colors2 = “white”;
8、还可以使用方括号创建数组时同时初始化： var colors = “red”, “black”, “white”;,JavaScript语法数组（cont.）,使用方括号创建数组对象的简单方法： var colors = ; /声明空数组对象 colors0 = “red”; colors1 = “black”; 通过数组的length属性可以得到数组中元素的个数。数组的长度可以动态扩展： colors3 = “blue”; colors8 = “grey”; 关联数组：在填充数组时为每个新元素明确地给出下标： colors“r” = “red”; colors“b” = “black”;,J
9、avaScript语法操作、条件语句、循环语句,JavaScript中的算术运算符（+、-、*、/、+、-等）、比较运算符（、=）、条件语句（if、while、for等）,JavaScript语法函数,使用函数可以避免重复输入大量相同的内容。JavaScript中使用function关键字定义函数： function funcname (arg1, arg2, ) statements; 声明一个简单的函数： function multiply (num1, num2) var total = num1 * num2; return total; 声明后可以直接调用此函数获取结果：var re
10、sult = multiply (5, 9); 注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型,JavaScript语法对象,JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问： object.property object.method() 使用函数来定义“类”： function Person() this.age = 12; this.name = “no name”; this.sayHello = function() alert (“Hello ” + this.name); /其中this关键字不能省略！ 使用
11、new关键字来创建对象实例： var vincent = new Person();,DOM基础,DOM简介,DOM是”Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型 DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型 DOM把一份文档表示为一棵树,DOM树结构,如下的HTML页面：,DOM树结构（cont.）,浏览器加载该页面并将之转换为树形结构：,DOM树结构（cont.）,DOM树中的一切是以最外层的HTML包含元
12、素，即html元素开始的。使用树的比喻，这叫做根元素（root element） 从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本 “Trees, trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本 “Trees, trees, everywhere” 的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构 通常把这样的树结构成为一棵节点
13、树,节点 （node）,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶 DOM中节点的类型： 元素节点（element node），诸如、等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是，它是根元素 属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中 文本节点（text node），元素中包含着文本节点“Trees, trees, everywhere”,基本DOM方法,getElementById(id) 返回一个给定id属性的元素节点相对应
14、的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素 getElementsByTagName(tagname) 返回一个对象数组，它们分别对应着文档里的一个特定的元素节点 getAttribute() 返回对象的属性值 setAttribute() 修改对象的属性值,重要DOM属性,childNodes 可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素 nodeName 返回元素节点的名称。注意，返回的结果全部是大写 nodeType 用来区分节点的类型，元素节点
15、的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3 nodeValue 可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空,重要DOM属性（cont.）,firstChild和lastChild 第一个和最后一个孩子节点。 node.firstChild等价于node.childNodes0， node.lastChild等价于 node.childNodesnode.childNodes.length 1 parentNode 返回元素的父节点 nextSibling 返回下一个兄弟节点,改变网页结构的DOM方法,create
16、Element(tagname) 创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连 appendChild(node) 把新建的节点插入到节点树的某个节点下，成为这个节点的子节点 createTextNode(text) 创建文本节点 insertBefore(newNode, targetNode) 把一个新元素插入到一个现有元素的前面 replaceChild(newChild, oldChild) 替换一个孩子节点 removeChild(node) 删除一个孩子节点,基于DOM的Web应用程序示例,基于DOM的Web应用程序示例,首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮,初始的HTML清单,注意按钮的类型是 butt
