《异步JavaScript和XML技术.ppt》由会员分享,可在线阅读,更多相关《异步JavaScript和XML技术.ppt(17页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、中中 科科 院院 计计 算算 所所 培培 训训 中中 心心异步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设计带来
2、了一场革命。1/1/20234优点页面无整体刷新,大大改善用户体验,同是大大节约网络带宽。无需在浏览器中安装插件,较适合企业用户编程技术为javascript,最大限度的保留了开发者的技能1/1/20235缺点编程复杂,有兼容性问题。其主要原因为各浏览器对于DOM及javascript的支持并不完全相同,编写浏览器的js代码,还需要一定的学习。代码会暴露在客户端,敏感业务逻辑不能直接编写在js中。目前我们可以利用js库(框架)及“混淆器”可以解决以上问题。1/1/20236应用举例-suggest1/1/20237应用举例 电子地图1/1/20238应用举例 页面标签卡 1/1/20239应用
3、举例 缩略图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