jQuery+Ajax实现无刷新操作
使用jQuery实现Ajax操作
想要实现Ajax页面无刷新效果，但是直接利用Ajax代码实在有些麻烦，所以就想用jQuery实现。jQuery很好的封装了Ajax的核心对象XMLHTTPRequest。所以用起来非常方便。
首先，创建服务器端代码，这里用Servlet实现服务器端的数据处理；代码如下：
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置编码格式
resp.setContentType("text/html;charset=UTF-8");
// 创建输出对象
PrintWriter out = resp.getWriter();
// 得到请求参数
String name = req.getParameter("uname");
// 判断
if (name == null || name.length() == 0)
{
out.println("用户名不能为空！");
}
else
{
// 判断
if (name.equals("cheng"))
{
out.println("用户名["+ name +"]已存在！请使用其他用户名！");
}
else
{
out.println("用户名[" + name + "]尚未存在！您可以注册！");
}
}
}
然后，创建JSP页面，要使用jQuery，必须在页面之中引入jQuery库，也就是一个Javascript文件，另外还需引入自定义的Javascript文件，如下：
<!-- 引入Javascript文件 --> <script type="text/javascript" src="js/jquery-1.2.6.js"></script> <script type="text/javascript" src="js/verify.js"></script>
而JSP页面只需要一个文本框、一个普通按钮和一个空白DIV层即可，该DIV用于显示服务器端返回的处理结果；按钮的单击事件触发verify()方法。如下：
<body> <center> 用户名：<input type="text" id="uname" name="uname" /> <br /> <input type="button" name="btnVerify" value="验证" onclick="verify()" /> <br /> <div id="result"> </div> </center> </body>
注意：Ajax方式下不需要使用表单来进行数据提交，因此页面中不用写<form>标签。
接下来，创建一个verify.js文件，在该文件中创建verify()方法，用来实现Ajax的无刷新效果，这是该示例中最为重要的一步。想要使用jQuery实现Ajax分为以下四步：
- · 获取文本框中的内容；
- · 将文本框中的内容发送给服务器端的Servlet；
- · 接收服务器端返回的数据；
- · 将服务器端返回的数据动态地显示在JSP页面上。
针对于第一步，首先通过jQuery获得对象，并取得对象的值，如下：
// 取得文本框对象,通过$()获取的所有对象都是jQuery对象
var jQueryObject = $("#uname");
// 获取文本框中的值
var userName = jQueryObject.val();
通过jQuery中的$()函数获得页面的节点，该函数得到的是一个jQuery对象，然后通过jQuery中的val()方法取得节点的值，也就是文本框中的内容。
针对于第二步，我们使用jQuery的get()方法来发送数据到服务器端，如下：
$.get("TestServlet?uname=" + userName,null,callback);
该方法返回一个XMLHttpRequest对象，该方法提供三个参数，第一个是请求的服务器端的URL，第二个参数是待发送的参数，一般可以在第一个URL中直接带上参数，所以一般该参数为null，第三个参数是服务器端成功处理完成数据之后的一个回调函数。
针对于第三步，就应该创建一个回调函数，用来处理服务器端返回的数据，如下：
// 回调函数
function callback(data)
{
}
该回调函数有一个参数，该参数就是客户端返回的数据。
针对于第四步，再次利用jQueyr的选择器函数得到DIV层，将返回的数据显示在该层之上，如下：
function callback(data)
{
/**
* 第三步，接收服务器端返回的数据
*/
// 将服务器端返回的数据动态的显示在页面上
var resultObject = $("#result");
resultObject.html(data);
}
利用jQuery的html()方法将数据动态地显示到DIV层之中。
现在我们对以上的代码进行优化，我们用两句代码就可以实现以上所有代码的功能，这就是jQuery的强大之处之一。在verify.js文件之中的verify()方法也可以写成下面的形式：
$.get("TestServlet?uname=" +$("#uname").val(),null,function(data){
$("#result").html(data);
})
再为大家分享一个，下面是“无刷新登录”的例子，采用Ashx+jQuery Ajax实现。
1、后台实例代码 ashx文件（可替换为从数据库中读取）
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string name = context.Request.Params["name"].ToString().Trim();
if ("china".Equals(name))
{
context.Response.Write("1");//1标志login success
}
else
{
context.Response.Write("0");//0标志login fail
}
}
2、前台实例代码 aspx文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#test").live("click", function() {
//alert(0);
$.ajax({
type: 'POST',
url: 'Handler1.ashx',
data: { "name": $("#name").val() },
success: function(data) {
if (1 == data)
alert('login success');
else
alert('login fail');
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="name" id="name" />
<input type="button" name="test" id="test" value="validate" />
</div>
</form>
</body>
</html>
分别在前台aspx页面和后台ashx页面中输入如上代码，就实现了一个超级简单的Ajax登录，很简单吧？
相关推荐
-
Ajax回退刷新页面问题的解决办法
Ajax 简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须
-
jQuery实现AJAX定时刷新局部页面实例
方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法. <script> $(function(){ setInterval(aa,10); func
-
Jquery基于Ajax方法自定义无刷新提交表单Form实例
本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos
-
jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o
-
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法 在客户端文本框输入一个内容,然后在服务器端返回时间 在DEMO中要用到ashx文件,用于获取服务器的信息 效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au
-
使用ajax技术无刷新动态调用新浪股票实时数据
新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <scri
-
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl
-
jQuery+AJAX实现无刷新下拉加载更多
随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互. js code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t
-
php+ajax实现无刷新动态加载数据技术
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS
-
使用ajax实现无刷新改变页面内容和地址栏URL
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大的功能呢? HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 虽然ajax可以无刷新改变页面内容,但无法改变页面URL 其次为了更好的可访
-
分页技术原理与实现之无刷新的Ajax分页技术(三)
紧接着上篇-分页技术原理与实现之Java+Oracle代码实现分页(二),本篇继续分析分页技术.上篇讲的是分页技术的代码实现,这篇继续分析一下分页技术的效果控制. 上篇已经用代码简单的实现了一个分页.但是我们都看到,代码中每次通过servlet请求取得结果集后,都会转向到一个jsp页面显示结果,这样每次查询页面都会刷新一下,比如查询出现结果集后要查看第三页,页面就会刷新一下.这样页面给人的效果感觉就会有点不舒服,所以我们希望能够在通过条件查询结果集后无论访问哪一页,页面都不会刷新,而只是结果集变