prototype.js 和json.js 冲突

谁践踏了优雅 2022-09-18 08:53 147阅读 0赞

**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