Ajax标签导航实例详解

• 关 键 词：
• javascript
• netscape
• firefox
• server
• switch

大结局（XMLHttpRequest对象）

好了，到了ajax关键时刻了。

/* ===========================================================
* 函数名称：ajaxUpdater(tarObj,sMethod,URL,parameters)
* 参数说明：tarObj - 异步获取信息希望显示的目标节点ID
*           sMethod - 数据提交方法，两个可选值get,post
*           URL - 提交的目标URL地址
*           parameters - URL后面接（传递）的参数 
* 函数功能：将异步传递的目标URL地址返回的信息，无刷新的写到目标
*           节点(tarObj)中
* 返 回 值：new Error() - 运行错误时返回一个报错信息
* 使用方法：var myAjax = ajaxUpdater(msgBox,"get",URL,para);
============================================================ */
function ajaxUpdater(tarObj,sMethod,URL,parameters){
    var oXmlHttp = createXMLHTTPRequest();
          
    oXmlHttp.open(sMethod, URL+parameters, true);
    oXmlHttp.onreadystatechange = function () {
        if (oXmlHttp.readyState == 4) {
             if (oXmlHttp.status == 200) {
                  if($(tarObj)){
                       $(tarObj).innerHTML = oXmlHttp.responseText;
                  }
                  else{
                       return false;   
                  }         
             }
             else {
                  throw new Error("有一个错误产生！");
             }
         }   
    }
           
    oXmlHttp.send(null);
}

绕了这么多圈，又回到我们文章开始提到的，现在要开始运用XMLHttpRequest对象的相关知识了。

var oXmlHttp = createXMLHTTPRequest();首先是创建XMLHttpRequest对象，我们使用的是createXMLHTTPRequest()：

/* ===========================================================
* 函数名称：createXMLHTTPRequest()
* 参数说明：无参数
* 函数功能：创建XMLHttpRequest对象
* 返 回 值：XMLHTTPRequest对象
* 使用方法：var oXmlHttp = createXMLHTTPRequest();
============================================================ */
function createXMLHTTPRequest(){
     // 非IE浏览器（Firefox,Opera）,XMLHttpRequest对象是浏览器内置的一个对象
     if (useXmlHttp){
         return new XMLHttpRequest();
   }
   else if (useActiveX) { //在IE（IE< 7.0 = use ActiveX）浏览器中，XMLHttpRequest对象是以ActiveX控件的形式存在的          
         if (!XMLHTTP_VER) {
              for (var i=0; i < ARR_XMLHTTP_VERS.length; i++){
                  try {
                      new ActiveXObject(ARR_XMLHTTP_VERS[i]);
                      XMLHTTP_VER = ARR_XMLHTTP_VERS[i]; // 获取本地IE浏览器相应的XMLHttpRequest对象版本
                      break;
                  } catch (oError) {}
              }
         }
         if (XMLHTTP_VER) {
             return new ActiveXObject(XMLHTTP_VER);
         }
         else {
             throw new Error("无法创建XMLHttpRequest对象！");
         }
    }
    else {
         throw new Error("您的浏览器不支持XMLHttpRequest对象！");
    }
}

不同的浏览器XMLHttpRequest对象存在的形式不同，还有版本问题，哎，多写点代码来兼容吧。

// 方法：open
// 创建一个新的http请求，并指定此请求的方法、URL以及验证信息
// 语法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
// 参数
// bstrMethod
// http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。

// bstrUrl
// 请求的URL地址，可以为绝对地址也可以为相对地址。

// varAsync[可选]
// 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。

// bstrUser[可选]
// 如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。

// bstrPassword[可选]
// 验证信息中的密码部分，如果用户名为空，则此值将被忽略。
    
// 备注：调用此方法后，可以调用send方法向服务器发送数据。 xmlhttp.Open("get", "http://localhost/example.htm", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// alert(book.xml);

oXmlHttp.open(sMethod, URL+parameters, true);

这里就是我们常说的异步提交，一般常用的也就是我这里用的3个参数提交方法（get和post两个值），URL地址(URL+parameters,例子里的完整地址就是tarObj + "/" + tarObj + objId + ".htm?d=" + Math.random();)，第三个(true,false)指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。

oXmlHttp.onreadystatechange = function () {
        // 属性：readyState
        // 返回XMLHTTP请求的当前状态
        // 语法：lValue = oXMLHttpRequest.readyState;
        // 备注：变量，此属性只读，状态用长度为4的整型表示.定义如下：
        // 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
        // 1 (初始化) 对象已建立，尚未调用send方法
        // 2 (发送数据) send方法已调用，但是当前的状态及http头未知
        // 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
        // 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
        if (oXmlHttp.readyState == 4) {
         // 属性：status
         // 返回当前请求的http状态码
         // 语法：lValue = oXMLHttpRequest.status;
         // 返回值：长整形标准http状态码，定义如下：
         // Number:Description 
         // 100:Continue
         // 101:Switching protocols
         // 200:OK
         // 201:Created
         // 202:Accepted
         // 203:Non-Authoritative Information
         // 204:No Content
         // 205:Reset Content
         // 206:Partial Content
         // 300:Multiple Choices
         // 301:Moved Permanently
         // 302:Found
         // 303:See Other
         // 304:Not Modified
         // 305:Use Proxy
         // 307:Temporary Redirect
         // 400:Bad Request
         // 401:Unauthorized
         // 402:Payment Required
         // 403:Forbidden
         // 404:Not Found
         // 405:Method Not Allowed
         // 406:Not Acceptable
         // 407:Proxy Authentication Required
         // 408:Request Timeout
         // 409:Conflict
         // 410:Gone
         // 411:Length Required
         // 412:Precondition Failed
         // 413:Request Entity Too Large
         // 414:Request-URI Too Long
         // 415:Unsupported Media Type
         // 416:Requested Range Not Suitable
         // 417:Expectation Failed
         // 500:Internal Server Error
         // 501:Not Implemented
         // 502:Bad Gateway
         // 503:Service Unavailable
         // 504:Gateway Timeout
         // 505:HTTP Version Not Supported
         // 备注：长整形，此属性只读，返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。
             if (oXmlHttp.status == 200) {
       // 属性：responseBody
       // 返回某一格式的服务器响应数据
       // 语法：strValue = oXMLHttpRequest.responseBody;
       // 备注：变量，此属性只读，以unsigned array格式表示直接从服务器返回的未经解码的二进制数据。
       alert(xmlhttp.responseBody);
      
       // 属性：responseStream
       // 以Ado Stream对象的形式返回响应信息
       // 语法：strValue = oXMLHttpRequest.responseStream;
       // 备注：变量，此属性只读，以Ado Stream对象的形式返回响应信息。
       alert(xmlhttp.responseStream);
      
         // 属性：responseText
       // 将响应信息作为字符串返回
       // 语法：strValue = oXMLHttpRequest.responseText;
       // 备注：变量，此属性只读，将响应信息作为字符串返回。XMLHTTP尝试将响应信息解码为Unicode字符串，
       // XMLHTTP默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHTTP可
       // 以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属
       // 性并不处理xml文档中的编码声明。你需要使用responseXML来处理。        
         alert(xmlhttp.responseText);
        
         // 属性：responseXML
       // 将响应信息格式化为Xml Document对象并返回
       // 语法：var objDispatch = oXMLHttpRequest.responseXML;
       // 备注：变量，此属性只读，将响应信息格式化为Xml Document对象并返回。如果响应数据不是有效的XML文档，
       // 此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。

                  $(tarObj).innerHTML = oXmlHttp.responseText;
             }
        }
}

本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！！！

不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来改变指定DOM内的HTML字符串的，而不用刷新页面。详细的信息大家还是google一下吧，我也要休息下啊！！喝口茶先！！^-^！

以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：

1. xhtml
2. CSS
3. Javascript
4. DOM
5. XMLHttpRequest对象
6. innerHTML

还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！

当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今天就收工了，谢谢捧场先！！！

【深 度 阅 读】 相 关 文 章

• AJAX实例入门
• 70个流行的AJAX应用的演示和源码下载
• AJAX+jsp无刷新验证码实例
• AJAX实例应用初体验：自动保存草稿