How do I cancel the previous ajax sending process?

How do I cancel the previous ajax sending process?
as an example:
The user presses the A button repeatedly, the final ajax sending process will be carried out.

I want to do this so as not to overload the server

Generally speaking you can use abort to do this but I doubt that really what you want because even if you ‘abort’ the request it still made the call and this will only abort the called request but your server still go the request and will process it.

I better approach is to prevent them from actually hitting submit multiple times. A common flow you be somthing like

user click button > On click show a dialog saying ‘sending’ or something like that and add a disable prop to your button > on success do something > on error show the error and re-enable the button

Here is an example

I want to cancel using the beforeOpen or BeforeSend functions.

How does it work ?

As @Michl_K says, you do not prevent the server load by canceling a request. The request will still be processed by the server once started, but the results will simply not be fetched by your app.

You have to prevent the request one step earlier. So if the user presses a button, immediately disable the button (by adding class “disabled” for example) or set a variable (like requestIsBusy=true) so you know a request is busy. If the request is finishes, re-enable the button or set the variable to false.