Menu
I've made an ajax post function, and when I call it once, the callback function that is passed to it ends up getting called 3 times. Why is the callback being called multiple times?
I'm attempting to use a "module" javascript pattern that uses closures to wrap like functionality under one global variable. My ajax module is its own file, and looks like this:
var ajax = (function (XMLHttpRequest) {
"use strict";
var done = 4, ok = 200;
function post(url, parameters, callback) {
var XHR = new XMLHttpRequest();
if (parameters === false || parameters === null || parameters === undefined) {
parameters = "";
}
XHR.open("post", url, true);
XHR.setRequestHeader("content-type", "application/x-www-form-urlencoded");
XHR.onreadystatechange = function () {
if (XHR.readyState === done && XHR.status === ok) {
callback(XHR.responseText);
}
};
XHR.send(parameters);
}
// Return the function/variable names available outside of the module.
// Right now, all I have is the ajax post function.
return {
post: post
};
}(parent.XMLHttpRequest));
The main application is also it's own file. It, as an example, looks like this:
// Start point for program execution.
(function (window, document, ajax) {
"use strict";
ajax.post("php/paths.php", null, function () { window.alert("1"); });
}(this, this.document, parent.ajax));
As you can see, I'm trying to bring in dependencies as local variables/namespaces. When this runs, it pops up the alert box 3 times.
I'm not sure if this problem is due to the ajax function itself or the overall architecture (or both), so I'd appreciate comments or thoughts on either.
I've tried un-wrapping the main part of the program from the anonymous function, but that didn't help. Thanks in advance!
EDIT:
Here's the entire HTML file, so you can see the order I include the <script>'s in.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" conent="0" />
<title>Mapalicious</title>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<script src="js/raphael.js"></script>
</head>
<body>
<div id="map"></div>
<script src="js/promise.js"></script>
<script src="js/bigmap.js"></script>
<script src="js/ajax.js"></script>
<script src="js/init.js"></script>
</body>
</html>
EDIT 2:
I had a typo in my example, and changed
(function (window, document, bigmap, ajax) {
to
(function (window, document, ajax) {
EDIT 3:
I've changed the onreadystatechange function to log the ready state to the console:
XHR.onreadystatechange = function () {
console.log("readyState: " + XHR.readyState);
if (XHR.readyState === done && XHR.status === ok) {
callback(XHR.responseText);
}
};
When I step through the code in Google Chrome, the callback is called three times, and the console logs:
readyState: 4
readyState: 4
readyState: 4
However, when I run the page as normal and don't step through it, the function works as expected and only runs the callback once. In this case, the console logs:
readyState: 2
readyState: 3
readyState: 3
readyState: 4
So now my question is, why is the callback called multiple times when stepping through code?
SOLVED:
When I asked this question, I didn't realize that it was only happening when I was stepping through the code while debugging.
So, the state changed 3 times, but execution has been delayed by the break-point, so all 3 onreadystatechange functions see the current state of 4, instead of what the state was when the change actually occurred.
The takeaway is that onreadystatechange change does not store what that state is. Instead, it reads the readyState at the time its executed, even if the program gets interrupted, and the state changes again in the mean time.
Therefore, AJAX requires different debugging techniques than you use with completely synchronous code... but you probably already knew that.
Thanks to everyone who helped out here.
985
The Javascript/jQuery code If it's a button you could simply disable it at the start of the request and then enable it again in the callback function when the AJAX request has finished loading.
you should use $. ajax, which will allow you to turn caching off: $. ajax({url: "myurl", success: myCallback, cache: false});
The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
A JSON object containing numeric HTTP codes and functions to be called when the response has the corresponding code. A callback function to be executed when Ajax request succeeds. A number value in milliseconds for the request timeout. A type of http request e.g. POST, PUT and GET.
The readyState has 4 distinct states:
0 - no request initialized
1 - connected to server
2 - request was received
3 - processing
4 - Done, response received
Each of these changes will call the onreadystatechange handler. That's why most of these functions will look like this:
xhr.onreadystatechange = function()
{
if (this.readyState === 4 && this.status === 200)
{
//do stuff with this.responseText
}
}
Just hard-code them, instead of using dodgy variables (the names done and ok seem dangerous to me).
Other than that, try declaring the post function either directly in the returned object:
return {post : function()
{
};
Or as an anon. function, assigned to the variable post:
var post = function(){};
Various engines do various things with functions, the way you declare them, hoisting them, for one. Also post doesn't feel right as a function name if you ask me... I'd try to use names that don't look like they might be reserved...
Also, you're not explicitly setting the XHR's X-Requested-With header:
XHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
Which might just be what's causing the problem (HTTP1.1 and transfer-encoding chunked?)
To make debugging easier, try logging the XHR object each time the alert shows up by changing callback(XHR.responseText); to callback.apply(this,[this.responseText]);, although the argument is redundant. Then, change ajax.post("php/paths.php", null, function () { window.alert("1"); }); to:
ajax.post("php/paths.php", null,
function (response)
{
console.log(this.readyState);//or alert the readyState
window.alert(response);//check the response itself, for undefined/valid responses
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
