首先说明一下几个名词的意思,我自己理解的
jquery 网上说是JavaScript库或框架。
ajax 一种可以进行异步通信的技术。
本实例用到了jquery库
具体实现步骤如下:
1.下载jquery库 我下载的是jquery-1.3.2.js,我试过了支持jsp,好像jquery.js不支持jsp,我也没测试成功,哪位大哥在jquery.js下面测试成功了,告我啊
2.把它放在一个web工程webroot目录下面的一个文件夹里面(如 js文件夹里面)
3.编写服务器端的程序:
AjaxServlet.java
public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("name"); System.out.println(username); if(username==null){ out.println("请输入用户名"); } else if(username.equals("admin")){ ut.println("用户名已经被注册了"); } else{ out.println("用户名"+username+"可以进行注册"); } } protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } public void destroy() { super.destroy(); } public void init() throws ServletException { super.init(); } }
配置web-xml文件
代码如下
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>com.servlet.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app>
写前台代码:
ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajax示例</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="js/verify.js"></script> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> </head> <body> 用户名校验Ajax实例,请输入要注册的用户名和密码:<br/> <!-- ajax方式不需要使用表单来进行提交数据,因此不用写表单标签 --> <!-- ajax方式不需要name属性,需要一个id的属性 --> username:<input type="text" id="username"/><br/> password:<input type="password" id="password"/><br/> <input type="button" value="检测用户是否存在" onclick="verify()"/> <!-- 这个div用于存放服务器返回的结果,开始为空 --> <div id="result"></div> </body> </html>
上面得html文件里面导入了js文件,一个是jquery-1.3.2.js,一个事verify.js文件,刚才在js文件下面存放了jquery-1.3.2.js文件,需要在js文件夹下面新建一个verify.js文件
verify.js文件代码如下:
//定义用户校验的方法
function verify(){ //alert("ajax实例"); //1.获取文本框中的内容 //document.getElementById("username");dom的方式 //jquery 查找节点方式,参数中#加在id属性值可以得到一个节点 //jquery 的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法 var jqueryObj1 = $("#username"); //获取节点的值 var username = jqueryObj1.val(); //2.将文本框中的数据发送给服务器的servlet //使用jquery的xmlHttpRequest对象的get请求的封装 这几种方法都行 //$.get(url,date,回调函数) $.get("AjaxServlet?name="+username,null,callback); //$.get("AjaxServlet",username,callback); //$.get("AjaxServlet","name="+username,callback); } //回调函数 function callback(data){ //alert("服务器端的数据回来了!!"); //3.接受服务器端返回的数据 //4.将服务器端返回的数据动态的显示在网页上 //找到保存结果信息的节点 var resultObj = $("#result"); //动态的改变页面节点div中的内容 resultObj.html(data); }
到此 所有的工作都做完了,测试下就知道了