AJAX入门实例

AJAX原理与实践

最新推荐文章于 2025-12-04 17:39:28 发布

最新推荐文章于 2025-12-04 17:39:28 发布 · 71 阅读

文章标签：

#javascript #ViewUI

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向服务器提出请求并处理响应，而不阻塞用户。