ajax基础学习一

 Ajax 的定义
   Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，可见ajax是很多技术的集合，包括了javascript，xml在内的很多技术。      它主要通过 XMLHttpRequest 对象和服务器交互，该对象有以下方法和属性.
        1，open()：建立到服务器的新请求。
        2，send()：向服务器发送数据。
        3，abort()：退出当前请求。
        4，readyState：提供当前 HTML 的就绪状态。
        5，responseText/responseXML：服务器返回的请求响应文本。

     要使用ajax，首先我们必须创建一个 XMLHttpRequest 的对象实例，实际上，这个对象是浏览器内置的，可以简单的通过下面的一条语句即可产生
       var xmlreq = new XMLHttpRequest();
     但是由于IE是使用ActiveXObject方式的，所以为了统一，就产生了下面的经典的造XMLHttpRequest 的函数：

function newXMLHttpRequest() {
  var xmlreq = false;
  if (window.XMLHttpRequest) {
    xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      //针对IE
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        xmlreq = false;
      }
    }
  }
这个函数首先判断是否支持XMLHttpRequest，否（IE）的话，就采用IE的做法去产生一个XMLHttpRequest。

    一旦有个这个对象，和服务器交互，就易如反掌，主要通过下面的步骤：
    1，打开链接
    2，呼叫回调函数
    3，发送讯息
    我们以一个例子来说明XMLHttpRequest的用法，加入我们想要获取google网站首页的标题，即 Google
   看下面的代码和说明：

  var req = newXMLHttpRequest(); //调用上面的方法创建一个XMLHttpRequest对象
  var url="http://www.google.com/指定要请求的url
  req.open("GET", url, true);//打开连接，指定方法为GET，url，第三个参数代表是否异步
  req.onreadystatechange = updatePage; //指定回调方法
  req.send(null); //暂时不发送讯息。

   这么几个步骤，就创建了一个XMLHttpRequest对象，并打开了它对url的连接，并调用回调函数对从url上返回的内容进行处理，下面我们再看回调函数的具体内容：

function updatePage(){
    if (req.readyState == 4) {//判断 readyState 属性是否为4，4代表响应已完成，可以访问服务器响应并使用它
　//这里的if判断是必须的，否则如果脚本没经过验证，你可能得不到有效的数据，所以这里要验证HTTP状态代码.
     if (req.status == 200) {//验证HTTP状态代码
        var result = req.responseText; //这里我们可以获取XMLHttpRequest 从服务器返回的内容了，此处为google首页的html代码
        var i = result.indexOf("<title>");
        var j = result.indexOf("</title>");
        var text = result.substring(i+7,j); //获取google的标题
        alert(text); //显示
       }
    }
}

该方法首先判断XMLHttpRequest的状态是否完成，该对象有五种状态，如下：
//0，请求没有发出（在调用 open() 之前）
//1，请求已经建立但还没有发出（调用 send() 之前）。
//2，请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
//3，请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
//4，响应已完成，可以访问服务器响应并使用它。

    清楚了这个机制，我们就可以利用这些状态做很多事情，呵呵，比如最简单的，当你用google的邮箱发邮件时，它回用一些有颜色的字体来提醒你邮件正在发送，其实就是利用了这个特性，我们可以判断该对象的状态，如果小于4，就是说明正在处理中，从而可以给用户一些提示。


     下一步，通过调用open方法，打开一个对url的连接，XMLHttpRequest有个onreadystatechangge 属性， 可以告诉服务器在运行完成 后做什么，也就是以异步的方式进行回调函数的处理，因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 updatePage() 的方法将被触发。
   这里有一点要注意，javascript函数不仅可以将一个变量赋值给一个变量，还可以将一个函数赋值给一个变量。

最后一步，向服务器发送讯息，这个例子，我们没有向服务器发送讯息。

下面，我将进行这些代码的一些美化。

ajax.js

function newXMLHttpRequest() {
  var xmlreq = false;
  if (window.XMLHttpRequest) {
    xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
      } catch (e2) {
        xmlreq = false;
      }
    }
  }
return xmlreq;
}
//处理responseText
function getReadyStateHandler(req, responseXmlHandler，flag) {
   return function () {
     if (req.readyState == 4) {
       if (req.status == 200) {
            responseXmlHandler(req.responseText);
       } else {
         alert("HTTP error "+req.status+": "+req.statusText);
       }
     }
   }
}
//处理responseXML
function getReadyStateHandlerXML(req, responseXmlHandler) {
   return function () {
     if (req.readyState == 4) {
       if (req.status == 200) {
            responseXmlHandler(req.responseXML);
       } else {
         alert("HTTP error "+req.status+": "+req.statusText);
       }
     }
   }
}

test.html

<script type="text/javascript" language="javascript" src="ajax.js"></script>
<script language="javascript">
       function ajax1(){
        var req = newXMLHttpRequest();
                var url="http://www.google.com";
                if(req.readyState < 4)
                document.getElementById("tishi").innerHTML="正在获取google的标题....";
                req.open("GET", url, true);
                req.onreadystatechange = getReadyStateHandler(req, getGoogle);
        req.send(null);
      }
     function getGoogle(result){
                var i = result.indexOf("<title>");
        var j = result.indexOf("</title>");
        var text = result.substring(i+7,j);
        document.getElementById("google").innerHTML=text;
        document.getElementById("tishi").innerHTML="";
     }
</script>

<a onClick="ajax1();">使用GET方法：获取google网站的标题</a>
<!-- 这里是提示 -->
<font color="green" id="tishi"></b></font><br/>
<div id="google"></div>