JavaScript系列学习笔记 —— Ajax异步刷新技术

一、概念详解

1、Ajax概念

Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript和XML。它是一种运用于浏览器中的技术。在浏览器和服务器之间使用异步交互，从而使用户从HTTP协议的“请求 - 响应”的同步循环中解脱出来。

使用Ajax的Web应用程序无需重新加载整个页面便能向服务器发送请求进行交互，网页向服务器索取少量信息而不是整个页面的所有信息，通过JavaScript和CSS等技术来相应的更新局部数据，用户甚至感觉不到浏览器正在与服务器进行通信。这种操作减少了用户的等待时间，减少了传输的信息量，减轻了服务器和宽带的负担，使页面的响应速度大大加快。

使用Java技术，在客户端执行网页更新位用户提供了很大的灵活性。下面时使用Ajax可以完成的功能：

* 减少从服务器下载的的数据量，提升了站点性能。

* 消除了每次用户输入或访问时的页面刷新，提高了用户体验。

* 即时编辑数据，提高了数据的操作性。

* Ajax没有平台限制。Ajax把服务器的角色由原本传输内容转变传输数据，而数据格式可以是纯文本和XML格式。

* 将一部分工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和宽带的负担，节约空间和成本。

2、Ajax定义

Ajax是指一种运用于浏览器中的技术。在浏览器和服务器之间，它使用一步数据进行转换，并允许网页向服务器索取少量信息而非整个页面资源。这标志着网络应用程序的微小化、迅捷化以及便捷化，是一种不需要依靠服务器软件而独立运行的浏览器技术。但实际上，Ajax并不是一门新的语言或技术，他是JavaScript、XML、CSS、DOM等多种成熟的技术以新的方式组合而成。

* 使用XHTML和CSS进行标准化呈现

* 使用DOM（Document Object Model）进行动态显示及交互

* 使用XML和XSLT进行数据交换及相关处理

* 使用XMLHttpRequest进行异步数据查询、检索

* 使用JavaScript绑定和处理所有数据

3、Ajax原理

Ajax能够实现上述在桌面应用程序中很常见的功能，是因为它在Web页面与服务器之间建立了一个额外的“处理层”。

这个“处理层”通常被称为Ajax引擎或Ajax框架。它解释来自用户的请求，并在后台“安静”地处理服务器通信。这意味着与传统开发模式相比，对于用户操作，服务器请求与响应不需要再同步一致，而是允许用户在当前页面浏览、单击输入数据。

从上图可以看到，一个页面可以发送多次请求访问服务器进行数据的处理并获取。在传统开发模式中，往往只能等请求-响应结束之后才能对页面操作或者等待页面再次刷新完成才能进行其他的操作。而对于Ajax的应用还可以在一个页面内实现多个页面的Ajax操作，体现了Ajax的强大之处。

当然，没有什么都是完美的，Ajax虽然很强大，但也由一些缺点，具体表现在以下几个方面：

* 大量的JavaScript代码，不易维护。

* 可视化设计上比较困难。

* 打破“页”的概念

* 给搜索引擎带来困难

4、Ajax原则

Ajax Web应用程序基于JavaScript和HTTP请求。通过Ajax，用户可以创建更好、更快以及更友好的Web应用程序。Ajax编程虽然使用了多种技术，它的最终目的都是为了改善用户的Web体验。在编程过程中有一些通用的原则需要遵守，这些原则如下：

* 尽量减少客户端和服务器之间的通信量。Ajax应用程序向服务器发送的信息量以及从服务器接收的信息量尽可能地少，确保Ajax应用程序不发送和接收不需要的消息，以增强其可靠性。

* 尊重用户的使用习惯。Ajax应用程序与传统模式相反，一些Ajax应用程序使用诸如拖放、双击等其他用户界面风格。无论如何，一定要确保用户知道下一步如何操作，不要让用户感到意外和无所适从。

* 遵循常规。不要花费太多的事件在开发用户不熟悉的交互模型上。

* 尽量减少页面的干扰因素。这里的干扰因素就很多了，比如过多的动态元素或者过多的数据变化等等。

* 提高可访问性。设计之初，必须要考虑到应用程序的主要用户群体、次要用户群体的构成等等，以便根据需求制定相应的计划。

* 尽量使用户交互连续而流畅，避免下载整个网页。除了页面的访问，所有与服务器的通信都将由Ajax引擎管理。不要一些地方通过Ajax来完成少量数据的下载，而在另外的地方却重新下载整个页面，这将对用户的Web体验造成破坏。

5、Ajax最常使用的场景

* 表单交互。

传统网页的表单提交后，必须等待后台处理完毕返回结果，整个页面刷新之后显示结果是否正确。使用Ajax，在表单提交内容之后，立刻进行异步处理，并在页面上的某一部分快速显示结果，这里并没有刷新整个页面。

* 数据过滤和数据操作

对数据使用过滤器，例如按照时间排序、名称排序等操作或对数据进行增删该查之后需要获取最新数据时，使用Ajax可以加速对数据的查找和处理过程。

6、Ajax需要注意的几个问题

问题		描述
安全问题	由于Web本身就是不安全的，所以尽可能降低Ajax的安全风险就显得尤为重要。主要体现在以下一个方面： JavaScript本身的安全性 Web浏览器中执行JavaScript代码时，允许任何人编写允许代码，从而给网站带来了安全隐患。数据在网络上传输的安全问题 HTTP请求参数的所有代码都是以明码的方式在网络上传输，容易被恶意路由读取传输的内容。为了保证HTTP传输数据的安全，可以对数据的数据进行加密，这样即使被看到，危险也不是很大。客户端调用远程服务器的安全问题虽然Ajax允许客户端完成部分服务器的工作，并可以通过JavaScript来检查用户权限，但是这种行为并不可取，一些黑客可以轻松绕过JavaScript的权限检查，直接访问业务逻辑组件，从而对网站造成威胁。通常情况下，应该将所有Ajax请求都发送到控制器，由控制器负责检查调用者是否具备资源的访问权限。
性能问题	Ajax将大量的计算从服务器移到了客户端，意味着浏览器将承受更大的负担，而不仅是负责简单的文档显示。由于Ajax的核心语言是JavaScript，而JavaScript并不以高性能知名。另外，JavaScirpt对象也不是轻量级的，特别是DOM元素耗费了大量的内存。因此，如何提高JavaScript代码性能尤为重要，下面介绍几种优化Ajax应用执行速度的方法：尽量使用局部变量，而不使用全局变量。优化for循环尽量少用eval，每次使用都需要消耗大量的时间将DOM节点附加到文档上尽量减少“.”操作符的使用
兼容问题	IE浏览器和非IE浏览器创建XMLHttpRequest对象的方式不一样
乱码问题	Ajax不支持多种字符集，它默认的字符集是UTF-8，所以在应用Ajax技术的程序中应该及时进行编码转换。

二、Ajax的核心XMLHttpRequest对象

Ajax是一系列相关技术的融合，其核心包括XMLHttpRequest、JavsScript和DOM技术，数据格式的不同可能会用到Json或者XML的技术。

而XMLHttpRequest是Ajax中最核心的技术，它是一个具有应用程序接口的JavaScript对象，能够使用HTTP协议连接服务器进行动态交互。最大的优点是页面内的javascript脚本可以不用刷新页面，而直接和服务器发生交互，从而实现页面无刷新的效果。

2.1 初始化XMLHttpRequest对象

在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象。由于XMLHttpRequest不是一个W3C标准，所以IE浏览器和非IE浏览器初始化的方法不同。

* IE浏览器

IE 7.0版本之前的浏览器中，使用ActiveX技术创建XMLHttpRequest对象

var xmr = new ActiveXObject("Msxml2.XMLHTTP")

但是在不同版本的微软XMLHTTP库中，ActiveXObject对象的名称有所不同

var xmr = new ActiveXObject("Microsoft.XMLHTTP")

* 非IE浏览器

非IE浏览器把XMLHttpRequest对象实例化为一个本地JavaScript对象

var xmr = new XMLHttpRequest()

为了提高程序的兼容性，通过判断浏览是否提供了XMLHttpRequest类，来判断是直接创建还是实例化一个ActiveX对象。

if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
}else{
		try{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
			}catch(e){
				console.log(e)
			}
		}
}

2.2 XMLHttpRequest对象的常用方法

方法		描述
open()	设置进行异步请求的请求方法、目标的URL、请求方式（默认true为异步，false表示同步）。语法：xhr.open("method","URL","true")
send()	向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。语法：xhr.send(content) content:用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。
abort()	停止或放弃当前异步请求。语法：xhr.abort()
setRequestHeader()	为请求的HTTP头设置值。语法：xhr.setRequestHeader("header","value") 注意：SetRequestHeader()方法必须在调用open()方法之后才能调用
getResponseHeader()	返回指定的HTTP头信息。语法：xhr.getResponseHeader("headerLabel") 注意：SetRequestHeader()方法必须在调用open()方法之后才能调用

2.3 XMLHttpRequest对象的常用属性

1、指定状态改变时触发事件

与服务器访问的过程中，每个状态改变时都会触发onreadystatechange事件处理器，该处理器通常会调用一个函数。

xhr.onreadystatechange = function(){
    //要执行的代码...
}

2、获取请求状态

readyState属性可以获取Ajax与服务器访问过程中的交互属性值。

值	意义	值	意义
0	未初始化	3	交互中
1	正在加载	4	完成
2	已加载

当HTTP请求发送完毕，服务器返回响应数据，系统首先监测XMLHttpRequest对象的readyState属性值，判断HTTP请求的当前状态。当该属性值为4时，代表服务器传送数据完毕。

if(xhr.readyState == 4){	
    //信息已经返回，可以开始处理
}else{	
    //表示信息还没有返回
}

3、返回服务器的HTTP状态码的属性

status属性可以获取返回服务器的HTTP状态码。

值	意义	值	意义
100	继续发送请求	404	文件未找到
200	请求成功	408	请求超时
202	请求被接受，但尚未处理	500	内部服务器错误
400	错误的请求

注意：status属性只能在send()方法返回成功时才有效

在实际应用中，该属性用于判断请求状态是否完成，当请求完成时再判断请求是否成功，如果成功再处理返回结果。

if(xhr.status == 200){
    //表示页面正常，可以开始处理数据
}else{
    //表示页面有问题
}

4、获取服务器响应的字符串

responseText属性可以获取服务器响应的字符串内容

xhr.responseText

5、获取服务器响应的XML

responseXML属性可以获取服务器响应的XML格式的内容，这个对象可以解析为一个DOM对象。

xhr.responseXML

三、Ajax案例代码

3.1 获取文本字符串

text文本内容

Ajax获取的本文内容

实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax异步刷新技术练习</title>
		<script type="text/javascript">
			//单击按钮被调用的函数
			function startRequest(){
				var xhr = creatXMLHttpRequest();
				//开通请求通道，并准备传输内容（请求方式、请求路径及传递参数）
				xhr.open("GET","content.txt");
				//发送请求
				xhr.send();
				//请求发送后执行
				xhr.onreadystatechange = handleStateChange;
			}
			
			//初始化XMLHttpRequest对象的函数
			function creatXMLHttpRequest(){
				var xhr;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					try{
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
						try{
							xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
						}catch(e){}
					}
				}
				return xhr;
			}
			
			//处理服务器返回信息的函数
			function handleStateChange(){
				if(this.readyState == 4){	//请求状态完成
					if(this.status == 200){	//请求成功，开始处理返回结果
						document.body.innerText = this.responseText;
					}else{
						//请求失败
						alert("请求失败");
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="发送请求" onclick="startRequest()"/>
	</body>
</html>

实例效果

3.2 获取XML数据

text文本内容

<?xml version="1.0" encoding="UTF-8"?>
<peopleList>
	<people>
		<name>张三</name>
		<sex>男</sex>
		<age>17</age>
	</people>
	<people>
		<name>李四</name>
		<sex>男</sex>
		<age>18</age>
	</people>
	<people>
		<name>王五</name>
		<sex>男</sex>
		<age>19</age>
	</people>
</peopleList>

实例代码

//****** JavaScript代码 ******
//请求发送后执行
xhr.onreadystatechange = function() {
	if(this.readyState == 4 && this.status == 200) {
		//获取返回的XML文档数据内容
		var XMLCont = xhr.responseXML.documentElement;
		//获取标签名为people的所有节点
		var users = XMLCont.getElementsByTagName("people");
		var user, name, sex, age, str = "";
		if(parameter == "all") {
			console.log("进入")
			for(var i = 0; i < users.length; i++) {
				user = users[i];
				name = user.getElementsByTagName("name")[0].childNodes[0].nodeValue;;
				sex = user.getElementsByTagName("sex")[0].childNodes[0].nodeValue;
				age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
				str += "姓名:" + name + "  性别:" + sex + "  年龄:" + age + "<br />";
			}
		} else {
			for(var i = 0; i < users.length; i++) {
				if(users[i].getElementsByTagName("name")[0].childNodes[0].nodeValue == parameter) {
					user = users[i];
					name = user.getElementsByTagName("name")[0].childNodes[0].nodeValue;
					sex = user.getElementsByTagName("sex")[0].childNodes[0].nodeValue;
					age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
					str += "姓名:" + name + "  性别:" + sex + "  年龄:" + age + "<br />";
					break;
				}
			}
		}
		document.getElementById("Content").innerHTML = str;
    }
}

//****** HTML代码 ******
<input type="button" value="所有人" onclick="startRequest('all')"/>
<input type="button" value="张三信息" onclick="startRequest('张三')"/>
<input type="button" value="李四信息" onclick="startRequest('李四')"/>
<input type="button" value="王五信息" onclick="startRequest('王五')"/>
<div id="Content"></div>

实例效果

3.3 获取JSON数据

JSON文件数据

[
	{"name":"张三","sex":"男","age":17},
	{"name":"李四","sex":"男","age":18},
	{"name":"王五","sex":"男","age":19}
]

实例代码

/****** JavaScript代码 ******
/处理服务器返回信息的函数
function handleStateChange() {
	if(this.readyState == 4 && this.status == 200) {
		var parseObj = JSON.parse(this.responseText);  
		var Str = "";
		for (var i in parseObj){
                Str += "姓名:" + parseObj[i].name + 
                       "性别:" + parseObj[i].sex + 
                       "年龄:" + parseObj[i].age + "<br />";
		}  
		document.getElementById("Content").innerHTML = Str;
	} else {
		alert("请求失败");
	}
}

/****** HTML代码 ******
<input type="button" value="所有人" onclick="startRequest('all')"/>
<input type="button" value="张三信息" onclick="startRequest('张三')"/>
<input type="button" value="李四信息" onclick="startRequest('李四')"/>
<input type="button" value="王五信息" onclick="startRequest('王五')"/>
<div id="Content"></div>

实例效果

四、实例过程解析

这部分只介绍实例一的执行过程，其他实例同理

1、点击按钮调用startRequest函数，在该函数中会访问creatXMLHttpRequest函数将其返回值赋值给局部变量xhr。

2、在creatXMLHttpRequest函数中通过判断当然浏览器对象具有的那一个XMLHttpRequest的声明方式，最终返回这个对象。

3、startRequest函数获取了XMLHttpRequest对象之后，通过open函数开通传输通道，准备请求信息。该信息包括请求方法为GET、请求URL为content.txt,默认的请求方式为true表示异步请求。

4、通过send函数发送请求,访问本地的content.txt文件。

5、xhr的onreadystatechange函数通过监听响应状态调用handleStateChange函数,如果响应完毕(readyState值为4),并且HTTP的请求成功时(HTTP状态码为200)时,即为响应正常.通过XMLHttpRequest对象的responseText属性获取响应结果的字符串.并通过DOM对象的innerText属性插入到body内容区中。