您的位置:首页 > Web前端 > JavaScript

prototype.js 和json.js 冲突

2013-11-13 11:01 253 查看
1.冲突简述和分析
prototype.js与json.js并不是完全兼容的。主要冲突在于json.js为Object的原型增加了一个toJSONString的方法。
冲突之一:是prototype中发送ajax请求时,遍历了一个header Object,结果将toJSONString也误当作一个header属性发送,导致错误:

[Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.setRequestHeader]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://astlogo.com/cstmface/js/lib/prototype.js :: anonymous ::
line 1289" data: no]

如果您没有将ajax请求异常捕获,遇到这个冲突的时候会很诡异。即没有js错误提示,也没有发送请求。如果遇到这样的情况,请在Ajax.Request请求的选项中多加一个事件监听:

function x_load_testdata(id) {

    new Ajax.Request('testdata.php',

    {

        method:'get',

        onSuccess: function(transport){

        },

        onFailure: function(){ alert('Request failure') },

        onException: function(x, e) { alert(e) }

    });

}

确认一下是否因为这个冲突导致。
冲突之二:反过来,如果将prototype使用的所有Object都增加一个toJSONString方法,也会出现问题。由于prototype的继承关系比较复杂,有些对象因此会继承多个toJSONString方法,调用的时候就会出错。

2.解决冲突的方案

首先,请先加载prototype.js,后加载json.js,这样就可以避免出现“冲突之二”。

<script type="text/javascript" src="js/lib/prototype.js"></script>

<script type="text/javascript" src="js/lib/json.js"></script>

其次,要解决prototype的Ajax.Request异常,就需要修改prototype.js的代码了(就我自己来说很不想改,不过如果您的项目也是必须同时依赖这两个JS,请也按照下面步骤修改):

在prototype.js中找到:(大概位于第1283行和1284行)

    for (var name in headers)

      this.transport.setRequestHeader(name, headers[name]);

修改为:

    for (var name in headers) {

        if (!Object.isFunction(headers[name])) {

              this.transport.setRequestHeader(name, headers[name]);

        }

    }

就是用Object.isFunction方法确定遍历到的header的属性不是一个函数(过滤掉toJSONString这个属性),“冲突之一”也就解决了。
注:我使用的js版本:prototype.js 1.6.0.3 、 http://www.json.org/json.js (2007-03-06)

写到这里,其实prototype.js里面也有json to string的方法(Object.toJSON):

var data = {error:'', data:''};

var json = Object.toJSON(data);

alert(json);

如果不是必须使用这两个js,建议您只使用prototype.js
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: