Javascript and AJAX, only works when using alert()

by

The alert() helps because that delays the processing of the remaining javascript in that function (everything from the alert() down to the bottom), leaving enough time for the AJAX request to complete. The first letter in AJAX stands for “asynchronous” which means that (by default) the response will come in at “some point in the future” but not immediately.

One fix (which you should not implement) is to make the processing synchronous (by changing the third argument of open() to be false) which will stop further processing of your script (and the entire webpage) until the request returns. This is bad because it will effectively freeze the web browser until the request completes.

The proper fix is to restructure your code so that any processing that depends on the result of the AJAX request goes in to the onreadystatechange function, and can’t be in the main function that initiates the AJAX request.

The way this is usually handled is to modify your DOM (before the AJAX request is sent) to make the form readonly and display some sort of “processing” message, then in the AJAX response handler, if everything is okay (the server responded properly and validation was successful) call submit() on the form, otherwise make the form wriable again and display any validation errors.

More Related Contents:

  1. Why does Google prepend while(1); to their JSON responses?
  2. jQuery Ajax File Upload
  3. How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
  4. JavaScript implementation of Gzip [closed]
  5. How to edit a JavaScript alert box title?
  6. Add a “hook” to all AJAX requests on a page
  7. Intercepting call to the back button in my AJAX application
  8. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  9. Sending binary data in javascript over HTTP
  10. React JS – Uncaught TypeError: this.props.data.map is not a function
  11. Remove hash from url
  12. Upload base64 image with Ajax
  13. WebKit “Refused to set unsafe header ‘content-length'”
  14. Reference ASP.NET control by ID in JavaScript?
  15. Intercept fetch() API requests and responses in JavaScript
  16. history.replaceState() example?
  17. XMLHttpRequest to Post HTML Form
  18. Force Cache-Control: no-cache in Chrome via XMLHttpRequest on F5 reload
  19. Prototype AJAX request being sent as OPTIONS rather than GET; results in 501 error
  20. Add CORS header to an http request using Ajax
  21. Difference between $.post and $.ajax?
  22. How to prevent Axios from encoding my request parameters?
  23. JavaScript alert not working in Firefox 6
  24. ASP.NET Parse DateTime result from ajax call to javascript date
  25. Attaching events after DOM manipulation using JQuery ajax
  26. How to make a button execute a php script?
  27. SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  28. Synchronous XMLHttpRequest on the main thread is deprecated
  29. Is there any size limitation for ajax post?
  30. How to return an array from an AJAX call?

Leave a Comment