第十一章JavaScript与服务器的通信.ppt

JavaScript程序设计教程 软件学院 胡 沛 2016年11月 第十一章 JavaScript与服务器的通信 11.1 传统无刷新页面实现技术 在Ajax技术出现之前，已经出现了多种技术与服务器端进行通信，其中应用最广泛的技术是隐藏框架和远程脚本，它们都将现有的HTML元素作为与服务器通信的介质，隐藏框架利用了frame或者iframe元素，而远程脚本技术则利用了script元素。 11.1.1 隐藏框架 1．隐藏框架技术原理 隐藏框架是开发人员经常使用的一个小技巧，它的基本概念是创建一个可用JavaScript与服务器通信的框架（0像素高frame或者隐藏的iframe元素）。 这种通信方式要求两部分内容：用于处理客户端通信的JavaScript对象和在服务器端处理通信的特殊页面。 隐藏框架实现的功能和普通的网页并没有本质区别，如果将框架的隐藏属性取消，可以看到在其内部仍然是存在页面刷新的，只是框架被隐藏之后，刷新的过程也被隐藏起来了。 在隐藏框架中可以完成普通页面可以实现的所有任务，如下载页面信息、上传文件等。 只有隐藏框架能够实现浏览器兼容的文件上传功能。 11.1.2 远程脚本 1．远程脚本技术原理 远程脚本方法利用了script元素的src属性，向服务器端的URL发出请求，服务器端以JavaScript代码的形式返回结果，该结果可以在客户端的JavaScript脚本中直接使用。 11.2 Ajax技术 Ajax是异步JavaScript和XML（Asynchronous JavaScript and XML）的英文缩写，它是将一系列相关技术组合应用的技巧。这些技术包括： （1）使用XHTML和CSS编写结构化的Web页面； （2）使用DOM进行动态显示和交互； （3）使用XML和XSLT进行数据交互和操作； （4）使用XMLHttpRequest进行异步数据接收； （5）使用JavaScript将它们绑定在一起。 “老技术，新技巧”，是对Ajax比较恰如其分的描述。 AJAX 不是一种新的编程语言，是一种独立于 Web 服务器软件的浏览器技术。JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 早在1998年，微软公司的Web版Outlook（Ootlook Web Access）就已经实现了类似桌面应用程序的Web应用。 而Ajax在近年来如此火热，这与Google公司是密不可分的。Google推出的一些服务，包括Gmail、Google Maps、Google Notebook等，让人们切实感受到Ajax的独特魅力。 11.2.1 Ajax技术原理 在传统的 JavaScript 编程中，如果希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。 由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。 通过利用 AJAX，会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。 通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面，用户可以停留在同一个页面。 11.2.2 XMLHttpRequest对象 1．XMLHttpRequest对象简介 Ajax技术的核心是XMLHttpRequest对象，它提供了一种真正符合HTTP协议的通信介质。 早在IE 5.0时代，微软已经实现了XMLHttpRequest对象，它是与MSXML一起出现的，直到最近它的能力才被完全发掘。 XMLHttpRequest本质上是具备XML发送/接收能力的HttpRequest对象。 在IE 5.0/6.0中，可以使用以下的方式创建XMLHttpRequest对象： var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); 和IE中的XML DOM对象一样，XMLHttpRequest对象有多种版本，对于安装了MSXML 3.0及更高版本的客户端，还可以使用更高版本的XMLHttpRequest对象，例如： var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); 在IE 7.0和其他非IE浏览器中可以使用以下的方式创建XMLHttpRequest对象： var xmlhttp = new XM