具体解释Ajax技术

Ajax 可以做什么？

        现在 Google Suggest 和 Google Maps 使用了 Ajax，通过 Ajax，我们能够使得client得到丰富的应用体验及交换操作，而用户不会感觉到有网页提交或刷新的过程，页面也不须要被又一次载入，应用的数据交换都被隐藏。

       传统的 WEB 应用程序模型是这样工作的：用户的界面操作触发 HTTP 请求，server在接收到请求之后进行一些业务逻辑处理，如保存数据等，然后向client返回一个 HTML 页面。但这样的方式并没有给予用户非常好的应用体验，当server在处理数据的时候，用户则处于等待的状态，每一步操作都须要等待，太多的等待会使用户越来越没有耐心。而 Ajax 则大不同样，它通过 Ajax 引擎，使得应用过程非常自然，操作非常流畅，由于其仅仅和server交换实用的数据，而页面显示等不必要的数据则不再又一次载入。Ajax 引擎事实上就是 JavaScript、XML、XMLHttpRequest 等等各项技术的综合应用。

 为什么使用AJAX?

　　1、通过适当的Ajax应用达到更好的用户体验；
　　2、把曾经的一些server负担的工作转嫁到client，利于client闲置的处理能力来处理，减轻server和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

AJAX从哪里来的?
　　Ajax这个概念的最早提出者Jesse James Garrett觉得：
　　Ajax是Asynchronous JavaScript and XML的缩写。
　　Ajax并非一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包含：

• 使用XHTML和CSS标准化呈现;
• 使用DOM实现动态显示和交互;
• 使用XML和XSLT进行数据交换与处理;
• 使用XMLHttpRequest进行异步数据读取;
• 最后用JavaScript绑定和处理全部数据;

　　Ajax的工作原理相当于在用户和server之间加了—个中间层,使用户操作与server响应异步化。并非全部的用户请求都提交给server,像—些数据验证和数据处理等都交给Ajax引擎自己来做,仅仅有确定须要从server读取新数据时再由Ajax引擎代为向server提交请求。

AJAX的核心技术有哪些？
　　尽管Garrent列出了7条Ajax的构成技术，但个人觉得，所谓的Ajax其核心仅仅有JavaScript、XMLHTTPRequest和DOM，假设所用数据格式为XML的话，还能够再加上XML这一项(Ajax从server端返回的数据能够是XML格式，也能够是文本等其它格式)。

　　在旧的交互方式中,由用户触发一个HTTP请求到server,server对其进行处理后再返回一个新的HTHL页到client,每当server处理client提交的请求时,客户都仅仅能空暇等待,而且哪怕仅仅是一次非常小的交互、仅仅需从server端得到非常easy的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去又一次读取整个页面。

　　而使用Ajax后用户从感觉上差点儿全部的操作都会非常快响应没有页面重载（白屏）的等待。

XMLHttpRequest简称 XmlHttp

        它是一套能够在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对象。  

属性：

onreadystatechange*	指定当readyState属性改变时的事件处理句柄。仅仅写
readyState	返回当前请求的状态，仅仅读.
responseBody	将回应信息正文以unsigned byte数组形式返回.仅仅读
responseStream	以Ado Stream对象的形式返回响应信息。仅仅读
responseText	将响应信息作为字符串返回.仅仅读
responseXML	将响应信息格式化为Xml Document对象并返回，仅仅读
status	返回当前请求的http状态码.仅仅读
statusText	返回当前请求的响应行状态，仅仅读

着重介绍下readyState属性

返回XMLHTTP请求的当前状态，每一个数值代表一个状态

0 (未初始化)	对象已建立，可是尚未初始化（尚未调用open方法）
1 (初始化)	对象已建立，尚未调用send方法
2 (发送数据)	send方法已调用，可是当前的状态及http头未知
3 (数据传送中)	已接收部分数据，由于响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完毕)	数据接收完成,此时能够通过通过responseBody和responseText获取完整的回应数据

方法：

abort	取消当前请求
getAllResponseHeaders	获取响应的全部http头
getResponseHeader	从响应信息中获取指定的http头
open	创建一个新的http请求，并指定此请求的方法、URL以及验证信息(username/password)
send	发送请求到httpserver并接收回应
setRequestHeader	单独指定请求的某个http头

怎样正确使用Ajax？

这里我们拿一个项目中经常使用的用户注冊校验是否有反复username存在的案例来演示。并分别用get方式回传json，post方式回传json，post方式回传xml来演示。

首先我们得考虑在不同浏览器下怎样获得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对象！');
	}
}

GET方式回传json

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);
}

POST方式回传json

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");
}

POST方式回传xml

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");
}

返回的的json

<%@ 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":"用户名能够使用"}");
}
%>

返回的xml

<%@ 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; 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 {
			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>

效果图

        使用过jQuery异步请求的方法的同学，肯定认为那个相当好用，相比而言，上面写的相当繁琐，get方式和post方式请求甚至还有部分代码是有非常大差别的，那应怎样通过代码的方式屏蔽这些差别呢，这里我们仿一下jQuery 的$.ajax() 方法。

//封装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('&');
}

调用我们封装的ajax方法

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
		});
	}
}

我们给ajax传的就是一个object对象，是不是已经非常贴近jQuery的方式了呢。