具体解释Ajax技术

        它是一套能够在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其它数据的一套API。XmlHttp最大的用处是能够更新网页的部分内容而不须要刷新整个页面。

        来自MSDN的解释：XmlHttp提供client同httpserver通讯的协议。client能够通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向httpserver发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。

        如今的绝对多数浏览器都添加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其它浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。  

属性：

方法：

function creatXmlHttpRequest() 
{
	if (typeof XMLHttpRequest != ‘undefined‘)
	{
		return new XMLHttpRequest();
	}
	else if (typeof ActiveXObject != ‘undefined‘)
	{
		var MSXML = [‘MSXML2.XMLHTTP.6.0‘, ‘MSXML2.XMLHTTP.5.0‘,
				‘MSXML2.XMLHTTP.4.0‘, ‘MSXML2.XMLHTTP.3.0‘, ‘MSXML2.XMLHTTP‘,
				‘Microsoft.XMLHTTP‘];
		for (var i = 0; MSXML.length; i ++)
		{
			try{
				return new ActiveXObject(version[i]);
			}catch (e)
			{
				//.......
			}
		}
	}
	else
	{
		throw new Error(‘您的系统或浏览器不支持XHR对象！‘);
	}
}

function checkUserByAjaxGet() 
{
	// 第一步，得到一个XMLHttpRequest对象
	// var xhr=new XMLHttpRequest();
	// 假设说IE6，就须要使用Active组建
	// xmlhttp=new ActiveXObject(MSXML[n]);
	var xhr = creatXmlHttpRequest();
	var name = document.rgform.username.value;
	// 设置一个事件的监听函数
	xhr.onreadystatechange = function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status == 200 || xhr.status == 304) 
			{
				var ret = xhr.responseText;
				var _ret = eval(‘(‘ + ret + ‘)‘); 
//				var _ret = JSON.parse(ret);
				document.getElementById("msg").innerHTML = _ret.tip;
				if (_ret.success = true) 
				{
					document.rgform.username.focus();
				}
			}
		}
	}
	// 第二步，准备一个连接请求
	xhr.open("get", "checkuserByJSON.jsp?name=" + name, true);
	// 第三步，发起请求
	xhr.send(null);
}

function checkUserByAjaxPost() 
{
	// 第一步,创建xhr对象
	var xhr = creatXmlHttpRequest();
	var name = document.rgform.username.value;
	// 第二步,设置一个事件的监听函数
	xhr.onreadystatechange = function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status == 200 || xhr.status == 304) 
			{
				var ret = xhr.responseText;
				var _ret = eval(‘(‘ + ret + ‘)‘); 
//				var _ret = JSON.parse(ret);
				document.getElementById("msg").innerHTML = _ret.tip;
				if (_ret.success = true) 
				{
					document.rgform.username.focus();
					alert(xhr.getResponseHeader("Content-Length"));
					alert(xhr.getResponseHeader("Content-Type"));
					alert(xhr.getResponseHeader("Date"));
					alert(xhr.getResponseHeader("Server"));
				}
			}
		}
	}
	// 第三步,准备一个POST连接请求
	xhr.open("post", "checkuserByJSON.jsp", true);
	// 使用post方式提交，必需要加上例如以下一行
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 第四步,发起请求
	xhr.send("name=" + name + "&password=ppppp");
}

function checkUserByAjaxPostXml() {
	// 第一步,创建xhr对象
	var xhr = creatXmlHttpRequest();
	var name = document.rgform.username.value;
	// 第二步,设置一个事件的监听函数
	xhr.onreadystatechange = function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status == 200 || xhr.status == 304) 
			{
				var ret = xhr.responseXML;
				var successNode = ret.getElementsByTagName("success")[0];
				var tipNode = ret.getElementsByTagName("tip")[0];
				document.getElementById("msg").innerHTML = tipNode.firstChild.nodeValue;
				if (successNode.firstChild.nodeValue == true) 
				{
					document.rgform.username.focus();
				}
			}
		}
	}
	// 第三步,准备一个POST连接请求
	xhr.open("post", "checkuserByXML.jsp", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 第四步,发起请求
	xhr.send("name=" + name + "&password=ppppp");
}

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String username = request.getParameter("username");
response.setContentType("application/json;charset=UTF-8");
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
if("admin".equals(username))
{
	response.getWriter().write("{\"success\":"+true+",\"tip\":\"用户名已存在\"}");
}
else
{
	response.getWriter().write("{\"success\":"+false+",\"tip\":\"用户名能够使用\"}");
}
%>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("name");
response.setContentType("application/xml;charset=UTF-8");
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
if("admin".equals(userId))
{
	response.getWriter().write("<root><success>true</success><tip>username已存在</tip></root>");
}
else
{
	response.getWriter().write("<root><success>false</success><tip>username能够使用</tip></root>");
}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>register.html</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=UTF-8">
	
	<script type="text/javascript" src="js/register.js"></script>
	<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
	<style type="text/css">
		#round {
		    padding:10px; width:300px; height:150px;
		    border:1px solid #000;
		    -moz-border-radius: 10px;
		    -webkit-border-radius: 10px;
		    border-radius:10px;
		    margin:10px auto;
		}
		#round div.user, #round div.pass {
			font-size:14px;
			color:#666;
			padding:15px 0;
			text-align:center;
			position: relative;
		}
		#round span{
			position: absolute;
			color:red;
			top:35px;
			left:100px;
		}
		#round input.text {
			width:200px;
			height:25px;
			border:1px solid #ccc;
			background:#fff;
			font-size:14px;
		}
		#round .button {
			padding:5px 0;
			text-align:center;
		}
	</style>
  </head>
  
  <body>
  	<div id="round">
	    <form name="rgform" method="post" action="" >
		    <div class="user">
			   	 用户名:<input type="text" name="username"  id="username" onchange="事件调用的方法">
			   	 <span id="msg"></span>
		   	 </div>
		   	 <div class="pass">
		     	密  码:<input type="password"  name="password" id="password">
		     </div>
		     <div class="button"><input type="button" value="提交"/></div>
    	</form>
    </div>
  </body>
</html>

//封装ajax
function ajax(obj) {
	var xhr = creatXmlHttpRequest();
	obj.url = obj.url + ‘?rand=‘ + Math.random();
	obj.data = params(obj.data);
	if (obj.method === ‘get‘) obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ + obj.data : ‘&‘ + obj.data;
	if (obj.async === true) {
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4) {
				callback();
			}
		};
	}
	xhr.open(obj.method, obj.url, obj.async);
	if (obj.method === ‘post‘) {
		xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
		xhr.send(obj.data);	
	} else {
		xhr.send(null);
	}
	if (obj.async === false) {
		callback();
	}
	function callback() {
		if (xhr.status == 200) {
			obj.success(xhr.responseText);			//回调传递參数
		} else {
			alert(‘获取数据错误！错误代号：‘ + xhr.status + ‘，错误信息：‘ + xhr.statusText);
		}	
	}
}

//名值对转换为字符串
function params(data) {
	var arr = [];
	for (var i in data) {
		arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
	}
	return arr.join(‘&‘);
}

window.onload = function(){
	document.getElementById("username").onchange = function(){
		ajax({
			method : ‘post‘,
			url : ‘checkuserByJSON.jsp‘,
			data : {
				‘username‘ : document.rgform.username.value,
				‘password‘ : document.rgform.password.value
			},
			success : function (text) {
					var _ret = eval(‘(‘ + text + ‘)‘); 
					document.getElementById("msg").innerHTML = _ret.tip;
			},
			async : true
		});
	}
}