任务6_动态脚本开发.ppt

1、任务6 动态脚本开发,计算机部 刘冰玲,前 言,之前的任务中，虽然我们可以通过Flash为静态页面加上动画效果，但是Flash开发的代价以及运行时消耗的资源还是很可观的。我们如果想加入更多的与用户间的互动效果，仅靠Flash是不够的。为此，我们引入了页面的脚本语言，一般来说是JavaScript。并且引入AJAX的概念来异步的处理用户的请求。这样可以在用户不用傻傻等待的情况下，为用户提供所需要的功能，提供了更好的用户体验。 本章节适用于WEB开发中的用户体验工程师或者前端的软件开发工程师阅读。,任务描述,1.通过阅读资讯单、案例单、信息单等，并进行相关资料查找，完成过程记录相应表格填写 2.编

2、写酒店查询页面的日期选择控件的JavaScript代码,知识链接,随着互联网的发展，WEB应用的后台逻辑越来越复杂。往往用户要等待服务器处理完一个请求并返回，需要越来越长的时间。为了解决这个问题，工程师们想出了讲一部分计算工作放在客户端的处理方法，这样可以充分利用客户端资源，以减少用户等待的时间，提供给用户更好的用户体验。 由此而生的Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言。在Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一

3、就是“看上去像Java”1，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）（如图）。,JavaScript是一个运行于浏览器的解释性语言，所以它就要以适当的形式嵌入在HTML/XHTML中。通常是用以下方式来完成的： 内嵌的js代码段，这种情况下多为不可重用，或页面打开时就要加载的

4、大量代码. /.javascript段 直接引用.js文件，这种情况多为已经可以通用的函数或类，将之放在一个文件里，使凡用到它的页面都可以使用 HTML标签内调用JavaScript，用于较少代码较简单功能的使用，或函数的调用，可以在onclick/onload/onkeypress/onkeydown等事件中。 ,JavaScript语法,JavaScript的变量,如何在页面中添加JavaScript脚本？, JavaScript语法结构 编写的脚本代码 .页面内容代码 ,脚本代码必须包含在标签之间,指定脚本所使用的语言,JavaScript的变量,var name; name=“孙悟空”

5、; var name=“孙悟空”; var name,age,sex;,声明变量时直接赋值,声明变量,变量赋值,声明多个变量,JavaScript的函数,函数就是包裹在花括号中的代码块，前面使用了关键词 function： function functionname() 这里是要执行的代码 当调用该函数时，会执行函数内的代码。 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。,示例代码,点击这里 function m

6、yFunction(name,job) alert(Welcome + name + , the + job); ,上面的函数会当按钮被点击时提示 Welcome Bill Gates, the CEO。,示例代码,示例代码： 点击这里 点击这里 根据您点击的不同的按钮，上面的例子会提示 Welcome Harry Potter, the Wizard 或 Welcome Bob, the Builder。,函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息,示例代码,有时，我们会希望函数将值返回调用它的地方。这通过使用 return 语句就可以实现。在使用 return 语

7、句时，函数会停止执行，并返回指定的值。整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。 示例代码： function myFunction() var x=5; return x; ,上面的函数会返回值 5。,示例代码,示例代码： 计算两个数字的乘积，并返回结果： function myFunction(a,b) return a*b; document.getElementById(demo).innerHTML=myFunction(4,3); demo 元素的 innerHTML 将是：12 在您仅仅希望退出函数时 ，也可使

8、用 return 语句。返回值是可选的： function myFunction(a,b) if (ab) return; x=a+b 如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。,函数调用将被返回值取代： var myVar=myFunction(); myVar 变量的值是 5，也就是函数 myFunction() 所返回的值。 即使不把它保存为变量，您也可以使用返回值： document.getElementById(demo).innerHTML=myFunction(); demo 元素的 innerHTML 将成为 5，也就是函数 myFunctio

9、n() 所返回的值。 您可以使返回值基于传递到函数中的参数：,示例代码,有时，我们会希望函数将值返回调用它的地方。这通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。 示例代码： function myFunction() var x=5; return x; ,上面的函数会返回值 5。,JavaScript的对象,JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。对象是拥有属性和方法的数据。 属性是与对象

10、相关的值。方法是能够在对象上执行的动作。在面向对象的语言中，属性和方法常被称为对象的成员。,举例：汽车就是现实生活中的对象。 汽车的属性： =Fiat car.model=500 car.weight=850kg car.color=white 汽车的方法： car.start() car.drive() car.brake() 汽车的属性包括名称、型号、重量、颜色等。所有汽车都有这些属性，但是每款车的属性都不尽相同。汽车的方法可以是启动、驾驶、刹车等。所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。,JavaScript的函数,当您像这样声明一个 JavaScript

11、 变量时： var txt = Hello; 您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。 属性： txt.length=5 方法： txt.indexOf() txt.replace() txt.search() 根据需要，在JavaScript中可以创建自己的对象。下面例子创建名为 person 的对象，并为其添加了四个属性。,AJAX,AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJ

12、AX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。 Web应用的交互如Flickr和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以

13、使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。所以AJAX 可使因特网应用程序更小、更快，更友好。 AJAX 是一种独立于Web服务器软件的浏览器技术。AJAX 基于下列Web标准：JavaScript，XML，XHTML，CSS。在 AJAX 中使用的Web标准都已被良好定义，并被所有的主流浏览器支持，所以AJAX 应用程序独立于浏览器和平台。,认识JavaScript事件,JavaScript中常用的鼠标事件有哪些？,前 言, functi

14、on changetext(id) id.innerHTML=谢谢!; 请点击该文本 ,在下面的例子中，当用户在 元素上点击时，会改变其内容： 请点击该文本 在下面的例子中，我们将从事件处理器调用一个函数：,有以下方法可以为HTML元素分配事件：,可以使用事件属性。例如，向 button 元素分配 onclick 事件： 点击这里 在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。 通过HTML DOM来向 HTML 元素分配事件，例如，向 button 元素分配 onclick 事件： document.getElementById(myBtn).onclick=fu

15、nction()displayDate(); 在上面的例子中，名为 displayDate 的函数被分配给 id=myButn 的 HTML 元素。当按钮被点击时，会执行该函数。,了解异步调用,多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。 要实现异步的请求，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。下面是该对象的几个方法和属性。

16、 open()：建立到服务器的新请求。 send()：向服务器发送请求。 abort()：退出当前请求。 readyState：提供当前 HTML 的就绪状态。 responseText：服务器返回的请求响应文本。,了解异步调用,首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单，只要对该对象名使用 new 关键字即可，如下面所示。 var request = new XMLHttpRequest(); 得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是

17、JavaScript、CSS 或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后，就可以向服务器发送请求了。,了解异步调用,接着要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求，但仍然是建立连接所必需的。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。例如： function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?ph

18、one= + escape(phone); 代码创建了一个新变量 phone，并把 ID 为 “phone” 的表单字段的值赋给它。 Enter your phone number: ,了解异步调用,有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数： request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。 url：要连接的 URL。 asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。 username：如果需

19、要身份验证，则可以在此指定用户名。该可选参数没有默认值。 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。 通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。 function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(G

20、ET, url, true); ,了解异步调用,有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数： request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。 url：要连接的 URL。 asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。 username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。 通常使用其中的

21、前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。 function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); ,了解异步调用,在一般的请求/响应模型中，比如 Web 1.0，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求

22、。该请求是同步的，换句话说，客户机等待服务器的响应。当客户机等待的时候，至少会用某种形式通知您在等待： 沙漏（特别是 Windows 上）。 旋转的皮球（通常在 Mac 机器上）。 应用程序基本上冻结了，然后过一段时间光标变化了。 这正是 Web 应用程序让人感到笨拙或缓慢的原因 缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长（至少在这个多处理器、DSL 没有等待的世界中是如此）。 而异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在 Web 表单中输入数据，甚至离开表单。没有旋转的皮球

23、或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束（具体的办法很快就会看到）。结果是，应用程序感觉不 那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。这仅仅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 组件和 Web 设计范型都不能克服缓慢、同步的请求/响应模型。 所以open函数的最后一个参数（asynch）是极其重要的，我们需要用它来声明我们的请求是异步的。,了解异步调用,在一般的请求/响应模型中，比如 Web 1.0，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，换句话说，客户机等待服务

24、器的响应。当客户机等待的时候，至少会用某种形式通知您在等待： 沙漏（特别是 Windows 上）。 旋转的皮球（通常在 Mac 机器上）。 应用程序基本上冻结了，然后过一段时间光标变化了。 这正是 Web 应用程序让人感到笨拙或缓慢的原因 缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长（至少在这个多处理器、DSL 没有等待的世界中是如此）。 而异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在 Web 表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器

25、悄悄地响应请求，完成后告诉原来的请求者工作已经结束（具体的办法很快就会看到）。结果是，应用程序感觉不 那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。这仅仅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 组件和 Web 设计范型都不能克服缓慢、同步的请求/响应模型。 所以open函数的最后一个参数（asynch）是极其重要的，我们需要用它来声明我们的请求是异步的。,了解异步调用,一旦用 open() 配置好之后，就可以发送请求了。发送请求的方法send() 只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本身发送过数据了： v

26、ar url = /cgi-local/lookupCustomer.php?phone= + escape(phone); 虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，GET 请求（在典型的 Ajax 应用中大约占 80%）中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容。如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。 function getCustomerInfo() var phone = document.getElementById(phone).va

27、lue; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); request.send(null); ,了解异步调用,现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外，这些代码与用 Java servlet 及 JSP、PHP 或 Perl 编程没有什么两样。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一个简单属

28、性 onreadystatechange。 因为是异步请求，所以 JavaScript 方法不会等待服务器。因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。 对于现在的代码来说，服务器完成了请求之后什么也不会做。因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。 onreadystatechange 属性允许指定一个回调函数。回调允许服务器反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onready

29、statechange 属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。,了解异步调用,现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外，这些代码与用 Java servlet 及 JSP、PHP 或 Perl 编程没有什么两样。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLH

30、ttpRequest 的一个简单属性 onreadystatechange。 因为是异步请求，所以 JavaScript 方法不会等待服务器。因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。 对于现在的代码来说，服务器完成了请求之后什么也不会做。因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。 onreadystatechange 属性允许指定一个回调函数。回调允许服务器反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpReque

31、st 对象，特别是 onreadystatechange 属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。,了解异步调用,这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。 function getCustomerInfo() var phone = document.getElementById(phone)

32、.value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); request.onreadystatechange = updatePage; request.send(null); 最后就是处理服务器的响应，编写updatePage（）函数供服务器回调。 function updatePage() alert(Server is done!); ,使用成熟的框架产品进行开发,JavaScript 本身就是一种功能强大的语言，您不需要额外的框架就可创建互

33、联网富客户端应用程序（RIA，Rich Client Application）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。 JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方

34、式工作。,使用成熟的框架产品进行开发,JavaScript 本身就是一种功能强大的语言，您不需要额外的框架就可创建互联网富客户端应用程序（RIA，Rich Client Application）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。 JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的

35、测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。,使用成熟的框架产品进行开发,除了解决跨浏览器问题，使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素的代码。它们不仅提供获取 DOM 元素引用的快捷函数，而且还允许 DOM 遍历函数以链方式查找任意深度的父元素、子元素、兄弟元素。最后，框架还提供一系列函数来更轻松地操作这些对象，可以改变、添加或删除内容本身；或者使用 CSS 样式类来改变元素的外观。 框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同，跨浏览器事件处理

36、将会非常艰难。因此 JavaScript 框架通常封装浏览器事件，并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件（如按下 Escape 键、Return 键、光标键，等等）。 所有这些特性都非常有用，但 JavaScript 框架还可以支持 Ajax。与 JavaScript 的其他许多方面一样，每个 Web 浏览器往往以不同方式支持 Ajax，这使得以一种在所有 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎所有 JavaScript 框架都包含某种形式的 Ajax 库支持，通常提供 Ajax 请求和响应对象，以及用于评价

37、响应、更新 DOM 元素、查询特定请求的帮助函数（helper）。,使用成熟的框架产品进行开发,目前流行的框架非常多，其中比较典型的有JQuery和ExtJS两种。前者是应用最广泛的开源框架，后者是很优秀的一款商业软件。 大多数 JavaScript 框架都具备的有用特性。包括： 选择器（Selector） DOM 遍历 DOM 操作 实用（Utility）函数 事件处理 Ajax 使用 JavaScript 框架的一个有说服力的理由是标准化的跨浏览器 Ajax 请求。Ajax 请求是一个异步 HTTP 请求，通常发送给服务器端脚本，后者返回 XML、JSON、HTML 或普通文本格式的响应。

38、大多数 JavaScript 框架都有某种形式的 Ajax 对象，以及一个以参数形式接受一组选项的请求方法。这些选项通常包含 callback 函数，当脚本一接收到来自 Web 服务器的响应时，就会调用此函数。让我们看一下 ExtJS和JQuery中的 Ajax 请求的样子。 首先，看一下典型的 ExtJS Ajax 请求。,Ext.Ajax.request( url: server_script.php, params: name1: value1, name2: value2 , method: POST, success: function() alert(Your data has been saved.); );,使用成