AJax-课堂笔记案例.pdfVIP

目录 第一章 Ajax 简介 2 ajax 底层原理 2 Ajax 使用步骤: 2 第二章 DWR 框架 5 dwr 框架使用步骤: 5 上课示例： 5 第三章 Ajax 效果 8 1.完成级联菜单 8 2.利用编号加载相关数据 10 3.加载数据到表格 11 4.对数据进行增删查 13 5.对数据进行分页显示 17 6.Ajax 验证码 23 7.Ajax 购物车 25 说明：本文档是对马果老师的AJax 部分的讲课笔记进行二次整理，不仅含有课 堂笔记，还把上课案例也添加进去了，希望可以对大家的复习提供一些帮助，谢 谢！XZC 第一章Ajax 简介 AJAX: 异步刷新技术(局部刷新技术) 主要作用:在不提交整个表单的情况下,实现前台与后台的动态交互 AJAX 并不是单纯的一种技术,而是一系列技术的集合(XML,JavaScript,css) ajax 是通过事件来实现前台与后台的交互 JQuery DWR ExtJS这三种是ajax 技术中比较有名ajax 框架 ajax 底层原理 jsp 页面中,常用的事件: onclick鼠标单击事件 onmouseover鼠标悬停在控件上触发的事件 onmouseout鼠标离开控制触发的事件 onmousemove鼠标在控件上方移动触发的事件 onkeypress键盘上的按键,按下并且松开以后触发的事件 onkeydown键按下的时候触发 onkeyup按下的键被松开的时候触发 onfocus得到焦点时触发 onblur 失去焦点的时候触发 onchange值改变的时候触发 onsubmit当表提交的时候触发 var val = document.getElementById(username).value; 取控件的值 onkeyup=shw(this.value) ajax 技术之所有可以实现不提交表单交互是因为有一个核心对象: XMLHttpRequest XMLHttpRequestajax 核心对象 要动态传递数据到后台,就需要创建一个核心对象 同步请求:客户端发出一个请求到达服务器端,必须等待服务端的处理结果返回以后,才可以发出一下 请求 异步请求:客户端发出一个请求到达服务器端,自己不必等待返回的结果,而是委托一个方法对返回来 的结果进行处理,自己可以继续向服务器发送新的请求 Ajax 使用步骤: 1、创建jsp Table Tr Tdinput type=text name=username onkeyup=shw(this.value)//Td /Tr Tr Tddiv id=mydiv style=border-style:groove/div/Td /Tr /Table 2、在WebRoot 目录下，创建一个文件夹js,并且在文件夹产一个文件 js/script.js 3、在jsp 页面，将js 文件与jsp 页面关联 script type=text/javascript src=js/script.js/script 4、创建一个Servlet,映射名称为: show public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(text/html;charset=gbk); PrintWriter out = response.getWriter(); Dao dao = new Dao(); String name = request.getParameter(name); ListString list = dao.getList(name);