Ajax基本原理及开发过程.pdf

Chongqing Microsoft IT Academy 微软IT学院 重庆软件服务外包人才培训基地 系列课程 Web2.0页面设计核心Ajax 课程目标 • 掌握Ajax应用程序的开发过程 • 掌握XMLHttpRequest对象和常用方法 • 能够使用回调函数处理HTTP请求的状态变 化 课程内容 • Ajax基本原理及开发过程 本章内容 • Ajax 简介 • Ajax 基本原理 • Ajax 实例开发步骤 • XMLHttpRequest 对象 – XMLHttpRequest 对象简介 – 创建XMLHttpRequest 对象 – XMLHttpRequest对象的方法 – XMLHttpRequest对象的属性 – XMLHttpRequest对象处理响应 Ajax简介 •Ajax概念 –是Web开发一个流行的词汇，全称 Asynchronous JavaScript and XML ，异步 的JavaScript和XML –是几种技术的强强联合 • 为什么要学习Ajax –使用Ajax 的最大优点，就是能在不更新整个页 面的前提下维护数据。 Ajax简介 • 利用Ajax技术的地图 Ajax简介 • 利用Ajax技术的新浪通行证注册 Ajax简介 •Ajax应用到的技术 –基于 DHTML 和CSS 的标准Web 页面内容 –由DOM(Document Object Model)实现动态 显示与交互 –通过XML 和XSLT 进行数据交换以及处理 –运用XMLHttpRequest 对象实现异步数据获 取 –运用JavaScript 整合上述技术 Ajax简介 Ajax基本原理 • Ajax 的交互流程 Ajax基本原理 • 通过示例体验Ajax 的异步通信 body a请输入商品编号：/a input id=gName onblur=getGoods() span id=goods/span br / br / a请输入客服编号：/a input id=sName onblur=getStatus() span id=status/span /body Ajax基本原理 • 通过示例体验Ajax 的异步通信 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(text/html); PrintWriter out = response.getWriter(); try{ Thread.sleep(10*1000); }catch(InterruptedException e){ } int iRandom = (int)(Math.random()*100); out.print(iRa