重構許多jQuery Ajax調用 - 最佳實踐？

我有很多JavaScript/jQuery代碼塊來處理我的頁面中的異步數據處理。每個代碼塊具有三個功能（代碼是不完整的，僅用於說明的目的）：重構許多jQuery Ajax調用 - 最佳實踐？

封裝$.ajax呼叫：

function doSomething(data){ 

    // do some preprocessing 

    $.ajax({}); // some JQuery Ajax operation that accepts data 

    // do some postprocessing 
    return false; 
}

處理響應：

function handleResponse(result){ 
    // process the result 
    return false; 
}

處理任何錯誤：

function handleError(XMLHttpRequest, textStatus, errorThrown){ 
    // gracefully handle the Error and present relevant information to user 
    return false; 
}

在需要大量的數據處理我最終這些塊，這似乎是重複的很多的頁面，所以我決定做一些重構。

我認爲會有不同的方式去解決這個問題。

可以有一個錯誤處理程序可以跨Ajax調用重用（顯而易見）。
人們可能可能會重用一些響應處理程序，但這會很不方便，因爲響應根據呼叫而有很大不同。
也許會創建一些提供基本功能的原型對象，並有一個用於錯誤處理的靜態方法（這可以在JavaScript中完成嗎？）。

我只是想知道是否有人遇到過這個和/或如果有最佳實踐解決方案嗎？

來源

2009-04-22 martijn_himself

這將是有益的，看看一些代碼。 – 2009-04-22 11:43:22

您可以使用jQuery中的$ .ajaxSetup（{}）方法來設置一些常用的ajax設置。例如，如果您要在某個頁面上一次又一次地發佈相同的URL，則只需在ajaxSetup中設置即可。這意味着你將不得不傳遞更少的參數給理查德提供的函數。 ajax方法的第一個參數的任何屬性都可以在$ .ajaxSetup（）中設置爲默認值。

$.ajaxSetup({ 
    url: 'my/ajax/url' 
    success: function() { 
     // Do some default stuff on success 
    }, 
    error: function() { 
     // Do some default stuff on a failure 
    } 
    // etc... 
});

它們可以在任何ajax調用中覆蓋。所以，現在你可以這樣做：

$.ajax({data:{foo:'bar',bar:'foo'}});

你可以重寫URL，比如像這樣：

$.ajax({url:'different/ajax/url',data:{foo:'bar',bar:'foo'}});

來源

2009-04-22 13:20:03 KyleFarris

我們經常使用的包裝功能的Ajax調用，以簡化使用，所以你可以這樣做：

function NewAjax(url, data, success) 
{ 
    $.ajax({ 
     url: url, 
     data: data, 
     success: success, 
     fail: function() 
     { 
     // Do generic failure handling here 
     } 
}

但我經常偏向於結合使用jQuery AJAX事件每個Ajax事件：

http://docs.jquery.com/Ajax

所以你可以綁定到每一次失敗或每Ajax調用如成功：

ajaxError（電話返回） ajax成功（回調）

來源

2009-04-22 11:52:49 Richard

謝謝你會投票，但我沒有聲望！ :) – 2009-04-22 12:18:16

非常感謝！爲了公平起見，我認爲KyleFarris擁有最優雅的解決方案，所以我給了他答案:)。 – 2009-04-22 13:30:53

正如理查德所示，看看代碼片段之間有什麼不同，並將它們作爲參數傳遞給函數。 Javascript可以傳遞函數作爲參數，這可以擺脫大量的冗餘。

如果url不會改變，那麼爲什麼將它作爲參數傳遞，你可以有一個全局變量，它將具有url的主要部分，並且只傳入改變的url部分。

來源

2009-04-22 12:15:03

感謝您的澄清 – 2009-04-22 13:33:14

重構許多jQuery Ajax調用 - 最佳實踐？

回答

相關問題