使用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页面上。
针对于第一步,










