- 1. Ajax基础
- 2. 课程内容 Ajax简介 JavaScript基础 DOM基础 基于DOM的Web应用示例
- 3. Ajax简介
- 4. 什么是Ajax先来点感觉，看些例子… BACKBASE购物网站 Google Suggest Google Map and many more…
- 5. Ajax定义Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起。 Ajax的关键技术： 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM进行动态显示和交互 使用XML和XSLT进行数据交换和操纵 使用XMLHttpRequest异步获取数据 使用JavaScript将所有元素绑定在一起
- 6. 传统Web应用与Ajax应用的比较
- 7. 传统Web应用与Ajax应用的比较（续）在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？只有等待！
- 8. 传统Web应用与Ajax应用的比较（续）在传统的Web应用模型下，客户机 （浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理： 沙漏（特别是 Windows 上） 旋转皮球（通常在 Mac 机器上） 应用程序基本上冻结了，然后过一段时间光标变化了 这正是传统Web 应用程序让人感到笨拙或缓慢的原因 —— 缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长。
- 9. 传统Web应用与Ajax应用的比较（续）Ajax应用通过在用户和服务器之间引入一个媒介（Ajax engine）来异步发送请求，消除了传统的发送请求－等待－发送请求－等待的特性，极大的提高了用户体验。
- 10. 传统Web应用与Ajax应用的比较（续）异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在Web表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束。结果是，应用程序感觉不 那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。
- 11. JavaScript基础
- 12. JavaScript简介JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善。 JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行。 在HTML基础上，使用JavaScript 可以开发交互式Web网页。 JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 注意，JavaScript与Java没有任何联系。
- 13. JavaScript语法——语句JavaScript脚本的基本组成单位。 只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号“；”结束: first statement second statement 但在每条语句的末尾添加“；”是一种良好的编程习惯： first statement; second statement;
- 14. JavaScript语法——注释单行注释（双斜杠）： // line1 多行注释： /* line1 line2 */ HTML风格注释（不推荐使用）： ”来结束
- 15. JavaScript语法——变量JavaScript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明： var age = 33; mood = “happy”; 但是提前对变量做出声明是一种良好的编程习惯 变量名允许包含字母、数字、美元符号($)和下划线字符，但不允许包括空格或标点符号
- 16. JavaScript语法——数据类型JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值： var age = “thirty three”; age = 33; JavaScript中重要的数据类型： 未定义（undefined），变量未定义 空（null），变量未初始化 字符串（string），可以放在单引号或双引号中 数值（number），可以表示整数、浮点数 布尔型（boolean），true或false 对象（object）
- 17. JavaScript语法——数组数组用来存储一组值，使用关键字Array来声明，声明时可以指明数组的长度： var colors = new Array(); var colors = new Array(3); 其中new关键字可以省略，类似其它语言，数组的下标从0开始，赋值方法也和其它语言类似： colors[0] = “red”; colors[1] = “black”; colors[2] = “white”; 还可以使用方括号创建数组时同时初始化： var colors = [“red”, “black”, “white”];
- 18. JavaScript语法——数组（续） 使用方括号创建数组对象的简单方法： var colors = [ ]; //声明空数组对象 colors[0] = “red”; colors[1] = “black”; 通过数组的length属性可以得到数组中元素的个数。数组的长度可以动态扩展： colors[3] = “blue”; colors[8] = “grey”; 关联数组：在填充数组时为每个新元素明确地给出下标： colors[“r”] = “red”; colors[“b”] = “black”;
- 19. JavaScript语法——操作、条件语句、循环语句JavaScript中的算术运算符（+、-、*、/、++、--等）、比较运算符（>、<、=、<=、>=）、条件语句（if、while、for等）
- 20. JavaScript语法——函数使用函数可以避免重复输入大量相同的内容。JavaScript中使用function关键字定义函数： function funcname (arg1, arg2, …) { statements; } 声明一个简单的函数： function multiply (num1, num2) { var total = num1 * num2; return total; } 声明后可以直接调用此函数获取结果： var result = multiply (5, 9); 注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型
- 21. JavaScript语法——对象JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问： object.property object.method() 使用函数来定义“类”： function Person() { this.age = 12; this.name = “no name”; this.sayHello = function() { alert (“Hello ” + this.name); //其中this关键字不能省略！ } } 使用new关键字来创建对象实例： var vincent = new Person();
- 22. DOM基础
- 23. DOM简介DOM是”Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型。 DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型。 DOM把一份文档表示为一棵树。
- 24. DOM树结构如下的HTML页面：
- 25. DOM树结构（续）浏览器加载该页面并将之转换为树形结构：
- 26. DOM树结构（续）DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root element）。 从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本 “Trees, trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本 “Trees, trees, everywhere” 的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构。 通常把这样的树结构成为一棵节点树。
- 27. 节点（node）DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶。
DOM中节点的类型：
元素节点（element node），诸如、
、
等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是，它是根元素。 属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中。 文本节点（text node），元素中包含着文本节点“Trees, trees, everywhere”。
- 28. 基本DOM方法getElementById(id) 返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素。 getElementsByTagName(tagname) 返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。 getAttribute() 返回对象的属性值 setAttribute() 修改对象的属性值
- 29. 重要DOM属性childNodes 可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素。 nodeName 返回元素节点的名称。注意，返回的结果全部是大写。 nodeType 用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3。 nodeValue 可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空。
- 30. 重要DOM属性（续）firstChild和lastChild 第一个和最后一个孩子节点。 node.firstChild等价于node.childNodes[0]， node.lastChild等价于 node.childNodes[node.childNodes.length – 1] parentNode 返回元素的父节点 nextSibling 返回下一个兄弟节点
- 31. 改变网页结构的DOM方法createElement(tagname) 创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连。 appendChild(node) 把新建的节点插入到节点树的某个节点下，成为这个节点的子节点。 createTextNode(text) 创建文本节点 insertBefore(newNode, targetNode) 把一个新元素插入到一个现有元素的前面 replaceChild(newChild, oldChild) 替换一个孩子节点 removeChild(node) 删除一个孩子节点
- 32. 基于DOM的Web应用程序示例
- 33. 基于DOM的Web应用程序示例首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮
- 34. 初始的HTML清单注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单
- 35. 初始的HTML页面预览
- 36. 目标效果下面增加一些魔法，用兔子的图片替换页面中原有的图片
- 37. 使用getElementById()函数获得元素节点首先找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用getElementById()方法，它属于代表Web页面的document对象： var elementNode = document.getElementById(“id");
- 38. 修改图片，麻烦的办法完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好的DOM练习，首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法。 用带兔子的新照片替换原有图片的办法如下： 创建新的img元素 访问当前img元素的父元素，也就是它的容器 在已有img元素之前插入新的img元素作为该容器的子级 删除原来的img元素 结合起来以便在用户单击按钮时调用刚刚创建的函数
- 39. 1、创建新的img元素创建新的img元素： var newImage = document.createElement("img"); 可以创建一个新的元素节点，元素名为img。在HTML中基本上就是：
下面需要增加一个属性src，它指定了要加载的图片： newImage.setAttribute("src", "rabbit-hat.gif"); 注：如果对已有的属性调用setAttribute()，则把原来的值替换为指定的值。但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供的值增加一个属性
- 40. 2、获得原始图片的父元素现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素： var imgParent = hatImage.parentNode;
- 41. 3、插入新图片添加子节点的方法： insertBefore(newNode, targetNode) appendChild(newNode) 把新图片元素插入到原有图片之前： imgParent.insertBefore(newImage, hatImage); 现在原图片的父元素有了两个 子元素：新图片和紧跟在后面的旧图片
- 42. 4、删除旧图片因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可： imgParent.removeChild(hatImage); 完整的JavaScript函数：
- 43. 5、表单元素连接JavaScript每当用户点击Hocus Pocus!按钮的时候运行showRabbit()函数。为此只要向HTML中增加一个简单的 onclick事件处理程序即可：
- 44. 思考：替换图片更简单的办法1、使用replaceChild()函数 imgParent.replaceChild(newImage, hatImage); 2、直接修改图片的src属性 hatImage.setAttribute("src", "rabbit-hat.gif"); 3、使用HTML DOM方法 hatImage.src = “rabbit-hat.gif”;
- 45. 把兔子藏起来虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用 showRabbit()，下面做一些修改，当用户再次点击按钮时把兔子藏起来！
- 46. 1、修改按钮的标签使用我们熟悉的方法，实现这个简单的功能，在showRabbit() 函数中添加如下语句：
- 47. 2、隐藏兔子隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的 JavaScript 函数来完成这项任务：
- 48. 3、更改事件处理函数现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用DOM改变事件或者发生的动作。在JavaScript中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给onclick属性一个新的函数。
- 49. 结束
