详解Ajax技术(二)

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 = eva l('(' + 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 = eva l('(' + 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.nodeva lue;
				if (successNode.firstChild.nodeva lue == 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("
  
   
    true
   
   
    用户名已存在
   
  ");
}
else
{
	response.getWriter().write("
  
   
    false
   
   
    用户名可以使用
   
  ");
}
%>

  
    
    
  
    
  
    
  
	
	<script type="text/java script" src="js/register.js">
	<script type="text/java script" src="js/jquery-1.5.2.js">