AJAX入门实例
regist.jsp代码如下：
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>注册页面</title>
<script type="text/javascript" src="js/ajax.js">
</script>
<script type='text/javascript'>
function myAlert(strTitle) {
var message = document.getElementById("myDiv").innerHTML;
var win1 = new Zapatec.AlertWindow(message, {
title : strTitle,
modal : true,
width : 580,
height : 330
});
}
function doCheck() {
var f = document.forms[0];
if (f.username.value != "") {
document.getElementById("feedback_info").innerHTML= "系统正在处理您的请求，请稍后。";
send_request("POST", "checkUsername.jsp?username="+
f.username.value, null, "text", showFeedbackInfo);//第1步：AJAX通过浏览器的内置对象XMLHttpRequest向服务器发出请求。 } else {
document.getElementById("feedback_info").innerHTML = "请输入用户名称。";
}
}
function showFeedbackInfo() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
document.getElementById("feedback_info").innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table style="font-size: 12px;">
<tr>
<td width="80">
用户名：
</td>
<td>
<input type="text" name="username" onblur="doCheck()">
</td>
</tr>
<tr>
<td colspan="2">
<span id="feedback_info" style="color: #FF0000"></span>
</td>
</tr>
<tr>
<td>
一级密码：
</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
</table>
</form>
</body>
</html>
checkUsername.jsp代码如下：
<%@ page contentType="text/html; charset=utf-8"%>
<%
String name = request.getParameter("username");//第2步，服务器接受请求并处理请求 String username = new String(name.getBytes("ISO8859-1"), "gb2312");//2.1，服务器处理请求
if (username.equals(""))
out.println("用户名称[" + username + "]低俗不堪！请换一个用户名称注册！");//2.2，服务器将处理结果返回
else
out.println("用户名称[" + username + "]符合规范！您可以继续。");
%>
ajax.js代码如下：
//定义XMLHttpRequest对象实例
var http_request = null;
// 定义可复用的http请求发送函数
function send_request(method, url, content, responseType, callback) {// 初始化、指定处理函数、发送请求的函数
http_request = null;
// 开始初始化XMLHttpRequest对象
if (window.XMLHttpRequest) { // Mozilla 、在IE7+、firefox浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {// 设置MiME类别
http_request.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) { // IE5、6浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
// 以下为第3步：AJAX收到结果，按照你设定的方式解析结果并更改页面内容。 // alert(responseType.toLowerCase());
if (responseType.toLowerCase() == "text") {
// http_request.onreadystatechange = processTextResponse;
http_request.onreadystatechange = callback;
} else if (responseType.toLowerCase() == "xml") {
// http_request.onreadystatechange = processXMLResponse;
http_request.onreadystatechange = callback;
} else {
window.alert("响应类别参数错误。");
return false;
}
// 确定发送请求的方式和URL以及是否异步执行下段代码
if (method.toLowerCase() == "get") {
http_request.open(method, url, true);
} else if (method.toLowerCase() == "post") {
http_request.open(method, url, true);
http_request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
} else {
window.alert("http请求类别参数错误。");
return false;
}
http_request.send(content);
}
// 处理返回文本格式信息的函数
function processTextResponse() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
// alert(http_request.responseText);
alert("Text文档响应。");
} else { // 页面不正常
alert("您所请求的页面有异常。");
}
}
}
// 处理返回的XML格式文档的函数
function processXMLResponse() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
// alert(http_request.responseXML);
alert("XML文档响应。");
} else { // 页面不正常
alert("您所请求的页面有异常。");
}
}
}
AJAX即"AsynchronounsJavaScriptandXML"（异步JavaScript和XML），AJAX并非缩写词，而是由JesseJamesGaiie创造的名词，是指一种创建交互式网页应用的网页开发技术。
AJAX最根本的原理就是在不刷新页面的情况下访问服务器处理数据，并根据数据的处理结果按你想要的方式对页面做出及时的更改。
具体流程（三大步）：
AJAX向服务器发出请求-->服务器接受请求，处理请求并将处理结果返回-->AJAX收到结果，按照你设定的方式解析结果并更改页面内容。
AJAX的核心是JavaScript对象XMLHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。