锐客网

  1. 首页 > 睿知 > it技术 > >

前端|神奇的Ajax

java前端eclipseOracle

目录 实现无刷新的用户登录 实现搜索自动提示 实现无刷新的用户登录 带你们看一下互联网的革命 前端|神奇的Ajax
文章图片

【前端|神奇的Ajax】
为什么要使用Ajax?除去下面我所讲的，还有很多，看下面这张图，感兴趣的可以去搜索 前端|神奇的Ajax
文章图片

无刷新：不刷新整个页面，只刷新局部 无刷新的好处: 1、 只更新部分页面，有效利用带宽 2、 提供连续的用户体验 3、提供类似C/S的交互效果，操作更方面，自动补全功能 XMLHttpRequest： avaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力

方法名 说明
open(method,URL,async) 建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content) 发送请求 content参数指定请求的参数
setRequestHeader(header,value) 设置请求的头信息
常用属性： onreadystatechange：指定回调函数 readystate: XMLHttpRequest的状态信息
就绪状态码 说明
0 XMLHttpRequest对象没有完成初始化
1 XMLHttpRequest对象开始发送请求
2 XMLHttpRequest对象的请求发送完成
3 XMLHttpRequest对象开始读取响应，还没有结束
4 XMLHttpRequest对象读取响应结束
常用属性 status：HTTP的状态码 responseText：获得响应的文本内容 responseXML：获得响应的XML文档对象 前端|神奇的Ajax
文章图片

状态码 说明
200 服务器响应正常
400 无法找到请求的资源
403 没有访问权限
404 访问的资源不存在
500 服务器内部错误
使用Ajax验证用户名 实现无刷新用户名验证 当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在 如果已经存在则提示：“用户名已被可用” 如果不存在则提示：“用户名可以可用” 使用文本框的onBlur事件 1、 使用Ajax技术实现异步交互 2、创建XMLHttpRequest对象 3、通过 XMLHttpRequest对象设置请求信息 4、 向服务器发送请求 创建回调函数，根据响应状态动态更新页面 验证姓名表单-checkname.jsp 使用JavaScript验证用户名- checkname.jsp
用户名

function checkUserExists() { var f = document.form1; var username = f.username.value; if (username == "") { alert("用户名不能为空"); return false; } else { doAjax("CheckUserServlet?username=" + username); } }

创建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进行处理-checkname.jsp 1、创建XMLHttpRequest对象 2、设置在服务器完成后要运行的回调函数 3、设置请求信息 4、发送请求
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("请求处理返回的数据有错误"); } } }

使用Ajax实现登录:下面是一个示例
function doAjax(){ createXMLHttpRequest(); var name = document.getElementById("uname").value; var pwd = document.getElementById("upwd").value; if(XMLHttp!=null){ var url ="LoginServlet?uname="+name+"&upwd="+pwd； XMLHttp.open("POST",url,true); XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; "); XMLHttp.onreadystatechange=processRequest; XMLHttp.send(null); }else{ alert("不能创建XMLHttpRequest对象实例") } }

实现搜索自动提示 就像下面这张图一样。搜索框会出提示 前端|神奇的Ajax
文章图片
搜索提示的原理 1、每输入完一个关键字时，向服务器发送一个请求 2、服务器根据用户输入的关键字，从数据库中搜索相关关键字信息，并返回到客户端 3、在客户端显示提示信息 注意事项 当键盘的按键抬起时，触发onkeyup键盘事件 将文本框的autocomplete属性设置为off，以免影响搜索提示 当搜索提示出现后，需要将其中选中的搜索项突出显示，以便区分 下面是一个例子
public class SearchSuggest extends HttpServlet { public void doGet( …) { … String str = request.getParameter("search"); List strList=new ArrayList(); try{ if(str!=null&str.length()>0){ … rs=stmt.executeQuery("select distinct(title) from suggest where title like '"+str+"%' order by title"); while(rs.next()) strList.add(rs.getString("title")); StringBuffer sbu=new StringBuffer(); int size = strList.size(); for(int i=0; i

function processReuqest(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var sobj=document.getElementById("suggest"); sobj.innerHTML=""; var str= xmlhttp.responseText.split("-"); var suggest=""; if(str.length>0&&str[0].length>0){ for(i=0; i

以上就是今天的分享，多多点评！

    推荐阅读


    上一篇：Web前端|CSS伪类的实例(1)

    下一篇：前端|购物车项目代码+页面+连接数据库