之前转过两篇ajax的文章,今天终于自己动手写了一个ajax的小demo,体验一下ajax的神奇之处,记录下来,纯属个人学习代码,分享给初学的朋友们。
前台部分
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>AjaxDemo</title>
</head>
<body>
<center>
<table>
<caption>Ajax Demo</caption>
<tr><td colspan="3"></td></tr>
<tr>
<td>username</td>
<td><input name="username" onchange="checkUsername()"></td>
<td id="usernameTips"></td>
</tr>
</table>
</center>
<script type="text/javascript">
// 校验username是否被占用
function checkUsername(){
// 定义ajax变量xmlhttp
var xmlhttp;
// 创建xmlhttp
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest;
} else {
xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
}
// 获取username的输入值
var username = document.getElementsByName("username")[0].value;
// 拼接请求URL
var url = "checkUsername?username=" + username;
xmlhttp.open("get",url);
xmlhttp.send();
// 设置回调函数
xmlhttp.onreadystatechange = function() {
// 判断请求状态
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 获取返回的responseText 值
if (xmlhttp.responseText === "using"){
// 设置username的提示语
document.getElementById("usernameTips").innerHTML =
username + " is using,please change other.";
} else {
document.getElementById("usernameTips").innerHTML =
"Congratulations.";
}
}
}
}
</script>
</body>
</html>
页面上方一个table,主要是为了保持username和输入框即提示框的展示。
主要的输入域为username所在的input输入域,绑定的事件为onchange事件,调用方法为checkUsername。
创建XMLHttpRequest对象
创建xmlhttp对象的时候,采取兼容低版本IE浏览器和高版本IE浏览器,火狐,chrome等浏览器的方式
// 创建xmlhttp
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest;
} else {
xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
}
获取username输入值的方法在以前的博文中讲过, document.getElementsByName("username")[0].value 因为这里没有定义id属性,所以采用getElementsByName的方式,拿到集合后再取第0个元素的value值。
get请求
var url = "checkUsername?username=" + username;
拼接URL时,在请求的path中,添加上username的变量值。
其中
// 拼接请求URL
var url = "checkUsername?username=" + username;
xmlhttp.open("get",url);
xmlhttp.send();
为get请求方式,也可换为post请求方式。
post请求
代码修改为
xmlhttp.open("post","checkUsername",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username=" + username);
回调函数
// 设置回调函数
xmlhttp.onreadystatechange = function() {
// 判断请求状态
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 获取返回的responseText 值
if (xmlhttp.responseText === "using"){
// 设置username的提示语
document.getElementById("usernameTips").innerHTML =
username + " is using,please change other.";
} else {
document.getElementById("usernameTips").innerHTML =
"Congratulations.";
}
}
}
回调部分,一定要先判断readyState 值和 status值,否则会得到意想不到的结果。
刚开始的代码,没有判断readyState 和 status,在 xmlhttp.onreadystatechange = function() { 紧接着读取xmlhttp.responseText值,一下子返回三个值。加上readyState 和 status 的判断后,就正常了。
后台部分
package com.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CheckUsername
*/
@WebServlet("/checkUsername")
public class CheckUsername extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CheckUsername() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
String username = request.getParameter("username");
PrintWriter out = response.getWriter();
if ("admin".equals(username)){
out.write("using");
} else {
out.write("notUsing");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,IOException {
doGet(request,response);
}
}
后台部分相对简单很多,通过request.getParameter("username"); 来获取到username的值
加以判断,向前台写回username是否在using的结果值,供前台提示用。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|