详解Ajax标签导航_AJAX教程

推荐：解读AJAX的跨域名访问
标题有些唬人的成分，因为这里跨的只是子域名。 事情的经过是这样的，还是那个个人门户网站。其中有个功能就是RSS订阅，每个订阅作为一个模块出现在页面上。如果一个用户订阅了比较多的RSS，则在打开页面时所有的RSS模块就会开始加载，这时候可能就会需要十

到了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前端开发）知识可是都用到了啊！

分享：解决ajax缓存的三种方法
ajax缓存解决 有1,2,3种办法： 1、加个随机数 ASP随机函数 xmlHttp.open(GET, ajax.asp?now= + new Date().getTime(), true); 2、在要异步获取的asp页面中写一段禁止缓存的代码： Response.Buffer =True Response.ExpiresAbsolute =Now() - 1 Response.E