扩展prototype库兼容w3c dom-ajax for firefox
2007-10-11 22:21 莫耶 阅读(957) 评论(1) 编辑 收藏 举报
最近在做一个页面改版的项目,由于要用到ajax,又想对页面达到一定的控制,就起用了prototype.js库,并做了一个 request/response页面组,两页面在同一个域中,request端通过javascript发出请求,response端的.net aspx页面接到请求判断参数,运算后返回一个xml文档,其中包括运算的结果值,request在接收方法被回调后,再进行无刷新的回显,request端脚本代码如下:
此处,用到的是prototype.js原型库的Request方法,它用于发起一个异步请求,参数中可以指定是get还是post方式,以及定制任意个QueryString参数,以及当请求被响应后(onComplete)——被回调执行的处理响应结果的方法。
使用prototype库的好处就在于它是兼容标准的,因此,在IE中测试通过后,我便想当然地以为在Firefox中应该也没有问题。但不久,测试人员反馈,在进行相应操作后,Firefox中并没有像IE一样,出现预期的结果值。
噩耗传来,禁不住地怀疑起了prototype.js,于是将Firebug ,在Firefox中抓起虫子来:
FireBug Console里显示,返回的xml结果串格式良好,方法也能被正常调用,错误定位在
忙不迭查阅资料,才得知,在W3C Dom中,Xml的Element元素是没有selectSingleNode方法的,并且,Node节点也没有text属性(仅IE支持),相对应的属性是textContent。
找到问题所在,就能对症下药,延续一下prototype的风格,对原型进行扩展,修改一下prototype.js,加入这些代码,原来的脚本无需修改,Firefox也能正常获取运行结果了:
//请求
function goAjax(typecode,condition)
{
var url="GetCount.aspx";
var pars="code="+ typecode + "&cond=" + condition;
var now = new Date();
pars += "&t="+ now.getTime();
var myAjax = new Ajax.Request(
url,
{
method:"get",
parameters:pars,
onComplete:showResponse
});
}
//显示结果
function showResponse(respDoc)
{
var result = respDoc.responseXML.documentElement.selectSingleNode("Result").text;
$('lblCount').innerHTML = result;
}
function goAjax(typecode,condition)
{
var url="GetCount.aspx";
var pars="code="+ typecode + "&cond=" + condition;
var now = new Date();
pars += "&t="+ now.getTime();
var myAjax = new Ajax.Request(
url,
{
method:"get",
parameters:pars,
onComplete:showResponse
});
}
//显示结果
function showResponse(respDoc)
{
var result = respDoc.responseXML.documentElement.selectSingleNode("Result").text;
$('lblCount').innerHTML = result;
}
此处,用到的是prototype.js原型库的Request方法,它用于发起一个异步请求,参数中可以指定是get还是post方式,以及定制任意个QueryString参数,以及当请求被响应后(onComplete)——被回调执行的处理响应结果的方法。
使用prototype库的好处就在于它是兼容标准的,因此,在IE中测试通过后,我便想当然地以为在Firefox中应该也没有问题。但不久,测试人员反馈,在进行相应操作后,Firefox中并没有像IE一样,出现预期的结果值。
噩耗传来,禁不住地怀疑起了prototype.js,于是将Firebug ,在Firefox中抓起虫子来:
FireBug Console里显示,返回的xml结果串格式良好,方法也能被正常调用,错误定位在
respDoc.responseXML.documentElement.selectSingleNode("Result").text;
忙不迭查阅资料,才得知,在W3C Dom中,Xml的Element元素是没有selectSingleNode方法的,并且,Node节点也没有text属性(仅IE支持),相对应的属性是textContent。
找到问题所在,就能对症下药,延续一下prototype的风格,对原型进行扩展,修改一下prototype.js,加入这些代码,原来的脚本无需修改,Firefox也能正常获取运行结果了:
// check for XPath implementation
if( document.implementation.hasFeature("XPath", "3.0") )
{
// prototying the XMLDocument
XMLDocument.prototype.selectNodes = function(cXPathString, xNode)
{
if( !xNode ) { xNode = this; }
var oNSResolver = this.createNSResolver(this.documentElement)
var aItems = this.evaluate(cXPathString, xNode, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
var aResult = [];
for( var i = 0; i < aItems.snapshotLength; i++)
{
aResult[i] = aItems.snapshotItem(i);
}
return aResult;
}
// prototying the Element
Element.prototype.selectNodes = function(cXPathString)
{
if(this.ownerDocument.selectNodes)
{
return this.ownerDocument.selectNodes(cXPathString, this);
}
else{throw "For XML Elements Only";}
}
// prototying the XMLDocument
XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode)
{
if( !xNode ) { xNode = this; }
var xItems = this.selectNodes(cXPathString, xNode);
if( xItems.length > 0 )
{
return xItems[0];
}
else
{
return null;
}
}
// prototying the Element
Element.prototype.selectSingleNode = function(cXPathString)
{
if(this.ownerDocument.selectSingleNode)
{
return this.ownerDocument.selectSingleNode(cXPathString, this);
}
else{throw "For XML Elements Only";}
}
Node.prototype.text = function()
{
return this.textContent;
}
}
if( document.implementation.hasFeature("XPath", "3.0") )
{
// prototying the XMLDocument
XMLDocument.prototype.selectNodes = function(cXPathString, xNode)
{
if( !xNode ) { xNode = this; }
var oNSResolver = this.createNSResolver(this.documentElement)
var aItems = this.evaluate(cXPathString, xNode, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
var aResult = [];
for( var i = 0; i < aItems.snapshotLength; i++)
{
aResult[i] = aItems.snapshotItem(i);
}
return aResult;
}
// prototying the Element
Element.prototype.selectNodes = function(cXPathString)
{
if(this.ownerDocument.selectNodes)
{
return this.ownerDocument.selectNodes(cXPathString, this);
}
else{throw "For XML Elements Only";}
}
// prototying the XMLDocument
XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode)
{
if( !xNode ) { xNode = this; }
var xItems = this.selectNodes(cXPathString, xNode);
if( xItems.length > 0 )
{
return xItems[0];
}
else
{
return null;
}
}
// prototying the Element
Element.prototype.selectSingleNode = function(cXPathString)
{
if(this.ownerDocument.selectSingleNode)
{
return this.ownerDocument.selectSingleNode(cXPathString, this);
}
else{throw "For XML Elements Only";}
}
Node.prototype.text = function()
{
return this.textContent;
}
}
本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 Unported许可协议
欢迎转载,但必须保留文章的署名老莫的帐本子
并保留此链接:http://moye.cnblogs.com/
如有疑问请发邮件:moyerock@gmail.com
欢迎转载,但必须保留文章的署名老莫的帐本子
并保留此链接:http://moye.cnblogs.com/
如有疑问请发邮件:moyerock@gmail.com