首先创建一个web项目(需要jquery.js)
创建AjaxServlet.java:
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
Integer num=(Integer)request.getSession().getAttribute("total");
int temp=0;
if(num==null){
temp=1;
}else{
temp=num.intValue()+1;
}
request.getSession().setAttribute("total",temp);
String old=request.getParameter("name");
String name=URLDecoder.decode(old,"utf-8");
if(old==null||old.length()==0){
out.println("用户名不能为空");
}else{
if(name.equals("root")){
out.println("该用户【"+name+"】已存在,"+temp);
}else{
out.println("恭喜你【"+name+"】,该用户名尚未注册,"+temp);
}
}
}catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
配置web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:javaee="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun." version="2.4">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
</web-app>
创建ajax.htm:
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/verify.js"></script>
</head>
<body>
<!-- jquery只需id,id是为让dom找到 -->
<input type="text" id="userName"/>
<input type="button" value="校验" onclick="verify()"/>
<!-- div开始为空是为了保存服务器返回的信息 -->
<div id="result"></div>
</body>
</html>
创建verify.js:
function verify(){
var jqueryObj=$("#userName");
var userName=jqueryObj.val();
//将文本框的数据发送给服务器的Servlet,使用jquery的XMLHTTPrequest对象get请求的封装
$.get("AjaxServlet?name="+userName,null,callback);
}
function callback(data){
//找到保存结果信息的节点
var resultObj=$("#result");
//动态改变页面的div节点
resultObj.html(data);
}
最后我们便可以通过访问ajax.htm随便输入字母就可看到效果!
分享到:
相关推荐
学习ajax框架ZK时,写的一个demo,很合理地实现了portal拖动与ZK的结合。
通过它可以学习到ajax和Jquery的用法
Ajax+Serlet+DWR+JDBC,经典DEMO_源码。 Ajax,Serlet,DWR,JDBC,DEMO,入门级代码,源代码 非常适合java初级者学习 经典的通俗易懂的DEMO源代码
这是本人在练习jquery时写的一个简单的小例子,主要采用了jquery的$.ajax方法。希望能对学习jquery的同学有所帮助
只是一个测试Ajax的小Demo,用于测试Ajax使用中的效果。
老师自己写的代码好像是,关于Ajax的,大家一块学习学习吧。反正没坏处
本文件主要是针对springmvc ,spring整合mybatis,json,ajax的学习案例。
Ajax与Asp.net结合实现的一些Ajax中的常用功能,自己封装的方便使用的Ajax类。如果对ajax感兴趣或学习的朋友值得一看哟。
jquery_demo03 ajax学习
ajax学习的比较全的源码,里面有demo,都是不错的发过来,给初学者分享一下
学习angularJs的一些小demo,很全面,包括指令,filter,ajax,路由,scope,controller,动画等。通过API学习angular,然后可以对比小demo,学习!
史上最全Ajax学习资料,PPT+demo源码 响应式布局 , json解析,XMLHttpRequest工作流程,get post请求方式
里面包括一个完整的学习Ajax的例子,还有一本入门手册!!
比较完整的jquery学习文档和demo示例,很适当jquery初学者和想提高自己的中级学者拿来参考并使用,由于最大只能上传50M资源,所以有一个完整全面的pdf学习文档没有上传,联系我,给您发过去。
微信小程序学习用demo:时尚购:ajax获取数据
最早是因为在使用Google安卓架构组件的时候,存在一些涉及网络请求的demo,自己不上手写,总感觉不踏实。又不想重新去搞java ee,一回想,去年的rails还有点印象,要不这下自己来试试。买好书,一点一点来看。 书是...
这是我实习的时候留下的一点小小的经验,我本是不想要积分的,但是这个网站好像是想钱想疯了在学习的同志们,与君共勉!
ssm+ajax新手适用 验证用户名是否存在 可以参照这个demo
相当不错的Ajax学习案例DEMO,常用的异步操作!
ssm框架学习,很好的demo,普通页面跳转演变成ajax无刷新技术