Ajax学习Demo_01

HelloJava1234

浏览: 77257 次

最近访客更多访客>>

joechl

Seagulla

hongchaong

cryingcloud

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

首先创建一个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>

<input type="text" id="userName"/>
<input type="button" value="校验" onclick="verify()"/>

<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随便输入字母就可看到效果！

分享到：