Ajax指南

AJAX工作原理

一，Ajax所包含的技术

Ajax并非一种新的技术，而是原有技术的结合体。它由下列技术组合而成。

使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
使用XMLHttpRequest来和服务器进行异步通信。
使用Javascript来绑定和调用。

二，怎样创建Ajax

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用Javascript来操纵DOM而更新页面。这当中最为关键的一步就是从服务器获得请求数据。

原生创建Ajax可分为以下四步：

1，创建XMLHttpRequest对象

所有现代浏览器均内建XMLHttprequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveObject:

var xhr = new XMLHttpRequest();

老版本的IE（5和6）使用ActiveX对象；

var xhr = new ActiveXobject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，则用如下代码，

var xhr;
if (XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2，准备请求

初始化该XMLHttpRequest对象，接受三个参数：

xhr.open(method,url,async);

第一个参数表示请求类型的字符串，其值可以是GET或者POST。GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST请求：

xhr.open("POST",demo.php,true);

第二个参数是要作为请求发送目标的URL。第三个参数是true或者false,表示请求是一异步还是同步模式发出。

false:同步模式发出的请求会暂停所有Javascript代码的执行，直到服务器获得响应为止。如果浏览器在连接网络时或者在下载文件时候出了故障，页面就会一直挂起。
true:异步模式发出的请求，请求对象收发数据的同时，浏览器可以继续加载页面，执行其他Javascript代码。

3，发送请求

xhr.send();

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的URL参数中，此时的send方法的参数为null或者空。

GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST请求：如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头部。然后在send()方法中规定要发送的数据：

xhr.open("POST",demo.php,true);
xhr.setRequestHeader("Content-Type","application/x-www-formm-urlencoded;charset=UTF-8");
xhr.send("name"+uerName+"&age="+userAge);

4，处理响应

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status ==200){
    console.log(xhr.responseText);
}
}

0 (未初始化) or (请求还未初始化)
1 (正在加载) or (已建立服务器链接)
2 (加载成功) or (请求已接受)
3 (交互) or (正在处理请求)
4 (完成) or (请求已完成并且响应已准备好)

4，完整示例

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

在这个例子中：

用户点击 “Make a request” 按钮；
事件处理调用 makeRequest() 函数；
请求已通过然后（onreadystatechange）传给 alertContents() 执行。
alertContents() 检查返回的响应是否OK，然后 alert() test.html 文件内容。

三，Ajax应用场景

数据验证
按需求取数据
自动更新页面

四，Ajax的优缺点

优点：

页面无需刷新，用户体验好。
异步通信，更快的响应能力。
减少冗余请求，减轻的服务器负担。
基于标准化并被广泛支持的技术，不需要插件或者小程序。

缺点：

Ajax干掉了bakc按钮,即对浏览器后退机制的破坏。
存在一定的安全问题。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
无法用URL直接访问。