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。

状态 名称 描述 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2 Send Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 4 Loaded HTTP 响应已经完全接收。

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请求发送完毕。