《第十一章javascript与服务器的通信概要》由会员分享，可在线阅读，更多相关《第十一章javascript与服务器的通信概要（22页珍藏版）》请在金锄头文库上搜索。
1、JavaScript程序设计教程,软件学院 胡 沛 2016年11月,第十一章 JavaScript与服务器的通信,11.1 传统无刷新页面实现技术 在Ajax技术出现之前，已经出现了多种技术与服务器端进行通信，其中应用最广泛的技术是隐藏框架和远程脚本，它们都将现有的HTML元素作为与服务器通信的介质，隐藏框架利用了或者元素，而远程脚本技术则利用了元素。,11.1.1 隐藏框架 1隐藏框架技术原理 隐藏框架是开发人员经常使用的一个小技巧，它的基本概念是创建一个可用JavaScript与服务器通信的框架（0像素高或者隐藏的元素）。 这种通信方式要求两部分内容：用于处理客户端通信的JavaScri
2、pt对象和在服务器端处理通信的特殊页面。,隐藏框架实现的功能和普通的网页并没有本质区别，如果将框架的隐藏属性取消，可以看到在其内部仍然是存在页面刷新的，只是框架被隐藏之后，刷新的过程也被隐藏起来了。 在隐藏框架中可以完成普通页面可以实现的所有任务，如下载页面信息、上传文件等。 只有隐藏框架能够实现浏览器兼容的文件上传功能。,11.1.2 远程脚本 1远程脚本技术原理 远程脚本方法利用了元素的src属性，向服务器端的URL发出请求，服务器端以JavaScript代码的形式返回结果，该结果可以在客户端的JavaScript脚本中直接使用。,11.2 Ajax技术 Ajax是异步JavaScript
3、和XML（Asynchronous JavaScript and XML）的英文缩写，它是将一系列相关技术组合应用的技巧。这些技术包括： （1）使用XHTML和CSS编写结构化的Web页面； （2）使用DOM进行动态显示和交互； （3）使用XML和XSLT进行数据交互和操作； （4）使用XMLHttpRequest进行异步数据接收； （5）使用JavaScript将它们绑定在一起。,“老技术，新技巧”，是对Ajax比较恰如其分的描述。 AJAX 不是一种新的编程语言，是一种独立于 Web 服务器软件的浏览器技术。JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 早在199
4、8年，微软公司的Web版Outlook（Ootlook Web Access）就已经实现了类似桌面应用程序的Web应用。 而Ajax在近年来如此火热，这与Google公司是密不可分的。Google推出的一些服务，包括Gmail、Google Maps、Google Notebook等，让人们切实感受到Ajax的独特魅力。,11.2.1 Ajax技术原理 在传统的 JavaScript 编程中，如果希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响
5、应，然后一张新的页面会加载结果。 由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。 通过利用 AJAX，会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。 通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面，用户可以停留在同一个页面。,11.2.2 XMLHttpRequest对象 1XMLHttpRequest对象简介 Ajax技术的核心是XMLHttpRequest对象，它提供了一种真正符合HTTP协议的通信介质。 早在IE 5.0时代，微软已经实现了X
6、MLHttpRequest对象，它是与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
7、ActiveXObject(“Msxml2.XMLHTTP“); 在IE 7.0和其他非IE浏览器中可以使用以下的方式创建XMLHttpRequest对象： var xmlhttp = new XMLHttpRequest();,2. XMLHttpRequest 对象的三个重要的属性。 (1) onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置： xmlHttp.onreadystatechange=function() / 我们需要在这里写一
8、些代码 ,(2) readyState 属性 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。 readyState 属性可能的值： 状态 描述 0 请求未初始化（在调用 open() 之前） 1 请求已提出（调用 send() 之前） 2 请求已发送（这里通常可以从响应得到内容 头部） 3 请求处理中（响应中通常有部分数据可用， 但是服务器还没有完成响应） 4 请求已完成（可以访问服务器响应并使用 它）,向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完
9、成（意味着可获得数据）： xmlHttp.onreadystatechange=function() if(xmlHttp.readyState=4) / 从服务器的response获得数据 ,(3 )responseText 属性 可以通过 responseText 属性来取回由服务器返回的数据。 xmlHttp.onreadystatechange=function() if(xmlHttp.readyState=4) document.myForm.time.value=xmlHttp.responseText; ,要想把请求发送到服务器，需要使用 open() 方法和 send() 方
10、法。 open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。 send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 JSP 文件位于相同的目录，那么代码是这样的： xmlHttp.open(“GET“,“time.jsp“,true); xmlHttp.send(null);,3XMLHttpRequest对象封装类 使用XMLHttpRequest对象与服务器端通信通常可以按照以下的步骤进行： （1）创建XMLHttpRequest对象； （2）指定XMLHt
11、tpRequest对象发送HTTP请求的方式、URL、是否为异步模式等； （3）设置XMLHttpRequest对象的readystatechange事件处理函数，在事件处理函数中指明HTTP响应处理方式； （4）发送HTTP请求。,小 结,本章介绍了3种使用JavaScript与服务器通信的方法：隐藏框架、远程脚本和Ajax技术，并分别给出相关的应用示例。 这3种技术各有其优势和局限性，在实际应用中，读者可以根据具体需要，选择最合适的技术与服务器端进行交互。 Ajax技术的优势在于XMLHttpRequest对象对HTTP请求具有比较完善的处理机制，隐藏框架和远程脚本技术则具有跨域访问服务器的能力，隐藏框架技术是这三者中唯一能够实现无刷新文件上传功能的技术。,实验 1. 实验名称：无刷新文件上传 。 2. 实验目的：熟悉ajax无刷新技术。 3. 实验内容： 使用Ajax技术完成页面与服务器的通信。,每做完一个实验，都要书写一份上机实验报告，实验报告内容应包括实验的目的要求、实验内容、详细操作步骤，同时给出实验的结果。每一份报告要求附上本次实验的源代码。,
