第09章：Ajax第一次接触.pptVIP

第09章 Ajax实现无跳转刷新 本章目标 1 掌握Ajax技术原理 2 掌握Ajax应用编程 讲解时间： 60分钟 实践时间： 50分钟 Web 2.0 2-1 互联网前世今生 动态网页 静态网站 null 黑暗年代 革命啦，革命啦！三五年就来一次 Web 2.0 2-2 Web 2.0的特点 用户贡献内容 内容聚合RSS 更丰富的“用户体验” 内容聚合 每个小“窗口”可以关闭、最小化和进行个性化设置 所有操作都是在不刷新窗口的情况下完成的 自动补全 为什么使用Ajax3 无刷新：不刷新整个页面，只刷新局部 无刷新的好处 只更新部分页面，有效利用带宽 只是登录，没必要刷新“庞大”的页面。 什么是Ajax Ajax：只刷新局部页面的技术 JavaScript：更新局部的网页 XML：一般用于请求数据和响应数据的封装 XMLHttpRequest对象：发送请求到服务器并获得返回结果 CSS：美化页面样式 异步：发送请求后不等返回结果，由回调函数处理结果 Ajax技术的核心 XMLHttpRequest 3-1 JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力 常用方法 方法名 说 明 open(method,URL,async) 建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false send(content) 发送请求 content参数指定请求的参数 setRequestHeader(header,value) 设置请求的头信息 XMLHttpRequest 3-2 常用属性 onreadystatechange：指定回调函数 readystate: XMLHttpRequest的状态信息 就绪状态码 说 明 0 XMLHttpRequest对象没有完成初始化 1 XMLHttpRequest对象开始发送请求 2 XMLHttpRequest对象的请求发送完成 3 XMLHttpRequest对象开始读取响应，还没有结束 4 XMLHttpRequest对象读取响应结束 XMLHttpRequest 3-3 常用属性 status：HTTP的状态码 responseText：获得响应的文本内容 responseXML：获得响应的XML文档对象 状态码 说 明 200 服务器响应正常 400 无法找到请求的资源 403 没有访问权限 404 访问的资源不存在 500 服务器内部错误 就绪状态是4而且状态码是200，才可以处理服务器数据 实现无刷新用户名验证 当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在 如果已经存在则提示：“用户名已被可用” 如果不存在则提示：“用户名可以可用” 使用Ajax验证用户名5-1 使用文本框的onBlur事件 使用Ajax技术实现异步交互 创建XMLHttpRequest对象 通过 XMLHttpRequest对象设置请求信息 向服务器发送请求 创建回调函数，根据响应状态动态更新页面 使用Ajax验证用户名5-2 验证姓名表单-checkname.jsp 使用JavaScript验证用户名-checkname.jsp form name=form1 action= method=post 用户名 input type=text id=uname name=username value= onblur=checkUserExists() / div id=mess style=display: inline/ /form function checkUserExists() { var f = document.form1; var username = f.username.value; if (username == ) { alert(用户名不能为空); return false; } else { doAjax(CheckUserServlet?username= + username); } } 调用Ajax进行处理 使用Ajax验证用户名5-3 使用Ajax进行处理-checkname.jsp 1、创建XMLHttpRequest对象 var xmlhttp; function doAjax(url) { if (window.XMLHttpRequest){// code for all new browsers xmlhttp=new XMLHtt