如何在同一個網頁上做兩個ajax請求？

我有一個使用Prototype和其他使用JQuery的Ajax請求。兩人都在工作，但前提是分開打電話給他們。我需要幫助獲得解決這個衝突的方法。

在我在下面顯示的代碼中，只有「$ .fn.bindPostCommentHandler = function（）」上的Ajax請求才能工作。「新VoteHijacker（」鏈接「）的Ajax請求;」不管用。

如何讓這兩個Ajax請求一起工作？

這是我的網頁上的代碼。

<html lang="en"> 
<head> 
    <link rel="stylesheet" href="/media/css/base.css" type="text/css" /> 
    <script src="/media/js/prototype.js"></script> 
    <script src="/media/js/getcookie.js"></script> 
    <script src="/media/js/prototype.extend.js"></script> 
    <script src="/media/js/votehijaker.js"></script> 

    <script src="/media/js/jquery-1.8.3.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
     (function($){ 
     $.fn.bindPostCommentHandler = function() { 
      // We get passed a list of forms; iterate and get a unique id for each 
      // attach a submit trigger to handle saving and returning 
      this.each(function() { 
      //$(this).find('input.submit-preview').remove(); 
      $(this).submit(function() { 
       commentform = this; 
       commentwrap = $(this).parent(); 
       $.ajax({ 
        type: "POST", 
        data: $(commentform).serialize(), 
        url: "/comments/post/", 
        cache: false, 
        dataType: "html", 
        success: function(html, textStatus) { 
         // Extract the form from the returned html 
         postedcomment = $(html).find('#newly_posted_comment'); 
         //alert(html); 
         $(commentform).replaceWith(postedcomment.html()); 
         $(commentwrap).hide(); 
         $(commentwrap).slideDown(600); 
         $(commentwrap).find('.comment-form form').bindPostCommentHandler(); 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         $(commentform).replaceWith('Your comment was unable to be posted at this time. We apologise for the inconvenience.'); 
        } 
       }); 
       return false; 
      }); 
      }); //each 
     }; 
     })(jQuery); 

     $(function() { 
      $('.comment-form form').bindPostCommentHandler(); 
     }); 
    </script> 


</head> 
<body> 
    ... 
    ... 
    <script type="text/javascript"> 
    Event.observe(window, "load", function() 
    { 
     new VoteHijacker("link"); 
    }); 
    </script> 
    ... 
    ...

上「VoteHijaker（）」，votehijaker.js的代碼如下：

var VoteHijacker = Class.create(); 
VoteHijacker.prototype = 
{ 
    initialize: function(prefix) 
    { 
    this.prefix = prefix || ""; 
    this.registerEventHandlers(); 
    }, 

    registerEventHandlers: function() 
    { 
    $$("form." + this.prefix + "vote").each(function(form) 
    { 
     Event.observe(form, "submit", this.doVote.bindAsEventListener(this), false); 
    }.bind(this)); 
    }, 

    doVote: function(e) 
    { 
    Event.stop(e); 
    var form = Event.element(e); 
    var id = /(\d+)$/.exec(form.id)[1]; 
    var action = /(up|down|clear)vote/.exec(form.action)[1]; 
    new Ajax.Request(form.action, { 
     onComplete: VoteHijacker.processVoteResponse(this.prefix, id, action) 
    }); 
    } 
}; 

VoteHijacker.processVoteResponse = function(prefix, id, action) 
{ 
    return function(transport) 
    { 
    var response = transport.responseText.evalJSON(); 
    if (response.success === true) 
    { 
     var upArrowType = "grey"; 
     var upFormAction = "up"; 
     var downArrowType = "grey"; 
     var downFormAction = "down"; 

     if (action == "up") 
     { 
      var upArrowType = "mod"; 
      var upFormAction = "clear"; 
     } 
     else if (action == "down") 
     { 
      var downArrowType = "mod"; 
      var downFormAction = "clear"; 
     } 

     VoteHijacker.updateArrow("up", prefix, id, upArrowType); 
     VoteHijacker.updateArrow("down", prefix, id, downArrowType); 
     VoteHijacker.updateFormAction("up", prefix, id, upFormAction); 
     VoteHijacker.updateFormAction("down", prefix, id, downFormAction); 
     VoteHijacker.updateScore(prefix, id, response.score); 
    } 
    else 
    { 
     alert("Erro a votar: " + response.error_message); 
    } 
    }; 
}; 

VoteHijacker.updateArrow = function(arrowType, prefix, id, state) 
{ 
    var img = $(prefix + arrowType + "arrow" + id); 
    var re = new RegExp("a" + arrowType + "(?:mod|grey)\\.png"); 
    img.src = img.src.replace(re, "a" + arrowType + state + ".png"); 
}; 

VoteHijacker.updateFormAction = function(formType, prefix, id, action) 
{ 
    var form = $(prefix + formType + id); 
    form.action = form.action.replace(/(?:up|down|clear)vote/, action + "vote"); 
}; 

VoteHijacker.updateScore = function(prefix, id, score) 
{ 
    var scoreElement = $(prefix + "score" + id); 
    scoreElement.innerHTML = score.score + " point" + VoteHijacker.pluralize(score.score); 
    scoreElement.title = "after " + score.num_votes + " vote" + VoteHijacker.pluralize(score.num_votes); 
}; 

VoteHijacker.pluralize = function(value) 
{ 
    if (value != 1) 
    { 
    return "s"; 
    } 
    return ""; 
};

和代碼中的「prototype.extend.js」：

// This is an extend solution to inject in the HEADERS the csrftoken 
Ajax.Base.prototype.initialize = Ajax.Base.prototype.initialize.wrap(
     function (callOriginal, options) { 
     var headers = options.requestHeaders || {}; 
     headers["X-CSRFToken"] = getCookie("csrftoken"); 
     options.requestHeaders = headers; 
     return callOriginal(options); 
     } 
    );

不限關於如何使這兩個Ajax請求一起工作的線索？

最好的問候，

來源

2012-12-03 André

是否使用不衝突模式？ –

我不知道如果代碼使用「不衝突」。我可以知道嗎？謝謝。 –