一个简单的AJAX的小例子_写一个ajax的例子-优快云博客

本文介绍了一个简单的AJAX应用实例，包括服务器端的Servlet处理过程和客户端的页面交互实现。通过这个例子，读者可以了解如何利用AJAX技术进行异步数据交换，实现网页的部分更新而不需重新加载整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.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; public class AJAXServer extends HttpServlet{ protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter out=httpServletResponse.getWriter(); // //计数器的制作 Integer inte=(Integer)httpServletRequest.getSession().getAttribute("total"); int temp=0; if(inte==null) { temp=1; } else { temp=inte.intValue()+1; } //对客户端发来的数据进行处理 String name=httpServletRequest.getParameter("name"); if(name==null||name.length()==0) { out.println("该用户不存在"); } else { //虽然与传统的大致相同,但是本质却不同,它发送的不是一个页面,而是一个数据给客户端 if(name.equalsIgnoreCase("wangxingkui")) { out.println("该用户["+name+"]已经存在"+temp); } else { out.println("该用户["+name+"]尚未注册,可以使用"+temp); } } } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest,httpServletResponse); } }

2.客户端的页面的处理

<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>itcast.cn用户名的检测</title> <mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> </head> <body> itcast.cn的用户检测<br /> <input type="text" id="userName" /> <input type="button" value="检测" onclick="verify()"/><br> <div id="result"> </div> </body> </html>

3.脚本库中的代码:(即jslib目录里的文件)

verify.js

function verify() { alert("该按钮被点击了!!!"); //1获取文本框中的信息 var jquery=$("#userName"); //正常的脚本是dom.getElementById("userName"); var userName=jquery.val(); //2.将文本框中的信息放到服务器端 $.get("AJAXServer?name="+userName,null,callback); function callback(data) { alert("服务器端的数据回来了"); alert(data); //4.将数据显示到遇留空间里去 var resultObj=$("#result"); resultObj.html(data); //把结果填冲到遇留空间去 } }

-----------------------------------------------------

verify1.js是verify的简化版

function verify() { $.get("AJAXServer?name="+$("#userName").val(),null,function(data){ $("#result").html(data) }); }

另外一个库是jquery.js