Ajax介绍及使用

Ajax基本概念

Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，可以在不重新加载整个网页的情况下，对网页的某部分进行更新.
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键-发送异步请求、接受响应以及执行回调。

实现Ajax的过程:

/*简单的ajax异步刷新
 * 1,通过判断ie对ajax的兼容,从而创建兼容浏览器的异步对象
 * 2,判断请求方式是不是get请求,如果是为url地址后面拼接要传输的数据
 * 3,设置请求方式  请求地址   是否异步
 * 4,判断请求方式是不是post请求,如果是,将数据传输给xh.send();
 * 5,发送请求
 * 6,监听状态变化
 * 7,判断是否接收到数据
 * <?xml version="1.0" encoding='utf-8' ?>    //xml文件需要设置版本和编码格式
 * */
function ajax(requesttype, requesturl, async, parameter,datatype,callback) {
			//请求方式,		请求地址,		同步/异步,	要提交的数据,数据传输格式,回调函数需要一个形参data
	//创建异步对象   并判断是不是ie并设置ie的兼容性
	var xhr = null;
	if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft");
	}
	if(requesttype == 'get') {
		requesturl += '?' + encodeURI(parameter);
	}
	xhr.open(requesttype, requesturl, async); //第一个参数表示请求方式,第二个表示请求地址,第三个表示是否异步
	var datas = null;
	if(requesttype == 'post') { //当传进来的提交方式是post是,设置post提交时需要的格式
		datas = encodeURI(parameter); //未解决兼容问题,在post提交时将中文转换编码格式在传输
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置post请求头
	}
	xhr.send(datas); //post请求时用来传递数据,get请求时参数为null
	xhr.onreadystatechange = function() { // XMLHttpRequest 的状态发生改变时调用该函数
		if(xhr.readyState == 4) { //0: 请求未初始化 1服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
			if(xhr.status == 200) { //200状态码表示请求成功。一般用于GET与POST请求
				//responseText 获得字符串形式的响应数据。responseXML 获得 XML 形式的响应数据。 
				var data=null;
				if(datatype=='text'){//判断要传输的数据格式是不是text或json
					data=xhr.responseText;
					callback(data);
				}else if(datatype=='xml'){//判断要传输的数据格式是不是xml
					data=xhr.responseXML;
					callback(data);
				}else if(datatype=='json'){
					data=JSON.parse(xhr.responseText);
					callback(data);
				}
			}
		}
	}
}

Ajax的优缺点

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息,Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行;

对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的[静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。

关于无法将状态加入收藏或书签的问题，HTML5之前的一种方式是使用[URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持追踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）HTML5以后可以直接操作浏览历史，并以字符串形式存储网页状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。上述两个方法也可以同时解决无法后退的问题。

进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。