快速理解Ajax（二）

最新推荐文章于 2025-04-21 09:32:22 发布

最新推荐文章于 2025-04-21 09:32:22 发布 · 114 阅读

文章标签：

#Ajax #jQuery #Servlet #JavaScript #HTML #ViewUI

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个简单的用户名验证示例，介绍了如何使用Ajax与jQuery实现客户端与服务器端的非同步交互，无需页面刷新即可完成数据验证。

最近刚做完了个项目，时间一下变得多了起来，就想学点东西，在做项目过程中觉得JS确实强大，就准备深入学习一下，刚跑通的Ajax例子，里面运用到了JQuery。

1、首先编写客户端index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>ajax初探</title>
  
  <script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
        检验用户名是否存在的例子<br/>
        用户名：<input type="text" id="name">
        <input type="submit" value="校验" onclick="verify()">
    
    <div id="result"></div>
</body>
</html>

2.服务器端用的是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;


public class ClassicServer extends HttpServlet {

	 protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		 response.setContentType("text/html;charset=gb2312");
		 try{
	            PrintWriter out=response.getWriter();
	            String old =request.getParameter("name");
	           	            if(old==null||old.length()==0){
	                out.println("用户名不能为空");
	            }else{
	                String name=old;
	                if(name.equals("yanzhenwei")){
	                   out.println("用户名["+name+"]已经存在，请换个名字");
	                }else{
	                    out.println("用户名["+name+"]尚未存在，可以使用");
	                }
	            }
	          //  out.println("<br/><a href=\"../index.html\">返回上一级</a>");
	          }catch(Exception e){
	          e.printStackTrace();
	        }
	          

	    }
	    protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
	       doGet(request,response);

	    }

}

3. ajax最核心的东西js

function verify(){
       var jqueryObj=$("#name");//用JQuery获得html中id为name的对象
       var userName=jqueryObj.val();//获得name的值
     $.get("servlet/ClassicServer?name=" + userName,null,callback);//用Jquery的get方式向指定的Servlet传参数name,并定义callback函数
    }
 function callback(data){
     var resultObj=$("#result");//获得id为result的节点
     resultObj.html(data);//将服务器端传过来的数据放在该节点显示
   
  }

4.小结

这个例子主要是用一个页面输入一个字符串，然后用js得到里面所输入的值，然后用js控制将该字符串传给服务器端的servlet,并接收来自服务器端传过来的信息显示在客户端，整个过程页面都没有跳转，这就是Ajax。

以下是我的小程序。