- 浏览: 720888 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
yukang1:
太适合新手了 谢主隆恩
tomcat结合nginx使用小结 -
singformyself:
确实,楼主写的很好。必须赞一个。让我这个nginx新手如获至宝 ...
tomcat结合nginx使用小结 -
光太狼Leon:
这才是真正对新手有用的文章。
tomcat结合nginx使用小结 -
wangyudong:
由CXF实现的微服务需要有比较好的工具去测试RESTful A ...
JAVA webservice之CXF -
MCLoginandPwd:
如今,java技术框架太多了,给你分享一个好玩代码生成器,ht ...
论JAVA框架
最近在做项目时经常用到ajax,当然有个很好的jquery在那时就省去了自己写那一堆XMLHttpRequest对象的麻烦了,但用久了它,发现渐渐地忘记了普通的ajax怎么去写了。现在重新来回顾一下,也跟各位童鞋一起学习一下。
首先建了一个测试的数据库,数据库建表语句如下:
create table `user` ( `id` double , `name` varchar (60), `password` varchar (60) );
我们建立一个TestServlet来处理我们的ajax请求,这个需要在web.xml中进行配置,这里就不写配置文件了。
TestServlet中对post请求的处理如下:
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Connection conn = null; String name = req.getParameter("name"); resp.setContentType("text/html;charset=UTF-8"); try { Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajax","root","root"); PreparedStatement pstat = conn.prepareStatement("select * from user where name=?"); pstat.setString(1,name); ResultSet rs = pstat.executeQuery(); //记数器,判断是否存在该用户 int count = 0; while(rs.next()){ count ++; } //当找不到该用户时,返回相应的错误信息 PrintWriter out = resp.getWriter(); if (count == 0){ out.println("不存在该读者"); } out.close(); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } }
接下来就是我们的JSP文件,名字随便啦:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript" src="<%=request.getContextPath() %>/jquery-1.4.4.js" ></script> <script type="text/javascript"> function changeName(){ var $name = $("input[name='name']").val(); $.ajax({ type:"post", url:"<%=request.getContextPath()%>/testServlet", data:{name:name}, beforeSend:function(){ $("#result").append("<img src='<%=request.getContextPath()%>/loading.gif'/>"); }, success:function(text){ //$("#result").html(text); } }); } </script> </head> <body> <form action="" method="post" > 姓名:<input type="text" name="name" onchange="changeName()"/><span id="result"></span><br/> 密码:<input type="password" name="passwd" /><br/> <input type="submit" value="登录"/> </form> </body> </html>
这里注意一下,我在当前JSP的目录下放了一个jquery-1.4.4.js文件,当然jquery也就是用的是1.4.4版本的,这个版本跟以前的在选择器方面有些不同,以前用的当需要选择属性时需要添加@符号,比如查找所有名字为name的input标签,在jquery 1.3中需要写为:
$("input[@name='name']")
而在新的版本的jquery中,@符号已经被去除,只需要这样:
$("input[name='name']")
即可。
上面的$name变量命名表明现在这个变量是jquery变量,方便查看代码。
我的代码中用到testServlet这是我的TestServlet对应的URL。
直接运行就得到了:
这里一直在转是因为我把那个success中的代码注释掉了。如果把注释去掉我们刷新一下再看看效果就有:
这里也就是曾经许多童鞋在论坛上问过的需要在后台进行长时间处理东西,希望在前台显示一个东西表示正在处理,这样就可以处理了。只需要在beforeSend中添加需要处理的,处理完之后要记得把它替换掉,不然处理完还在转啊转啊就郁闷了。
上面我们是直接用jquery来处理的,我们直接用js呢,也很简单,只不过创建XMLHttpRequest的时候需要进行多种判断以适合万恶的IE,看一下代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript" src="<%=request.getContextPath() %>/jquery-1.4.4.js" ></script> <script type="text/javascript"> var request; function changeName(){ var name = document.getElementsByName("name")[0].value; try{ request = new XMLHttpRequest(); }catch(trymicrosoft){ try{ request = new ActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ request = false; } } if (request){ request.open("post","<%=request.getContextPath()%>/testServlet?name="+name,true); request.onreadystatechange=getResult; request.send(null); } } function getResult(){ if (request.readyState == 2) $("#result").append("<img src='<%=request.getContextPath()%>/loading.gif'/>"); if (request.readyState == 4) if (request.status == 200) ;//这里没语句的话需要加上;//$("#result").html(request.responseText); } </script> </head> <body> <form action="" method="post" > 姓名:<input type="text" name="name" onchange="changeName()"/><span id="result"></span><br/> 密码:<input type="password" name="passwd" /><br/> <input type="submit" value="登录"/> </form> </body> </html>
这里我们看到,直接用js来发送ajax请求,需要多很多代码,其实这些jquery已经帮我们做了,我们看不到而已。
运行后,我们可以看到效果:
我们看到它一直在滚,并没有消失,对,这跟前面的效果一样。
那么我们把:
$("#result").html(request.responseText);
这句话的注释给去了,我们看到了效果:
这也跟我们前面的效果一样,成功返回了结果。
那么那个2代表什么呢?这个还需要看一下ajax的运行状态:
0:请求没有发出(在调用 open() 之前)。 1:请求已经建立但还没有发出(调用 send() 之前)。 2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。 3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。 4:响应已完成,可以访问服务器响应并使用它。
大家可以一个个试试,1对应的就是jquery中的beforeSend,而4就是success,其他状态用得不多,有兴趣的童鞋可以试试,看jquery中有没有相对应的属性。
很多童鞋有时候会发现ajax返回的结果是乱码,这里不要紧张,分析一下原因,应该是因为编码不一致,因为是返回给页面才出现乱码,这里我们需要用:
response.setContentType("text/html;charset=UTF-8");
不要跟着写哦,注意按自己页面的编码来写。
发表评论
-
你的单元测试有多稳定?提升自动测试质量的最佳实践
2014-03-21 13:12 1585本文转载自http://www.importnew.com ... -
Protobuffer和json深度对比
2013-11-13 22:53 96723JSON相信大家都知道是什么东西,如果不知道,那可就真的O ... -
小记S2SH开发
2013-07-08 23:23 3609相信S2SH没人不知道了吧,struts2+ ... -
论JAVA框架
2013-04-14 15:09 6035进入新公司已经差不多三个星期了,上次一篇文章 ... -
struts2.x样式修改
2012-11-22 10:09 1537好久没弄过三大框架相关的东西了,今天重新拾起,弄了一下str ... -
tomcat结合nginx使用小结
2012-05-19 13:51 220887相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apa ... -
自定义标签之EL函数
2012-05-10 22:44 2362前几天写了篇博客回顾了一下自定义标签的,这次也来重新回顾一下 ... -
JSP自定义标签小结
2012-05-07 00:39 1727已经好久没有写博客了,这段时间看过很多书,包括《浪潮之巅》( ... -
JAVA处理XML
2011-12-13 22:04 2741网上有很多讲解JAVA怎么处理XML,当然文章并不会再讲那些 ... -
JAVA webservice之Jersey
2011-11-28 23:34 6669前几天我们一起学习了CXF和xfire,那两天都存在WSDL ... -
JAVA webservice之CXF
2011-11-23 22:32 153404昨天我们一起学习了一下xfire,今天我们来看一下CXF, ... -
JAVA webservice之xfire
2011-11-22 21:37 20463最近公司最近需要将以前提供出去的接口统一用一个标准来实现,考 ... -
JDBC对clob和blob的相关操作
2011-11-12 22:58 3540这段时间经常接触到需要对clob和blob字段进行操作的情况 ... -
jsp相对路径和绝对路径小谈
2011-07-14 00:32 33204很长一段时间纠结过JSP ... -
oracle分页小谈
2011-06-17 00:02 3819今天做项目时要实现分页功能,以前只在mysql上弄过,ora ... -
EL表达式遇到的问题
2011-06-14 22:43 3241今天在为客户做一个新需求,重新做几个JSP页面和几个serv ... -
solr初体验(3)
2011-05-12 19:55 2234前两天,学习了solr的 ... -
jsp:include和@include学习
2011-03-27 15:16 2084一直以来做项目都是用@include,很少去用到JSP:in ...
相关推荐
AJAX简介 AJAX代表了异步JavaScript+XML。这种技术首先由微软在1999年引入,并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是,允许一个互联网浏览器向一个远程页面/服务作异步的HTTP...
浅谈多个有序ajax访问示例 近期在学习使用js时碰到了一些问题,而后解决,期间的一点经验与大家分享。
令人兴奋的技术,宝贵的实用经验和心得!
试谈Ajax技术及实现.pdf
Struts2之ajax初析的并结合jquery一个例子 Web2.0的随波逐流,Ajax那是大放异彩,Struts2框架自己整合了对Ajax的原生支持...首先不谈Struts2的原生支持,我们自己写一个ajax示例,使用异步请求,直接请求action动作:
jQuery中的Ajax应用<思维导图>· Ajax杂谈· 思维体系---技术思维、业务数据思维、产品思维、复合思维· 小谈抽象思维(思维篇)·
Ajax技术的出现将基于Web的应用程序开发带进了一个全新的阶段,但Ajax主要是基于JavaScript的客户端技术,所以客户端的开发显得越来越臃肿,随之而来的安全性等一系列问题有待进一步研究。
浅谈与AJAX相关的几种技术.pdf
下面小编就为大家带来一篇浅谈js的ajax的异步和同步请求的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
浅谈如何利用AJAX技术改进在线考试系统.pdf
本文从研陌b技术发展的起源谈起,分析AJAX能够为传统的研尾b应用带 来些什么,它的优势在什么地方。然后解释AJAX的基本组成技术和核心原理, 展示了最小的AJAX框架应该拥有的组成部分和AJAX数据交互的基础方法。通 ...
javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的...以上这篇浅谈Ajax和JavaScript的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望
1.AJAX 全称及介绍: Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种用于创建更快更好以及交互性更强的WEB应用程序技术,不需要任何浏览器插件,但需要用户允许...
ajax (ajax开发) AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于...
下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Ajax中没有固有的安全漏洞,但是对该技术向量的适配显著地改变了网络应用的开发途径以及方法论。AJAX请求的安全性是大家经常...下面这篇文章就来给大家详细谈一谈Web安全与AJAX关系的相关资料,需要的朋友可以参考下。
我做ajax的讲座的ppt,有兴趣的...谈了对web应用的重新认识,web的特点,用户的需求,互联网web应用的趋势,ajax在web中的应用,什么是ajax,ajax的知识结构,ajax的核心XHR实现异步,ajax的框架,ajax的未来,air技术
AJAX,即Asynchronous Javascript And XML,可实现无刷新状态更新页面和异步提交 优点: 不需要插件支持 用户体验极佳 提升Web程序性能 减轻服务器和宽带的负担 缺点: 前进后退按钮被破坏 搜索引擎的支持不够 开发...
下面小编就为大家分享一篇浅谈ajax请求不同页面的微信JSSDK问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户...本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结。下面跟着小编一起来看下吧