异步刷新及一些心得

AJAX指异步JavaScript及XML，它不是一种新的编程语言，而是一种使用现有标准的新方法。

AJAX基于JavaScript和HTTP请求的，因为AJAX通过在后台与服务器交换少量数据的方式，允许网页进行异步刷新。这意味着可能在不重载整个页面的情况下，对网页的一部分进行更新，通过AJAX，可以创建更好、更快及更友好的WEB应用程序。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给中间层自己来做，只有确定需要从服务器读取新数据时再由中间层代为向服务器提交请求。

异步刷新技术有点有很多：

1,、无刷新更新数据。

2、异步与服务器通信。

3、前端和后端负载平衡

4、基于标准被广泛支持

5、界面与应用分离

原理：

XMLHTTPRequest负责与服务端的通讯，其内部有很多的重要的属性：readyStatus=4，status=200等。当XMLHTTPRequest的整体状态并保证它已经完成，即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果准备就绪（status=200），那么执行需要的操作。

一般是直接操作DOM。

业务函数：

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

客户端实现异步实际上是JavaScript的回调函数起的作用，一旦服务器响应可用，该函数就被执行。

需要异步通讯的函数：

function executeXhr(callback, url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET", url, true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET", url, true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET", url, true)

第一行定义的JavaScript回调函数，一旦响应就绪它就会自动执行，而req。open（）方法中所指定的“true”标志说明想要异步执行该请求。

回调函数：

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

异步刷新技术非常实用，因为其带来的用户体验非常好，相信会有更好发展。在做项目过程中，我们的任务往往不仅仅是实现功能，而是更好的、更合理的实现功能，如果完成得功能体验起来非常槽糕，那么这只是一个失败的程序。