AJAX load within an AJAX load
I am using buttons that are being run with JS AJAX loads. Just click on them and the run a javascript function to load the contents of a php file into a div. This is necessary because I can't have a POST form reloading my page every time a button is pushed. I also have these buttons within an html section of a php file that is being AJAX loaded within the main page. I'm doing that because I need the entire page to update itself at a certain point. So to illustrate:
Main HTML page: includes JS AJAX request to get entire page (including buttons) and update it every half second ====> this entire page is being retrieved from a php file that includes the buttons. This file has more AJAX requests to let the buttons respond in real time. They get another php file every time a button is pushed =====> other php file runs the back code.
My problem is this: My site needs to be very sensitive to the user's clicking buttons, and this layering of AJAX requests is creating quite a bit of lag. Before I had all the buttons and the AJAX requests connected to them all in the main page, and then the timing was fine - no lag. But (开发者_开发百科as I explained earlier) I need the whole to reload itself constantly as to react when certain variables in the PHP back code equal something specific, so I moved all the buttons into another php file to be AJAX requested by the main page once every quarter second. Even when I request it every 100th of a second there's still a lot of lag.
Relevant main page code:
<script>
function wonfunction()
{
$.get('wonphp.php', function(data){
$('#won').html(data);
});
}
setInterval(wonfunction, 10);
</script>
</head>
<body>
<div id="won"></div>
<body>
</html>
Relevant wonphp.php code (the page code including buttons):
<script>
$('#A').click(function()
{
$.get('clickA.php', function(data){
$('#clickdiv').html(data);
});
});
$('#B').click(function()
{
$.get('clickB.php', function(data){
$('#clickdiv').html(data);
});
});
$('#C').click(function()
{
$.get('clickC.php', function(data){
$('#clickdiv').html(data);
});
});
</script>
<div id="clickdiv"></div>
<p align="center"><b><font face="Helvetica" color="#000080"><a href="testrand.php">Click here to purchase more claim credits.</a></font></b></p>
<p align="center"><img src="images/SetA.jpg" id="A" class="button">
<img src="images/SetB.jpg" id="B" class="button">
<img src="images/SetC.jpg" id="C" class="button">
OK thank you very much for your help.
I think you should rework your code to make less requests as possible.
You could use JSON requests, using polling via setInterval if needed, building the resulting html using one of the many nice template engines for client-side javascript (Mustache or jQuery.tmpl).
function poller() {
$.getJSON('/wonphp.php?kind=json', function (data) {
// prepare the resulting data and render the result or
// trigger an event to another function that will check
// if initial data has changed rendering html
});
}
setInterval(poller, 10000); // poll every 10 seconds
poller(); // initial load
If you can't use JSON, set the intervals at a resonable number and use jQuery.live() events triggering a jQuery.load() since it is less error prone in a cross-browser environment (you should look at the code).
So it's something like this:
function load_won() {
$('#won').load('wonphp.php');
}
setInterval(load_won, 5000);
load_won();
$('#A').live('click', function(event) {
event.preventDefault();
$('#clickdiv').load('clickA.php');
});
加载中,请稍侯......
精彩评论