大结局(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标签导航都用到了那些技术吧:
- xhtml
- CSS
- Javascript
- DOM
- XMLHttpRequest对象
- innerHTML
还有XML,我们这个例子没有涉及到。东西虽小,包含的(web前端开发)知识可是都用到了啊,我把我会的点东西都端出来了(要失业了),呵呵!
当然我很喜欢跟大家多交流,以后有时间,我们在来谈谈CSS的HACKS技巧,Javascript DOM编程等等的,今天就收工了,谢谢捧场先!!!
经典论坛讨论: http://bbs.blueidea.com/thread-2827986-1-1.html
本文链接:http://www.blueidea.com/tech/web/2008/5330.asp
出处:蓝色理想
责任编辑:moby
上一页 DOM技巧篇 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|