您的位置：首页 > Web前端 > JQuery

jquery实现Ajax小实例开发（图文详解开发流程）

2010-09-01 14:41 996 查看
程序功能很简单。利用jquery库实现Ajax效果，客户端网页发送一文本框中数据，服务器端收到数据后,做出响应，然后客户端页面做出局部更新。

开发环境：MyEclipse 8.5、Tomcat 6

一、先整体看一下文件的结构



二、编写程序代码：

1、建立好相应的文件结构：

a、新建一个Web Project，命名为ajax。这一步很简单，不多说了

b、在src下新建一package，命名为ajax.servlet 。


c、在WebRoot下新建一文件夹，命名为jslib 。

2、编写服务器端程序。

新建一Servlet，命名为CheckServlet

CheckServlet.java源代码如下：

package ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Thinkpad
*
*/
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();

String name = request.getParameter("username");
out.print("我是服务器，收到客户端的数据:"+name);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}


3、编写客户端html文件

新建ajax.html文件

ajax.html文件源码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax实现校验</title>
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
</head>

<body>
<input type="text" id="username">
<input type="button" value="校验" onclick="verify()" >
<dir id="result"></dir>
</body>
</html>


4、下载jquery.js文件

下载地址：http://docs.jquery.com/Downloading_jQuery

下载后，将文件拷贝到文件结构中

5、

编写verify.js文件

verify.js源代码如下：

function verify() {
// 注解
// alert("点击了按钮");
// jquery查询节点的方法
var jqueryObj = $("#username");
// 获取文本框中用户输入的数据
var username = jqueryObj.val();
// alert(username);
// 将数据发送给服务器的servlet
$.get("servlet/CheckServlet?username=" + username, null, callback);
}
// 回调函数
function callback(data) {
// alert("收到服务器返回的数据");
// alert(data);
var resultObj = $("#result");
resultObj.html(data);
}


三、运行程序

点击按钮之前



点击按钮之后

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航