异步JavaScript和XML技术.ppt

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