一个简单的AJAX的小例子

来源：互联网发布：郑州大学软件学院介绍编辑：程序博客网时间：2024/04/30 13:56

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