Javascript程序设计教程第11章 JavaScript与服务器的通信.pptVIP

第11章 JavaScript与服务器的通信  JavaScript语言的设计初衷是为了在客户端进行数据验证和提供与用户交互的功能，它完全是浏览器端执行的脚本语言，本身并不具备与服务器端通信的能力，然而随着Web的发展，对于JavaScript向服务器发送数据并且接受响应的要求逐渐出现。 在这种需求下产生了几种与服务器端通信的方法，本章将讲解这些使用JavaScript与服务器端进行通信的方法，它们包括隐藏框架、远程脚本和Ajax技术，并且给出相应的示例。 传统无刷新页面实现技术 11.1 Ajax技术 11.2 11.1 传统无刷新页面实现技术 在Ajax技术出现之前，已经出现了多种技术与服务器端进行通信，其中应用最广泛的技术是隐藏框架和远程脚本，它们都将现有的HTML元素作为与服务器通信的介质，隐藏框架利用了frame或者iframe元素，而远程脚本技术则利用了script元素。 11.1.1 隐藏框架 1．隐藏框架技术原理 隐藏框架是开发人员经常使用的一个小技巧，它的基本概念是创建一个可用JavaScript与服务器通信的框架（0像素高frame或者隐藏的iframe元素）。 这种通信方式要求两部分内容：用于处理客户端通信的JavaScript对象和在服务器端处理通信的特殊页面。 隐藏框架实现的功能和普通的网页并没有本质区别，如果将框架的隐藏属性取消，我们可以看到在其内部仍然是存在页面刷新的，只是框架被隐藏之后，刷新的过程也被隐藏起来了。 因此，在隐藏框架中我们可以完成普通页面可以实现的所有任务，如下载页面信息、上传文件等。 如果将隐藏框架的URL指向一个域外的地址，这些技术同样是有效的，那么我们不难推断，隐藏框架技术具备跨域的能力。 【例11-1】 main.html 【例11-2】 Hf.aspx 【例11-3】 Hf.aspx.cs 2．应用示例：无刷新文件上传 【例11-4】 main2.html 【例11-5】 uploadHandler.ashx 图11-1 无刷新文件上传 11.1.2 远程脚本 1．远程脚本技术原理 本节介绍的远程脚本方法利用了script元素的src属性，向服务器端的URL发出请求，服务器端以JavaScript代码的形式返回结果，该结果可以在客户端的JavaScript脚本中直接使用。 下面通过一个简单的示例说明远程脚本的实现方法，该示例的运行效果如图11-2所示，用户在输入框中输入姓名，单击“发送”按钮，服务器端接收到用户输入内容之后，返回相应的问候信息。 页面的HTML代码比较简单，如例11-6所示。 【例11-6】 main.html 图11-2 远程脚本应用示例 【例11-7】 send函数 【例11-8】 Script.ashx 远程脚本技术和隐藏框架技术一样，也具有跨域的能力，它可以直接将数据封装在一个JavaScript对象中返回，无需像隐藏框架方法中那样解析DOM树的内容，因此远程脚本方法具有较高的运行效率，数据传输的方式也更加直接。 JavaScript对象只能用于传输文本信息，而上传文件功能需要传递二进制数据，远程脚本技术就无能为力了。 实际上，在本章介绍的所有与服务器端进行交互的技术中，只有隐藏框架能够实现浏览器兼容的文件上传功能。 2．应用示例：del.icio.us书签 （1）del.icio.us API介绍 （2）JST技术简介 JST是TrimPath开源项目（/p/trimpath/wiki/TrimPath）的一部分，它可以使开发人员方便地实现模板编程，其语法类似于JSTL、Velocity。 （3）del.icio.us书签的呈现 下面将使用远程脚本的方法并且结合JST技术来实现网络书签的查询和呈现。 首先编写页面的HTML代码和JST模板，如例11-9所示。 【例11-9】 delicious.html（HTML部分） 【例11-11】 显示书签列表 图11-3 del.icio.us书签 11.2 Ajax技术 Ajax是异步JavaScript和XML（Asynchronous JavaScript and XML）的英文缩写，它是将一系列相关技术组合应用的技巧。这些技术包括： （1）使用XHTML和CSS编写结构化的Web页面； （2）使用DOM进行动态显示和交互； （3）使用XML和XSLT进行数据交互