6.1. 使用 JQuery 进行 AJAX

JQuery 可能是其替代品中最受欢迎的。

它有自己的开发者社区，这个社区也非常活跃。
使用 jquery 发送 ajax 请求的示例代码如下：

//Current request reference; can be used elsewhere
var request;
/* attach a submit handler to the form */
$("#buttonId").submit(function(event) {
	// abort any pending request
    if (request) {
        request.abort();
    }

  /* stop form from submitting normally */
  event.preventDefault();
  /*clear result div*/
   $("#result").html('');
  /* get some values from elements on the page: */
   var values = $(this).serialize();
  /* Send the data using post and put the results in a div */
  request =$.ajax({
      url: "ajaxRequest",
      type: "post",
      data: values,
      success: function(){
           $("#result").html('submitted successfully');
      },
      error:function(){
          $("#result").html('there is error while submit');
      }   
  }); 
});

3.4. abort()

如果 XMLHttpRequest对象的 readyState尚未变为 4（请求完成），它将中止请求。
abort()方法确保回调方法不会在异步请求中被调用。

// 终止请求
xmlhttp.abort();

除了上述方法，onreadystatechange()事件监听器非常重要，我们将在下一节讨论。

2.1. 创建 XMLHttpRequest 对象

一个新的 XMLHttpRequest 对象是这样创建的：

//Creating a new XMLHttpRequest object
var xmlhttp;
if (window.XMLHttpRequest)
{
	xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
}
else
{
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5
}

这个 xmlhttp变量可以重复使用来发送多个 ajax 请求，而无需为每个请求创建一个新对象。

出于安全原因，XMLHttpRequest受浏览器同源策略的约束。
这意味着只有向为网页提供服务的同一源服务器发出请求才会成功。

3.1. open(method, url, isAsync, userName, password)

XMLHttpRequest对象的 HTTP 和 HTTPS 请求必须通过 open()方法初始化。
open()指定请求的类型（GET、POST 等）、请求 URL 以及是否应异步处理请求。

第 4 个和第 5 个参数分别是用户名和密码。
如果服务器需要，可以提供这些参数用于身份验证和授权目的。

xmlhttp.open("GET","report_data.xml",true);
	xmlhttp.open("GET","sensitive_data.xml",false);
	xmlhttp.open("POST","saveData",true,"myUserName","somePassord");

open()方法：

• 如果任一方法不是有效的 HTTP 方法或者无法解析 url，则抛出 SyntaxError。
• 如果方法是“CONNECT”、“TRACE”或者“TRACK”的不区分大小写匹配，则抛出“SecurityError”。

6.2. 带有原型的 AJAX

Prototype 是另一个用于相同目的的流行框架。

但是，请注意原型与其他一些框架不兼容。
使用原型发送 ajax 请求的示例代码如下所示：

new Ajax.Request('/some_url',
 {
	method:'get',
	onSuccess: function(transport) 
	{
		var response = transport.responseText || "no response text";
	},
	onFailure: function() 
	{ 
		alert('Something went wrong...'); 
	}
});

5.1. 异步 AJAX 请求

为了使网页能够发送异步请求，我在 JSP 页面中编写了以下 javascript 代码：

function ajaxAsyncRequest(reqURL)
{
	//创建一个新的 XMLHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5
	}
	// 创建异步get请求
	xmlhttp.open("GET", reqURL, true);

	// 如果 readyState 是4，那么获取服务器响应
	xmlhttp.onreadystatechange = function() 
	{
		if (xmlhttp.readyState == 4) 
		{ 
			if (xmlhttp.status == 200) 
			{
				document.getElementById("message").innerHTML = xmlhttp.responseText;
				//alert(xmlhttp.responseText);
			} 
			else
			{
				alert('Something is wrong !!');
			}
		}
	};

	xmlhttp.send(null);
}

并且要触发 ajax 请求，应该点击一个 HTML 按钮，它被写成：

<input type="button" value="Show Server Time" 
	onclick='ajaxAsyncRequest("get-current-time")'/>

为了处理服务器端的请求，我编写了一个这样的 servlet：

public class GetTimeServlet extends HttpServlet 
{
	private static final long serialVersionUID = 1L;
	public void doGet (HttpServletRequest request,HttpServletResponse response) 
			throws ServletException, IOException 
	{
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		PrintWriter out = response.getWriter();
		Date currentTime= new Date();
		String message = String.format("Currently time is %tr on %tD.",currentTime, currentTime);
		out.print(message);
	}
}

上面的代码将以文本形式返回当前服务器时间作为响应，客户端代码接收并打印在网页上。

4.4. 处理来自服务器的响应

为了获取从服务器发送的响应，使用了 XMLHttpRequest 对象的 responseText 或者 responseXML 属性。
如果来自服务器的响应是 XML，并且我们想将其解析为 XML 对象，请使用 responseXML属性。
如果来自服务器的响应不是 XML，请使用 responseText属性。

• responseText : 从服务器获取响应作为字符串
• responseXML : 从服务器获取响应为 XML

下面给出的是一个 JavaScript 程序，它获取服务器为 AJAX 请求发送的响应。

if (xmlhttp.readyState == 4) { 
	if (xmlhttp.status == 200) 
	{
		document.getElementById("message").innerHTML = xmlhttp.responseText;
	} 
	else {
		alert('Something is wrong !!');
	}
}

3.2. setRequestHeader(name, value)

成功初始化请求后，可以调用 XMLHttpRequest 对象的 setRequestHeader() 方法来设置请求中的 HTTP 标头。

//Tell the server that this call is made for ajax purposes.
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');  
xmlhttp.setRequestHeader('X-Test', 'some-value');

setRequestHeader()方法：

• 如果任一状态未打开或者设置了 send() 标志，则抛出 InvalidStateError。
• 如果 name 不是标头名称或者 value 不是标头值，则抛出 SyntaxError。

6. 流行的 AJAX 库

很明显，AJAX 是当今使网页具有高度交互性和用户友好性的流行技术。
当今市场上的开发人员可以使用各种 UI 框架，这些框架使用 AJAX 进行更快、更安全的开发。
好消息是它们都可以免费使用。

5.2. 同步 AJAX 请求

要发送同步 ajax 请求，请使用以下内容更改 index.jsp 文件中的 javascript 代码：

function ajaxSyncRequest(reqURL)
{
	//创建新的 XMLHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5
	}
	// 创建同步请求
	xmlhttp.open("GET", reqURL, false);
	xmlhttp.send(null);

	// 在服务器发送响应之前，执行被阻塞
	if (xmlhttp.readyState == 4) { 
		if (xmlhttp.status == 200) 
		{
			document.getElementById("message").innerHTML = xmlhttp.responseText;
		} 
		else
		{
			alert('Something is wrong !!');
		}
	}
}

我们不需要检查同步请求中的就绪状态，因为只有在请求完成时响应才可用。
在此之前，页面将被阻止。

3. XMLHttpRequest 方法

为了发送请求和设置请求属性，XMLHttpRequest对象提供了以下方法：

4. 异步和同步 AJAX 请求

XMLHttpRequest对象能够根据网页的要求发送同步和异步请求。
此行为由 open() 方法的第三个参数控制。

此参数设置为：

• true- 异步请求
• false- 同步请求

//Asynchronous request as third parameter is true
xmlhttp.open("GET", "report_data.xml", true); 
//Synchronous request as third parameter is false
xmlhttp.open("GET", "report_data.xml", false);

如果未提供，则默认值为 true。

异步 AJAX 请求不会阻塞网页，用户可以在服务器处理请求的同时继续与页面上的其他元素进行交互。

我们应该始终使用异步 AJAX 请求，因为同步 AJAX 请求会使 UI（浏览器）无响应。
这意味着在请求完成之前，用户将无法与网页进行交互。

在极少数情况下应极其小心地使用同步请求。
例如，如果我们使用 AJAX 在客户端 UI 上嵌入一个新的 JavaScript 文件，然后从该 JavaScript 文件中引用类型和对象，则应该使用同步 AJAX 请求。
然后应该通过使用同步 AJAX 请求来包含这个新 JS 文件的获取。

异步 JavaScript 和 XML (AJAX) 是与实时服务器交换数据的艺术，无需重新加载整个网页即可更新网页的某些部分。

换句话说，AJAX 允许通过与后台服务器交换少量数据来异步更新网页。
如果应用程序未使用 AJAX，则必须针对用户发出的每个请求加载一个新网页。

1. ajax 是如何工作的？

需要理解的是，AJAX 不是单一的技术，而是一组技术，例如 HTML、CSS、DOM 和 JavaScript 等。
HTML 和 CSS 可以结合使用来标记和样式化网页信息。

使用 JavaScript 访问 DOM 以动态显示信息，并允许用户与所呈现的信息进行交互。

JavaScript 和 XMLHttpRequest对象提供了一种在浏览器和服务器之间异步交换数据以避免整个页面重新加载的方法。

近些年来，XML 的精髓已经减少。
JSON（JavaScript Object Notation）通常用作数据交换的替代格式，但其他格式（例如预格式化的 HTML 或者纯文本）也可用于数据目的。

5. AJAX 演示

出于演示目的，我们正在创建一个 hello world 应用程序。
在应用中，网页发送AJAX请求HTTP GET请求查询当前服务器的系统时间。
作为响应，服务器发送当前时间。

4.1. 同步 AJAX 请求示例

下面给出的是一个 JavaScript 程序，用于展示如何使用 AJAX 发出同步请求。

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  //"false" 设置同步请求
request.send(null);
if(request.status === 200) 
{
	//成功，在这里处理响应内容
}
else
{
	//失败，显示错误信息
}

4.3. onreadystatechange 事件

在上面的例子中，onreadystatechange是一个注册到XMLHttpRequest请求的事件监听器。
onreadystatechange存储一个函数，该函数将处理从服务器返回的响应。

该函数将在请求生命周期中的所有重要事件中被调用。
每次在请求处理中完成一个步骤时，readyState 属性的值将被更改并设置为给定的整数值之一：

• 0 : 请求未初始化
• 1：服务器连接建立
• 2：收到请求
• 3：处理请求
• 4 : 请求完成并且响应准备好被处理

3.3. send(payload)

为了最终发送一个 HTTP 请求，必须调用 XMLHttpRequest的 send()方法。
此方法接受包含要与请求一起发送的请求正文的单个参数。

payload在 POST 请求中是必需的。
对于 GET 和 HEAD 方法，只需将 null作为参数传递。

xmlhttp.send(null); //HTTP GET
	xmlhttp.send( '{"id":"23423"}' ); //HTTP POST

如果任一状态未打开或者已经调用了 send()并且尚未收到响应，则 send()方法将抛出 InvalidStateError。

4.2. 异步 AJAX 请求示例

下面给出的是一个 JavaScript 程序，用于展示如何使用 AJAX 发出异步请求。

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', true);  //"true" 设置异步请求
request.onreadystatechange = function() {
	if (request.readyState == 4) { 
		if (request.status == 200) 
		{
			//请求成功
		} 
		else
		{
			//请求失败
		}
	}
};
request.send(null)

1.1. AJAX 生命周期

通常，向服务器发送ajax请求并从服务器取回响应（生命周期事件）包括以下步骤：

• 我们在浏览器的地址列中输入网页的 URL，然后按 ENTER。该页面在浏览器中加载。
• 某些用户操作会触发事件，例如用户单击按钮。
• 事件触发 ajax 调用，并向服务器发送请求。
• 服务器从 ajax 请求中获取输入，并处理请求。如果需要，服务器还会准备响应。
• 服务器将数据发送回发出请求的网页。
• 另一个称为回调函数的 JavaScript 函数接收服务器响应中的数据，并更新网页。

2. Ajax XMLHttpRequest 对象

AJAX 的核心是 XMLHttpRequest 对象（在客户端脚本语言如 javascript 中可用）。

XMLHttpRequest对象用于在幕后与实时服务器交换数据。
所有现代浏览器（IE、Firefox、Chrome、Safari 和 Opera）都有一个内置的“XMLHttpRequest”对象。

如果我们使用的是 IE 5 或者 IE6（不知道是否还有人使用它），那么ActiveXObject将用于服务器通信以发送 ajax 请求。