对AJAX的理解及使用方法

一、ajax概念及优缺点：

1. ajax的概念：

• AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）
• 是一种创建交互式网页应用的网页开发技术。
• 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
• ajax可以使网页实现异步更新。

2. ajax的优势：

• 更自然、流畅的用户体验，对用户的操作即时响应。
• 在不中断用户操作的情况下与web服务器进行通信。
• 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果。
• 通过局部更新页面降低网络流量，提高网络的使用效率。

3. ajax的缺点：

• ajax干掉了Back和History功能，即对浏览器机制的破坏。
• 对搜索引擎支持较弱，如果使用不当，ajax会增大网络数据的流量，从而降低整个系统的性能。
• ajax不能很好支持移动设备。

4. 请求方式 get 和 post 的区别：

• get请求：
  • get 请求不安全，因在传输过程中，数据被放在请求的URL中。
  • get 的传送的数据量较小，主要是因为受URL长度的限制。
  • get 限制form表单的数据集的值必须是ASCII码。
  • get 的执行效率比 post 好。
• post请求：
  • post 请求安全性好，所有操作对用户来说都是不可见的。
  • post 传送的数据量较大。
  • post 支持整个 ISO10646字符集。
  • post 的执行效率比 get 慢。

二、ajax的使用：

1. ajax的核心对象：XMLHttpRequest() ；它是ajax的异步操作和服务端交互的主要依赖对象。

2. ajax使用步骤：

• 创建XMLHttpRequest对象：

	var xhr = new XMLHttpRequest();

• 设置请求参数：第三个参数true是异步，false是同步

	xhr.open('请求方式', url, true);

• 发送请求：

	xhr.send();

• 请求状态发生改变执行的处理函数：

	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			var data = xhr.responseText;
			// data 就是接收到的响应数据；
			// 可以设置成为：xhr.responseText或xhr.responseXML的数据
		}
	}

  注： post 提交数据只能通过 send 方法向服务器发送数据，且必须设置请求头：

	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3. XMLHttpRequest()对象的属性：

• onreadystatechange： 每次状态改变所触发事件的事件处理程序。
• readyState：0-对象创建完毕，1-正在加载（调用open后），2-加载完毕，3-交互，4-完成
• status：从服务器返回的数字代码（如：404（未找到）或200（就绪））

三、ajax使用的注意点：

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