异步JavaScript和XML技术

中科院计算所培训中心异步JavaScript和XML技术主讲：John.Yu2020年2月8日2本课内容•AJAX技术基础•Ajax技术的工作原理及编程示例•基于Ajax技术的Web应用编程示例2020年2月8日32020年2月8日4AJAX技术基础其为AsynchronousJavascriptAndXml的缩写，为目前WEB2.0客户端技术中主流另外还有:Adobe的FlexMicrosoft的SilverLightSUN的javaFX与FLEX一同成为富网络应用(RIA)的代名词，为“网站”及“基于B/S结构的软件”的UI设计带来了一场革命。2020年2月8日5优点页面无整体刷新，大大改善用户体验，同是大大节约网络带宽。无需在浏览器中安装插件，较适合企业用户编程技术为javascript，最大限度的保留了开发者的技能2020年2月8日6缺点编程复杂，有兼容性问题。其主要原因为各浏览器对于DOM及javascript的支持并不完全相同，编写浏览器的js代码，还需要一定的学习。代码会暴露在客户端，敏感业务逻辑不能直接编写在js中。目前我们可以利用js库（框架）及“混淆器”可以解决以上问题。2020年2月8日7应用举例--suggest2020年2月8日8应用举例–电子地图2020年2月8日9应用举例–页面标签卡2020年2月8日10应用举例–缩略图2020年2月8日11Ajax技术的工作原理异步工作2020年2月8日12AJAX的工作引擎XMLHttpRequest：Javascript利用其代理发送和接收数据，进行异步工作的客户端对象。2020年2月8日13XHR对象的方法XHR对象并不是W3C的标准对象，但其为事实上标准对象，其属性和方法如下（红色部分为经常使用）若以post方式提交请求需调用，setRequestHeader(“Content-Type”,”application/x-”);2020年2月8日14XHR对象的属性2020年2月8日15AJAX工作原理描述将XHR对象做为请求与响应的代理，在其状态会发生变化时，利用其存储的“函数指针”进行“回调”处理。从而使用客户端的工作方式从“发送请求—等待响应—处理结果”转变“委托发送请求—通知到达—处理结果”Eval(ddfkjdfk);2020年2月8日16建立AJAX的应用步骤建立XHR对象实例利用XHR对象，在客户端“预建立”与服务器端请求。指定回调函数指针建立与服务器端请求利用回调函数处理存储在XHR对象的响应结果2020年2月8日17示例：利用AJAX+Servlet完成发送数据回显