Ajax 五个步骤
首先,先解释一下回调函数:
回调函数就是那些自己写的,但是不是自己来调,而是给别人来掉的函数。 消息响应函数就可以看成是回调函数,因为是让系统在合适的时候去调用。这不过消息响应函数就是为了处理消息的,所以就拿出来单做一类了。其实本质上就是回调函数。 但是回调函数不是只有消息响应函数一种,比如在内核编程中,驱动程序就要提供一些回调函数,当一个设备的数据读写完成后,让系统调用这些回调函数来执行一些后续工作。 回调函数赋予程序员这样一种能力,让自己编写的代码能够跳出正常的程序控制流,适应具体的运行环境在正确的时间执行。
下面是一个用纯js写出的实现Ajax的例子:
verify.js:
//这个方法是用最传统的XMLHTTPRequest对象进行AJAX的异步数据交互( 五步法) //乱码的解决方法1:1.页面端发出的数据作一次encodeURI,服务器端使用username = new String(old.getBytes("iso8859-1"),"utf-8"); //解决方法2:页面端发出的数据作两次encodeURI,服务器端URLDecoder.decode(old,"uft-8");比较通用,无论应用服务器内部如何编码,都行,推荐使用 var xmlhttp; function verify(){ //获取文本框中的值 var username = document.getElementById("username").value; //1.创建 XMLHTTPRequest对象 //这是XMLHTTPRequest对象五步使用中最复杂的一步,主要是浏览器的差异引起的 if(window.XMLHttpRequest){ //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlhttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ //针对IE5,IE6,IE5.5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个数组 var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i = 0;i<activeName.length;i++){ try{ //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,抛出异常,然后可以继续循环,继续尝试创建 xmlhttp = new ActiveXObject(activeName[i]); break; }catch(e){ } } } //确认XMLHttpRequest对象创建成功 if(!xmlhttp){ alert("XMLHttpRequest对象创建失败"); return; }else{ alert(xmlhttp); } //2.注册回调函数 //注册回调函数时,只需要写函数名,不要加括号 //如果加上括号,就会把函数的返回值注册上,这是错误的 xmlhttp.onreadystatechange = callback; //3.设置和服务器端的连接信息 // 第一个参数表示http的请求方式,支持所有的http的请求方式,主要使用 get post //第二个参数表示请求的url地址, //第三个参数表示采用异步还是同步方式交互,true表示异步, //xmlhttp可以实现同步,但是在AJAX中,一般是异步。 // xmlhttp.open("GET","verifyUser.action?name="+encodeURI(username),true); //4.发送数据,开始和服务器端进行交互,这里send里的参数为null,是因为采用了GET的请求方式 //它的参数全部在URL地址里发出去了, xmlhttp.send(null); //要是采用Post的方式,则,书写方式如下 //xmlhttp.open("POST","verifyUser.action",true); //使用post方式需要自己设置HTTP的请求头 //xmlhttp.setRequestHeader("Content-TYpe","application/x-www-form-urlencode"); //xmlhttp.send("name="+username); } function callback(){ //5.接受响应数据 //判断对象的状态是否交互完成 //0=未初始化,1=open方法成功调用以后,2=服务器已经应答客户端的请求3=交互中,4=完成, //readyState每变化一次,就调用一次回调函数callback,如果在这里加上一句话 //alert(xmlhttp.readyState),打上断点进行调试,发现,xmlhttp对象刚创建好,其状态为0,执行完open以后,状态为1 //其实执行完open,callback就已经被调用,在执行send方法,其状态又跑出个1,然后2,然后3,最后4 if(xmlhttp.readyState==4){ //判断http的交互是否成功 if(xmlhttp.status==200){ //获取服务器端返回的数据 //这里服务器输出的是纯文本数据 var responseText = xmlhttp.responseText; //若服务器端输出的是XML格式的数据,responseText = xmlhttp.responseXML;然后对提取的XML进行Dom解析 // 将数据显示在页面上 var divNode = document.getElementById("result"); divNode.innerHTML = responseText; } } }
以上代码,如果是用jQuery来实现,则如下:
$.get(verifyUser.action?name="+$("#username").val(),null,function(data){ $("#result").html(data); },true);
使用被人提供的js库的好处就是,别人都帮你屏蔽了一些复杂的部分
业务逻辑部分:
//ajax返回纯文本数据 public String verifyUser(){ String old; String username = null; HttpServletRequest request = ServletActionContext.getRequest(); old = request.getParameter("name"); try { username = new String(old.getBytes("iso8859-1"),"utf-8"); } catch (UnsupportedEncodingException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } //System.out.println(username); List list = userDao.findAll(); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); try { PrintWriter pw = response.getWriter(); if(username==null||"".equals(username.trim())){ pw.write("用户名不能为空"); return null; }else{ for(int i=0; i<list.size();i++){ if(username.equals(((User)list.get(i)).getUsername())){ pw.write(username+"改用户名存在,重新注册"); return null; } } } pw.write(username+"合法用户!"); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; }
相关推荐
ChinaGuanq 2020-06-08
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05