Ajax

浏览数：29 / 时间：2015年06月09日

一、Ajax(Asynchronous JavaScript and XML）的工作原理

1）AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
2）用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
3）AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
4）Ajax的核心是JavaScript对象XmlHttpRequest

XmlHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

用户界面 <--> AJAX引擎 <--> 服务器

二、Ajax的使用：

a、创建XmlHttpRequest对象：

function createXmlHttpRequest(){
	var xmlHttp=null;
	try{   
		//Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}catch (e) {
		try{
			//Internet Explorer
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){}  
		}
	}
	return xmlHttp;
}
var xhr = createXmlHttpRequest();

或更简单点：

function createXmlHttpRequest(){
	var xmlHttp=null;
	if (window.XMLHttpRequest) {
		xmlHttp=new XMLHttpRequest()
	} else if (window.ActiveXObject) {
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
	}
	return xmlHttp;
}
var xhr = createXmlHttpRequest();

b、指定响应处理函数：

xhr.onreadystatechange=function(){
	if(xhr.readyState==4){
		//真正的处理
		if(xhr.status==200||xhr.status==304){
		//服务器正确返回
		var data = xhr.responseText;//服务器返回的数据
		//把返回的数据写到div中
		document.getElementById("d1").innerHTML=data;
		}
	}
}

c、发出HTTP请求，同时向服务器发送数据：

// 创建一个新的http请求，并指定此请求的方法、URL以及验证信息
xhr.open("GET","/ajaxday02/servlet/ServletDemo1?time="+new Date().getTime());
// 发送请求到http服务器并接收回应
xhr.send(null);

d、处理服务器返回的信息：执行响应处理函数onreadystatechange中的处理动作：

三、XmlHttpRequest详解：

常用属性：

readyState：代表着XmlHttpRequest对象的当前状态

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

只有为4，客户端操作相应的处理

onreadystatechange：当XmlHttpRequest对象的readyState发生变化时，都会触发该事件。该事件处理函数由服务器触发。
在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。

status：服务器返回当前请求的http状态码。200是成功。304服务器端内容没有改变。
esponseText：服务器将响应信息作为字符串返回
responseXml：服务器将响应信息格式化为Xml Document对象并返回

常用方法：

open(method,url,isAsync)：初始化XmlHttpRequest对象。
    method：请求方式。一般使用get或者post
    url：请求的服务器地址。可以使用相对路径或者绝对路径。
    特别注意：如果该地址没有变化，浏览器一般不会再次发出请求的。解决办法，加上一个时间戳。
    /ajaxday02/servlet/ServletDemo1?time="+new Date().getTime()
    isAsync：是否是异步请求。默认是true。

send(requestData)：向服务器发送请求数据。没有传递null。
数据时用在POST请求方式的。数据形式：username=admin&password=123

setRequestHeader(header,value)：Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成
header：首部的名字
value：首部的值。
如果用 POST 请求向服务器发送数据，需要将 "Content-type" 的首部设置为 "application/x-www-form-urlencoded".它会告知服务器正在发送数据，并且数据已经符合URL编码了。
//设置请求消息头，告知服务器，发送的正文数据的类型。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//固定写法
//发送数据
xhr.send("username=admin&password=123");

服务端返回的数据：从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：

HTML数据
responseText：服务器将响应信息作为字符串返回

XML数据
responseXML：服务器将响应信息格式化为Xml Document对象并返回

JSON数据

详见文章：JSON

对比小结

若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 "世界语"