1,XMLHttprequest.js
//用户名检验方法
//这个方法将使用XMLHTTPRequest对象进行AJAX的异步数据交互
var xmlHttp;
function verify(){
//使用dom的方式获取文本框中的值
//.value可以获取一个元素节点的value属性
var userName = document.getElementById("userName").value;
//创建XMLHttprequest对象
//需要针对IE和其他类型的浏览器建议这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox,Mozillar,opera,safari,ie7,ie8
xmlHttp = new XMLHttpRequest();
//针对某些特定版本的moziller浏览器的BUG进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,ie5.5 ie5
//两个可以用于创建XMLHTTPREQUEST对象控件名称,保存在一个JS数组中
//排在前面的版本较新
var activexName = new ActiveXObject["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activexName.length; i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlHttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//确认XMLHTTPREQUEST对象创建成功
/*if(!xmlHttp){
alert("xmlhttprequest对象创建失败");
return;
}else{
alert(xmlHttp);
}*/
//2.注册回调函数
//注册回调函数时,只需要函数名,不要加括号
//我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
xmlHttp.onreadystatechange = callback;
//3.设置连接信息
//第一个参数表示http的请求方式,支持所有http的请求方式,主要是get和post
//第二个表示请求的url地址,get方式请求的参数也是url中
//第三个参数表示采用异步还是同步方式交互,true表示异步
//xmlHttp.open("GET", "servlet/AjaxServlet?name=" + userName, true);
//post方式请求的代码
xmlHttp.open("POST", "servlet/AjaxServlet", true);
//post方式需要自己设置http的请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//post方式发送数据
xmlHttp.send("name=" + userName);
//4.发送数据,开始和服务器端进行交互
//同步方式下,send这句话全在服务器端数据回来后才执行完
//异步方式下,send这句话会立即完成执行
//xmlHttp.send(null);
}
//回调函数
function callback(){
//5.接收响应数据
//判断对象的状态 是交互完成
if(xmlHttp.readyState == 4){
//判断http的交互是否成功
if(xmlHttp.status == 200){
//获取服务器端返回的数据
var responseText = xmlHttp.responseText;
//将数据显示在页面上
//通过dom的方式到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
}
}
}
2,AjaxServlet.java
package com.panlong.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
Integer total = (Integer) req.getSession().getAttribute("total");
int temp = 0;
if(total == null ){
temp = 1;
}else{
temp = total.intValue() + 1;
}
req.getSession().setAttribute("total",temp);
try {
//1.取参数
resp.setContentType("text/html;charset=GBK");
PrintWriter out = resp.getWriter();
String old = req.getParameter("name");
//2、检查参数是否有问题
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name = URLDecoder.decode(old,"UTF-8");
if("".equals(old) || old == null){
out.println("用户名必须输入");
}else{
if("liling".equals(name)){
out.println("恭喜登录成功");
return;
}else{
out.println("该用户名未注册,您可以注册["+name+"]这个用户名"+temp);
}
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//3.检验操作
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
<!DOCTYPE html>
<html>
<head>
<title>AJAX实例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<script type="text/javascript" src="js/XMLHttprequest.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<font color="blue" size="2">请输入用户名:</font>
<input type="text" id="userName" /><font color="red" size="2"><span id="result" >*</span></font><br/><br/>
<input type="submit" name="提交" value="提交" οnclick="verify();"/>
</body>
</html>
java技术社区QQ群:48482847欢迎你的加入!