I want a clarification about AJAX on something I was thinking about...
AJAX is said to be asynchronous - if you want it to be - meaning that if a javascript is run while a page loads and in that an AJAX call is executed the page will continue to load while the server process the AJAX request... So is it safe to assume that it can be liken to a pseudo-parallelism?
Now, what about two different javascripts making an AJAX call consequently. That is, while the page loads it encounters two js function one after the other each making an AJAX call each. Because they are different js functions/ or two different js files do they have to wait for the functions to return before they move on? I think that is the case...
And finally the real question I have... If I have a js function called and in that function I palce TWO AJAX calls then will they be processed semi-simultaneously... Because I was trying something on a webpage of mine and by accident I placed two AJAX calls one after the other and I think that was the reason I had some unexpected results. Unfortunately I was in a hurry to deliver so I didn't pursue it but I was wondering if it world like that, because it would be very convenient for some cases...
Somethign like this
function finalizeReservation(){
var request = $.ajax({
type: 'POST',
url: './scripts/php/reserve.php',
data: {
},
dataType: "json"
});
request.done(function(data,textStatus,jqXHR) {
});
request.fail(function(jqXHR, textStatus, errorThrown) {
});
var request2 = $.ajax({
type: 'POST',
url: './scripts/php/reserve.php',
data: {
},
dataType: "json"
});
request2.done(function(data,textStatus,jqXHR) {
});
request2.fail(function(jqXHR, textStatus, errorThrown) {
});
}
Simply curious.
I was thinking it because I have a web page that records reservations. Before finalizing a reservation though the guest can see the details and think about it. At that period the slot in the database is set to pending and making unavailable to another guest so they don't clash or enter in race conditions (i.e while thinking about it the other finalizes it and so when he tries to finalize it himself he cant or if was careless in the code also finalizes it). The problem is in the guest behaviour, although I have tried to capture all events of the refresh, backpage, exit tab, close window kind so the slot doesn't stay in a pending state if the guest for some reason doesn't close the form the correct way (cancel) not all are captured in all browsers. So I though about making a time limit in the server and if it exceeds it and the state is still pending the state is reversed to free (I have the form on a minute timer, after the minute goes it automatically closes and frees the slot). The problem is that the hosting server doesn't support chron jobs although I don't know much about them so I am not sure how much help they would be and the mysql doesn't support schedulers.
So i thought about making two ajax call and the one to be a timer that will check the state of the slot after some time passes and act accordingly.
Any thoughts are appreciated.
Sorry for the long post.
You don't have a specific question about Ajax, but you do seem to have a pretty good understanding of it and everything you said is correct. At least with jQuery, it's asynchronous by default and unless you use Deferred there is no guarantee that code that executes after the ajax call won't complete before the ajax call.
Your actual question seems to be about how to handle stale locks for the reservations. A couple suggestions:
Move to another shared host. I pay $15 a year for a shared host that allows cron jobs.
Whenever someone visits the page, check all locked reservations and if they are old enough assume the lock is stale.
Another ajax call won't help. What if they close the page? You could try using onbeforeunload, to alert a dialog that will remove the lock, but that's very intrusive.
the execution of code after the ajax functions will continue, without waiting for the ajax functions to complete, unless the code that follows is in the callback of the ajax function.
Related
I have application with huge ajax. Some times ajax not working properly when user close browser. This happens because there are many 3rd party add on installed in their browser which stop (may be) work ajax properly.
Now I have no control over users, so unable to make users careful about their browser. Now what can i do in this situation. Is there any way to force ajax to work even with bad extension installed in browser?
Following code not work when bad extensions (like ask toolbar,alibaba news ticker etc) installed in browser
window.onbeforeunload = function () {
$.ajax({
url: site_url + '/agent/send_offline',
type: 'post',
cache: false,
async: false,
...
});
};
You cannot rely on always being able to do an ajax call when the user leaves your page. That just isn't something you can reliably do in a browser. It may work sometimes, but is not guaranteed to work in all possible ways that a web page can be closed.
There are some work-arounds:
You can maintain a websocket connection from your page to your server and when the user leaves the page, the socket will be automatically closed by the browser and your server will then know the user left the page.
You can have your page poll your server every few minutes with a simple ajax call and when the server no longer gets a polling ajax call, then it knows that the page has been closed.
you can do it by storing cookie in browser to call your page after every miniute where ajax code is placed. try this angle
I want to know is there a way correct way to delete user from online users list with $(window).unload jQuery function?
or keep using PHP to check it?
i think this is not a correct way because user can edit it, but i need more reasons.
Code example:
<script src="jquery.min.js"></script>
<script>
$(window).unload(function() {
$.ajax({
type: "GET",
url: 'http://localhost/delete_session.php',
data: "id=" + "session id";
});
});
</script>
Thanks!
Doesn't work well with multiple tabs : if your the user opens your app in two different tabs, closing any of the two tabs will delete the session, and the other tab will become "unusable".
You should not solely rely on the client's behaviour to manage your sessions : the client's browser may exit incorrectly (program bug, battery out, kill -9, etc...) and not execute the unload callback on exit.
A correct way to do online list is probably using heartbeat requests.
Your javascript sends small requests to server indicating they are "alive".
If all pages are closed by user, the heartbeat stops and you somehow remove it from online user list on the server.
How can I track how long a user stays on a page before they request another or simply leave the site?
Basically, I want to do a check, if a user stays on the page for 20 minutes or longer, then do something.
I believe this would require php and javascript, but I am not exactly sure how to accomplish it.
Maybe using this $_SERVER in php to get the time of execution, and then get a timestamp when the user clicks somewhere else and simply compare the two?
You can do all this with simple javascript.
For a single page:
window.setTimeout(function(){
// Do stuff after 20 minutes of loading the page
// Then using jQuery you can call a PHP script to do stuff like so:
$.ajax({
url: '/myScript.php',
method: 'POST',
success: function(result){
//The request was successful and the output is stored in a variable: result
},
complete: function(){
//Do stuff when the request is completed (Ignores if success or not)
},
beforeSend: function(){
//Do something before the request is sent
}
});
}, 20 * 60 * 1000); //This is in milliseconds that's why I use the equation
For multiple pages:
I suggest you set a cookie with the time a user hits a page and on each page check if the cookie exists. If it exists run a query every x ammount of seconds to see if the 20 minutes have passed since the cookie has been created.
For full Ajax documentation head to: http://api.jquery.com/jQuery.ajax/
I've put some work into a small JavaScript library and service that times how long a user is on a web page. It has the added benefit of more accurately (not perfectly, though) tracking how long a user is actually interacting with the page. It ignores time that a user switches to different tabs, goes idle, minimizes the browser, etc. The Google Analytics method has the shortcoming (as I understand it) that it only checks when a new request is handled by your domain, which is not always accurate. It doesn't consider if someone is no longer viewing your page, has minimized the browser, has switched tabs to 3 different web pages since last loading your page, etc.
For reference - no solution is perfect. But hopefully this one provides value, too. You can implement the Javaacript API and gather the statistics yourself or you can use the service which does it all for you.
http://timemejs.com
An example of its usage:
Include in your page:
<script src="https://timemejs.com/timeme.min.js"></script>
<script type="text/javascript">
TimeMe.initialize({
currentPageName: "home-page", // page name
idleTimeoutInSeconds: 15 // time before user considered idle
});
</script>
If you want to report the times yourself to your backend:
xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","ENTER_URL_HERE",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds();
xmlhttp.send(timeSpentOnPage);
TimeMe.js also supports sending timing data via websockets, so you don't have to try to force a full http request into the document.onbeforeunload event.
My application has got several pages. On some pages I have given a back button on other pages it's not given (client's requirement). Now on a particular page, I have a list of choices (choices are image slides using jQuery plugin) to be selected by the user. Selecting a choice takes the user to next page. And now I want to get the same page with same selected choice as highlighted on clicking the browsers back button. On clicking the browsers back button, I guess the page is reloading loosing the cookie values i.e. when I select an image from my image set it takes me to another page. On clicking the browser back button, I wanted to get that page with same image selected from that set.Is there any work around so that I can get the selected values also on browser back.
Another plugin do that:
jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.
http://benalman.com/projects/jquery-bbq-plugin/
You could utilize the onunload event, which almost all major browsers* will fire, when the back/forward/refresh button is used. Let the onunload event handler synchronously send an AJAX request, containing all the values needed to restore the current page state, to a PHP script:
$(window).unload(function() {
// Insert your code here to collect all values
// necessary to save a restorable state of the
// current page.
//
// var pageState = {
// page: host.pathname,
// :
// };
$.ajax({
type: "POST",
async: false,
url: "http://mydomain.com/mysave.php",
data: jQuery.param(pageState),
error: function(jqXHR, textStatus, errorThrown){
// your code
}
success: function(data, textStatus, jqXHR){
// your code
}
});
});
Let the PHP script save the received page state somewhere (e.g. session, database, etc.), so it's available, when you're about to generate a page you would like to be restored to a previous state.
Be aware, that this solution has a possible disadvantage.
The synchronous request is used to give the server a real chance to receive and process the request completely. An asynchronous request would return immediately, thus already loading the new page and maybe cancelling the asynchronous request running in parallel, before it has been completed (or even sent).
Otoh synchronous requests block (freeze the browser, user cannot do anything) until the server responds. In case your server does not respond, this would result in a deadlock. Unfortunately there is no way to cancel a synchronous request on client-side (at least none that I'm aware of), so you should always keep synchronous requests short as possible (server side processing time). And to make sure, that you have a fast and reliable server, but you should always have that anyways^^.
*Be aware though, that some browsers (e.g. Opera) do not fire the onunload event, when specific browsers button are used.
when i update score from my admin i want to update score in client autometically without refresh can any one help with script and technices
i see such auto refresh https://stackoverflow.com/
ANSWERS , VIEWS autometically updating
The only way I know to do this is to actively poll your server from the client.
You'd need to create some polling script that called your script service page with a request for the data. Then, when the data is saved in the admin page, the service will return the latest scores when next asked.
Typically, you'd use setInterval and clearInterval. So on page load, you'd assign your polling function call to the setInterval method and give it a timeout of something sensible (10 seconds plus depending on how often you expect to update your scores and how big your traffic is).
You'd need to be using clearInterval whenever you want to stop the polling. As per the other answer, a JS framework will help you with making the Ajax requests whether in Xml or JSON format. Given your tags imply 'faster' then I'd recommend JQuery and JSON.
Additionally, whatever framework you use, consider using Googles CDN for fast deployment of that framework.
I'm unaware of any server push with Ajax so would be interested to see if that methodology is available (though I doubt it).
EDITS: added more info on Google cdn and frameworks.
HTH,
S
You'd probably want to look into a js framework.
The steps you'd go about doing this are similar to:
Add an onclick listener to your link /button
When that gets trigger, stop the event (this way you stop the browser from refreshing / redirecting the page)
Get the user submitted data and send it to the server via an json ajax request
Process data server side and return a response
Process the response and update the interface accordingly
Here is a bit more documentation on how you could do this with mootools:
* http://mootools.net/docs/Request/Request.JSON if you want to go with the JSON path
* http://mootools.net/docs/Request/Request.HTML if you just want an AJAX updater
While I haven't used it, it sounds like this is what "comet" is intended to solve. It's a way of streaming content from a server to a client - basically a "push" approach. It might be what you're looking for.
http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications
There is no need to refresh the page if you use AJAx.
With AJAX you can call the server and place the result in a portion of your web page without refreshing the page.
There is an article here regarding using AJAX via jQuery.
The jQuery documentation on AJAX is good too.
An example which would request data from the server and append the result to a section of your page is shown below:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
$("#results").append(msg);
}
});