Ajax基础

通过学习了解到，Ajax即是通过XMLHttpRequest对象请求服务器资源而不刷新当前页面的一种技术。

原始无刷新技术的实现

在Ajax技术流行之前，开发者也会用到无刷新技术，那么他们是怎么做到的呢？经过总结，有三种方法可以实现：

利用HTTP协议的204特性

a.html代码如下：

<a href="a.php">为林武投票</a>

b.php代码如下：

//第一步：投票代码忽略

//第二步：设置204状态码
header('HTTP/1.1 204 No Content');

通过以上步骤，用户在点击为林武投票的链接后，会执行到b.php的代码，但是因为在b.php的最后设置了204状态码就不会跳转，从而实现了无刷新投票。

利用img标签

a.html代码如下：

<script>
function vote(){
    //创建img标签
    var oImg = document.createElement('img');
    //设置img标签的src属性
    oImg.setAttribute('src','b.php');
}
</script>

<a onclick="vote()">为林武投票</a>

通过以上步骤，用户在点击为林武投票链接后，会执行vote()函数，在vote()函数里通过设置img标签src属性的时候会访问b.php，从而实现无刷新技术。

利用iframe标签

a.html

<a href="b.php" traget="vote">为林武投票</a>

<iframe width="0" height="0" frameBorder="0" name="vote"></iframe>

通过以上步骤，用户点击为林武投票链接后，会跳转到隐藏的框架中执行b.php，从而实现无刷新技术。

XMLHttpRequest对象详解

属性

readyState：请求状态

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

responseText：返回响应文本

responseXML：返回响应XML

status：返回响应状态码

statusText：返回响应状态文本

方法

abort()：取消响应

getAllResponseHeaders()：返回全部响应头信息

getResponseHeader()：返回指定响应头信息

open()：初始化请求信息

send()：发送请求

setRequestHeader()：设置请求头信息

事件

onreadystatechange：每次 readyState 属性改变的时候调用的事件句柄函数。

XMLHttpRequest对象使用详解

对象创建

这是参考ecshop的XMLHttpRequest对象的创建，兼容ie及其它浏览器，代码如下：

//js代码
function createXMLHttpRequest ()
{
  var xhr = null;

  if (window.ActiveXObject)
  {
    var versions = ['Microsoft.XMLHTTP', 'MSXML6.XMLHTTP', 'MSXML5.XMLHTTP', 'MSXML4.XMLHTTP', 'MSXML3.XMLHTTP', 'MSXML2.XMLHTTP', 'MSXML.XMLHTTP'];

    for (var i = 0; i < versions.length; i ++ )
    {
      try
      {
        xhr = new ActiveXObject(versions[i]);
        break;
      }
      catch (ex)
      {
        continue;
      }
    }
  }
  else
  {
    xhr = new XMLHttpRequest();
  }
  return xhr;
}

对象使用

发送GET或POST请求

//第一步，创建XMLHttpRequest对象，详细参考上面创建代码，这里直接引用
var xhr = createXMLHttpRequest ();

//第二步，初始化请求信息,其中第一个参数是POST表示发送POST请求，第三个参数true表示异步，false表示同步
//xhr.open('POST','./xx.php',true);
xhr.open('GET','./xx.php',true);

//第三步，发送请求
//如果是POST请求，在send之前，要设置Content-Type的值如下
//xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//如果是POST请求，可以将POST数据放到send方法的参数里，如下：
//xhr.send('uname=linwu&password=mima');
xhr.send(null);

//第四步，接收返回信息
xhr.onreadystatechange = function () {
    if(this.readyState == 4) {
        //返回文本信息
        //console.log(this.responseText);
        //返回xml信息
        console.log(this.responseXML);
        //PS：Ajax只能返回以上两种信息
    }
}
//经过以上四步，Ajax的GET请求发送完毕。