我应该如何处理在多个页面上重复使用的ajax get函数

How should I deal with an ajax get function, that is reused across multiple pages?

本文关键字：函数 get ajax 何处理 处理 我应该      更新时间：2023-09-26

我有一个具有预订/预订功能的web应用程序。我的核心功能之一是检查预订是否与其他预订相冲突，该功能可用于多个页面。它的返回数据通常不与页面一起加载，因为它的请求参数取决于用户输入。换句话说：

  • 我有一个ajax功能，可以获取预订数据
  • 为了可重用性，它被抽象到自己的.js文件中
  • ajax函数被封装在一个javascript函数中

但是，ajax函数不适合我的预期用途。在ajax调用完成之前，包装器函数将不返回任何内容，因为它具有异步特性。如果我需要用返回的数据执行一些事情，它应该在ajax调用的成功函数中，但由于我需要根据在哪个页面和在什么情况下需要数据来执行不同的事情。

我认为我的问题有三个解决办法。我只是无法决定哪种方法是最好的，或者是否有第四种更好的选择：

1.跳过ajax函数的抽象换句话说，只需将它复制/粘贴到我需要数据的每个函数中，瞧；我会随时提供成功条件功能。

2.将success函数作为参数传递如果我需要一些动态的事情发生，我可以通过将一个函数传递给ajax包装器函数，并确保传递的函数接受ajax返回的数据作为它自己的参数来实现。

3.使ajax调用同步可能，但有点破坏了ajax的概念（实际上我也在使用JSON，所以这将使ajax变成sjoj）。

老实说，我真的看不出这两种解决方案在这里都是赢家。如果有任何帮助，我将不胜感激。

我建议使用基于事件的方法。在ajax成功的内部，您可以激发（触发）一个事件，例如booking-check-complete，并且特定页面按其需要的方式处理该事件。

通过这种方式，您可以很好地保持ajax的优点-异步，并保持页面解耦。

对于这样的用途，我使用jQuery事件机制，但也有其他可用的库。点击此处查看-触发

例如，在第一页中，您有：

$( document ).on( "booking-check-complete", function( event, param1, param2 ) {
  alert( "Hello from page 1" );
});

在第二页上，您有：

$( document ).on( "booking-check-complete", function( event, param1, param2 ) {
  alert( "Hello from page 2" );
});

在ajax方面取得成功：

$( document ).trigger( "booking-check-complete", [ "Custom", "Event" ] );

注意您不需要jQuery来使用此处描述的事件这使用了纯javascript，但与IE不兼容。

var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
  1. 没有。这违反了DRY
  2. 是的。这是惯用的JavaScript
  3. 没有。这会锁定UI（不赞成使用同步XHR）

选项2是最突出的赢家。

相关文章：