- 浏览: 724542 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
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 1630本文转载自http://www.importnew.com ... -
Protobuffer和json深度对比
2013-11-13 22:53 96912JSON相信大家都知道是什么东西,如果不知道,那可就真的O ... -
小记S2SH开发
2013-07-08 23:23 3649相信S2SH没人不知道了吧,struts2+ ... -
论JAVA框架
2013-04-14 15:09 6094进入新公司已经差不多三个星期了,上次一篇文章 ... -
struts2.x样式修改
2012-11-22 10:09 1580好久没弄过三大框架相关的东西了,今天重新拾起,弄了一下str ... -
tomcat结合nginx使用小结
2012-05-19 13:51 221248相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apa ... -
自定义标签之EL函数
2012-05-10 22:44 2414前几天写了篇博客回顾了一下自定义标签的,这次也来重新回顾一下 ... -
JSP自定义标签小结
2012-05-07 00:39 1799已经好久没有写博客了,这段时间看过很多书,包括《浪潮之巅》( ... -
JAVA处理XML
2011-12-13 22:04 2774网上有很多讲解JAVA怎么处理XML,当然文章并不会再讲那些 ... -
JAVA webservice之Jersey
2011-11-28 23:34 6727前几天我们一起学习了CXF和xfire,那两天都存在WSDL ... -
JAVA webservice之CXF
2011-11-23 22:32 153548昨天我们一起学习了一下xfire,今天我们来看一下CXF, ... -
JAVA webservice之xfire
2011-11-22 21:37 20548最近公司最近需要将以前提供出去的接口统一用一个标准来实现,考 ... -
JDBC对clob和blob的相关操作
2011-11-12 22:58 3589这段时间经常接触到需要对clob和blob字段进行操作的情况 ... -
jsp相对路径和绝对路径小谈
2011-07-14 00:32 33262很长一段时间纠结过JSP ... -
oracle分页小谈
2011-06-17 00:02 3894今天做项目时要实现分页功能,以前只在mysql上弄过,ora ... -
EL表达式遇到的问题
2011-06-14 22:43 3268今天在为客户做一个新需求,重新做几个JSP页面和几个serv ... -
solr初体验(3)
2011-05-12 19:55 2285前两天,学习了solr的 ... -
jsp:include和@include学习
2011-03-27 15:16 2130一直以来做项目都是用@include,很少去用到JSP:in ...
相关推荐
我们在平时的开发中都多多少少的接触或者应用到了AJAX,谈到AJAX技术的意义,我们关注得最多的毫无疑问是提升用户的体验。但是,如果我们结合将来电脑和互联网的发展趋势,我们会发现AJAX技术在某些方面正好代表了...
### 浅谈 AJAX 技术及其优缺点 #### 一、AJAX 技术简介 AJAX(Asynchronous JavaScript and XML)是一种用于构建交互式 Web 应用的技术,它允许 Web 页面无需重新加载整个页面即可动态地更新部分数据。这项技术最...
在JavaScript的世界里,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下,从服务器获取数据并局部更新页面。在实际应用中,我们经常需要发送多个Ajax请求来获取...
令人兴奋的技术,宝贵的实用经验和心得!
【Ajax技术概述】 Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,实现了网页的异步更新,显著提高了用户的交互体验...
"浅谈与AJAX相关的几种技术" 本文将对与AJAX相关的几种技术进行简单介绍,包括XHTML、CSS、XML、XSLT和DOM等。 首先,AJAX技术丰富的功能、交互性以及快速的响应能力受到人们广泛青睐,但实际上AJAX是多种老技术的...
Struts2之ajax初析的并结合jquery一个例子 Web2.0的随波逐流,Ajax那是大放异彩,Struts2框架自己整合了对Ajax的原生支持...首先不谈Struts2的原生支持,我们自己写一个ajax示例,使用异步请求,直接请求action动作:
ASP.NET AJAX 是微软提供的一种用于构建富客户端Web应用程序的技术,它允许开发者在不刷新整个页面的情况下更新页面的部分区域,从而提升用户体验。以下是对ASP.NET AJAX入门的一些关键知识点的详细解释: 1. **...
### Jquery Ajax方法传递到Action的补充说明 #### 1. Ajax在前端与后端的数据交互 Ajax(Asynchronous JavaScript and XML)技术是实现网页异步数据交互的重要手段。在Web开发中,前端可以通过Ajax向服务器发送...
jQuery中的Ajax应用<思维导图>· Ajax杂谈· 思维体系---技术思维、业务数据思维、产品思维、复合思维· 小谈抽象思维(思维篇)·
在讲解JavaScript中的Ajax技术时,经常会遇到异步和同步请求的问题。本文旨在深入探讨这一问题,并通过实例代码说明在Ajax调用中如何控制这两种请求方式。 Ajax(Asynchronous JavaScript and XML)是一种在无需...
Ajax技术及实现 Ajax是一种集合了多种技术的集合,包括JavaScript、XMLHttpRequest、DOM、XML和CSS等,使得浏览器与Web服务器之间可以实现异步数据传输,从而减少数据流量、减轻服务压力、加快网页响应速度。Ajax...
本文从研陌b技术发展的起源谈起,分析AJAX能够为传统的研尾b应用带 来些什么,它的优势在什么地方。然后解释AJAX的基本组成技术和核心原理, 展示了最小的AJAX框架应该拥有的组成部分和AJAX数据交互的基础方法。通 ...
- **CSRF与AJAX**:AJAX请求通常不会自动包含防止CSRF的令牌,因此,为了确保安全性,开发者需要在AJAX请求中手动添加这些令牌。这样,服务器端在验证请求时可以检测到有效的令牌,防止恶意的CSRF攻击。 - **XSS与...
ajax (ajax开发) AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于...
我做ajax的讲座的ppt,有兴趣的...谈了对web应用的重新认识,web的特点,用户的需求,互联网web应用的趋势,ajax在web中的应用,什么是ajax,ajax的知识结构,ajax的核心XHR实现异步,ajax的框架,ajax的未来,air技术
Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。在Web应用程序中,前端代码经常需要与服务器进行数据交互,而Ajax请求是实现这一功能的一种方法。浏览器...
AJAX,即Asynchronous Javascript And XML,可实现无刷新状态更新页面和异步提交 优点: 不需要插件支持 用户体验极佳 提升Web程序性能 减轻服务器和宽带的负担 缺点: 前进后退按钮被破坏 搜索引擎的支持不够 开发...
**Ajax与JavaScript的区别** Ajax(Asynchronous JavaScript and XML)并非一种独立的技术,而是由一系列技术组合而成的,其中包括JavaScript。JavaScript是一种广泛应用于Web开发的轻量级解释型编程语言,由网景...
Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的。 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。 只要是POST请求,...