第部分-AJAX技术应用.ppt

五、Ajax应用实例 AJAX 虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以用，主要应用在交互较多、频繁读数据、数据分类良好的Web 应用中。 例如：1、读取外部数据 2、数据校验 3、按需取数据—级联菜单 4、分页技术 实现无刷新用户名验证 当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在 如果已经存在则提示：“用户名已被可用” 如果不存在则提示：“用户名可以可用” 五、Ajax应用实例 使用文本框的onBlur事件 使用Ajax技术实现异步交互 创建XMLHttpRequest对象 通过 XMLHttpRequest对象设置请求信息 向服务器发送请求 创建回调函数，根据响应状态动态更新页面 五、Ajax应用实例 Chapter * 验证姓名表单-checkname.html 使用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应用实例 使用Ajax进行处理-checkname.html 1、创建XMLHttpRequest对象 var xmlhttp; function doAjax(url) { try { xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); } catch (e) { try { xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); } catch (e) { try { xmhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType(text/xml); } … } catch (e) { } } } } 五、Ajax应用实例 使用Ajax进行处理-checkname.html 2、设置在服务器完成后要运行的回调函数 3、设置请求信息 4、发送请求 五、Ajax应用实例 function doAjax(url) { 创建XMLHttpRequest对象 … xmlhttp.onreadystatechange = processRequest; xmlhttp.open(post, url, true); //如果以post方式请求，必须要添加 xmlhttp.setRequestHeader(Content-type, application/x-www-form-urlencoded); xmlhttp.send(null); } function processRequest() { var messdiv = document.getElementById(“mess”)； if (xmlhttp.readyState == 4)｛ if (xmlhttp.status == 200) { //responseText表示请求完成后，返回的字符串信息 if (xmlhttp.responseText == false) messdiv.innerHTML = 用户名可以使用; else messdiv.innerHTML = 用户名已被使用; } else { alert(请求处理返回的数据有错误); } } } 本部分结束！ * script type=text/javascript var http_request = false; function send_request(url) { //初始化、指定处理函数、发送请求的函数 http_req