javascript第十八讲：Ajax高级应用.pptVIP

1-* 北京源智天下科技有限公司 联系方式： 联系方式： 北京源智天下科技有限公司 第十八讲：Ajax高级应用 讲师：杨贵 e-mail:jtclass@163.com / 课程内容安排 客户端脚本语言 服务器脚本语言 Ajax与服务器互动 客户端脚本语言 Ajax的客户端技术，主要实现浏览器与服务器间的异步通信。 通过基础通信组件将客户端数据发往服务器处理，并且接收从服务器返回的数据。 客户端脚本程序从基础通信组件中获取数据并用于更新本地网页，通常只更新发生改变的部分，称为局部刷新。 客户端脚本语言主要包括JavaScript、VBScript等 。 这些语言都可以用来实现Ajax的客户端功能 ，只要能调用DOM接口即可。 客户端脚本语言 使用JavaScript的局部刷新技术 没有使用脚本程序的纯HTML文档中，打算改变一个元素的内容，则需要更改服务器上的源文档，然后再通过浏览器重新加载。 使用JavaScript语言结合DOM编程，控制HTML文档中所有的元素及内容 。 演示：范例18-1，实现一个加法计算器，当用户填完第二个操作数后自动在结果文本框中显示计算结果。 使用iframe的局部刷新技术 在超级链接的“target”属性上填写一个有效的窗口名或框架名，可以将链接的页面显示到指定窗口中。因此在当前页面中设置iframe，并将需要刷新的内容显示在其中，刷新iframe时不需要刷新当前页的全部 。 演示：范例18-2，使用iframe实现局部刷新。在不刷新整个当前的情况下根据用户在文章列表中的选择显示相应的文章。 客户端脚本语言 服务器脚本语言 真正意义上的Ajax都包含客户端和服务端技术。 客户端程序负责页面显示的更新和事务逻辑。 服务端程序负责数据的存储等等 。 服务端程序运行在服务器上，可以用任何一种程序语言实现，比如C/C++、Java、perl……等等。 现在比较流行的有、jsp、php等 。 不管是何种语言，都只有一个目的，实现服务器端的事务处理。 服务器脚本语言 Ajax与服务器互动 与服务器交互是Ajax技术中的核心内容 ，如何通信在第17讲中已经讲过。 演示：利用Ajax技术实现文章内容的更新。在选择某一个文章标题后浏览器在后面加载文章，在数据加载未完成时用户可以做其它工作而不必等待。 服务器脚本语言 客户端HTML文件第一部分如 下： 01 script language=javascript // 程序开始 02 function CreateHttpRQ() 03 { 04 if( window.navigator.appName == Microsoft Internet Explorer ) // 如果是IE 05 { 06 try // 捕捉异常 07 { 08 return new ActiveXObject( Microsoft.XMLHTTP ); 09 } 10 catch(E) // 处理异常 11 { 12 return null; // 返回空值 13 } 14 } 15 else // 其它浏览器 16 { 17 return new XMLHttpRequest(); // 返回创建的对象 18 } 19 } 20 var xmlHtpRq = CreateHttpRQ(); 21 function OnStatusChange() // 状态事件处理程序 22 { 23 if (xmlHtpRq.readyState == 4) // 正常响应状态 服务器脚本语言 客户端HTML文件第二部分如 下： 24 { 25 if (xmlHtpRq.status == 200) // 正确的接收响应数据 26 { 27 document.getElementById(‘VIEPORT’).innerHTML = xmlHtpRq.responseText; 28 29 } 30 else // 状态不正常 31 { 32 document.getElementById(VIEPORT).innerHTML = xmlHtpRq.status;// 输出状态码 33 } 34 } 35 } 36 function OnTitleClick( obj ) 37 { 38 if( xmlHtpRq != null ) 39 { 40 url = http://localhost/server.php?file= + obj.link;// URL为读者存放SERVER.PHP程序的地址 41 xm