I have a pretty lengthy form with about 10 select fields that all load data from other tables (mysql). My question is should I load the data using php/mysql as the page loads or should I let the page load first and then grab the select options for each field using ajax? If I load the select fields using php/mysql I would have 10 trips to the server before the page completely loaded (if my thinking is correct).
My initial thought is to first load the page and then load the select fields using ajax. Would this give me a faster load time or should I just load all the select fields using php/mysql on page load?
Any thoughts, theories or strategies would be helpful. I want my pages to load as fast as possible. Thank you.
I would say do it on the server-side (in php) because if you do it in ajax you're doing a client side request to the server to do the same thing. If i'm not mistaken from what you're saying ------- its 10 separate selects done in php that happens before the page loads... as opposed to an ajax request to do 10 separate selects as the page loads in javascript (meaning its a second request to do the same thing).. server side would be the best option in this case
If I understand you right, it would be faster to do it on the server-side before any headers are sent to the browser. Then your data is send along with the rest of the page to load. One trip. With AJAX you're sending the page first, then the javascript you just sent has to do a separate request for the data. Two trips instead of one. AJAX is best used when you can avoid requesting new http headers, but if you're doing that anyway, I'd skip it.
Related
I'm building a web app using Yii2 (php, mysql). Users can click on others' game results to see what item the user used for this result. There can be from 100 to 1000 results displayed on a single page. I don't know which option is the best in terms of speed for the page and the server :
1- On page load, a modal is loaded for every result and displayed when users click on a result. This way, there can be from 100 to 1000 modal loaded on the page. Is this too heavy considering that only a few of them will be used? Or even none of them sometimes.
2 - Load only one modal that is brought up when users click on any results and dynamically adjust his content using an ajax request to the server depending on which results was clicked. This way, less code loaded on the page but more requests to the server.
First option is easier to code but I think the second one might be better for page load. I'm far from expert in terms of page size and server requests handling, so I'd like to get some opinions.
I think you've answered the question yourself.
The second option is right. Only one modal (per type of action -- edit, view, etc) should exist. Then use ajax to load data only when requested.
Your users will thank you. The page size and load times will be significantly better.
I have a webpage that is auto-refreshed every 240 seconds with the generic HTML Meta tag. During the refresh it pulls data from a database which takes the site about 15 to 20 seconds to build before it's shown to the user. During this time I wish to show a small DIV with a loading message telling the user that it's loading data.
The more complicated thing about this is that the user has a few menu options to filter out specific data from the database. When clicking such an option the page is reloaded again and takes 15 to 20 seconds to build.
Users that aren't familiar with this loading time might feel the need to click the same menu option over and over again within a few seconds hoping that the page will load faster. But instead it will most likely cause the database server to get overloaded with requests.
So, to tackle this I wish to use jQuery to show a loading message, then have it load the data from the database (with a PHP script) and finally dump the data on the page.
I've done something similar but that was limited to users clicking a link which caused a jQuery script to load the data while showing the waiting DIV (using CSS rules).
I can't figure out how to implement this solution for an auto-refresh.
Some help would be nice.
You can use the same solution with auto-refresh as well, with the mention that the initial page load doesn't container the data that requires the DB call, but instead shows a loading message and starts an AJAX call to a server side script that returns the data.
Your page load:
Request
Server query DB
DB Response
Page loads (with data)
Ideal page load:
Request
Page loads (without data) <- loading message here
AJAX call
Server query DB
DB Response
Page updates (with data)
I'd second megawac's comment. Don't use a meta refresh. Also, 15-20 seconds is a very long time for generating a database report that is going to be generated every 4 minutes; odds are that you're bogging down your server pretty badly. Very few queries should really take that long, especially queries that need to be run nearly continually. I would strongly recommend refactoring your queries or doing some caching to speed things up. If you post some code, I'm sure people would be happy to look at it.
I'm writing a module for Joomla. It's going to be displaying data that it gets through a SOAP request. The problem with the SOAP request is that it can take up to 5 seconds to retrieve the data. This Joomla module will be on a page with many other Joomla modules and other content. I'm concerned that if this one Joomla module doing the SOAP request takes up to 5 seconds that it will delay loading the rest of the page. We have all been to websites which delay loading because of one part of the page and I don't want that to happen.
I am wondering if the solution is to have the Joomla module use AJAX (which I have no experience with yet) to do the SOAP request (currently it's being done with PHP) and somehow allow the rest of the page to load while it might take up to 5 seconds for the SOAP request to return data so it can be displayed.
What is a good workable solution for this problem? Caching the data isn't really an option because, it's timely. Thanks!
I would go with Ajax for this one.
Use window.onload() to trigger your ajax to fetch the data. The only problem is that the whole page will load before you fetch your data, resulting in potential delays displaying final data.
The code will vary a lot depending on preference but the principle of ajax is:
Create a placeholder or with placeholder content (or nothing)
On an event (in this case page ready) request data.
When the data is ready, replace the placeholder content with your data.
This has an added advantage that you can use a 'refresh' button to trigger the change too, so users can request updated data without reloading the original page.
Ajax is well worth learning as it is a doddle either using jquery or simple js. W3schools.com have an excellent tutorial.
Why use AJAX for dynamic web pages when you can do it only with php?
The main reason to bother with AJAX is User Experience (UX).
Now AJAX won't necessarily improve UX in every single instance so in a lot of places sticking with pure PHP is perfectly okay.
But imagine the case where you have a text field on the site and a link to vote on something. Kinda like this site. When you add AJAX your users won't loose the text they entered in the textfield when they decide to vote on the link! How incredibly useful!
So if you care about your user's experience it is a good idea to use AJAX in situations like that.
PHP creates and outputs the Content to the Client Browser as it's a Server-Side Language and that's what it was built for, so on a request your code will access database, files etc. and then output the constructed html/text to the client.
Ajax just gives the User a more Desktop like feel. For example deleting a record and instead of the entire page reloading just letting the one element disappear from say a list and letting the server know that the record is to be deleted. But Remember to let the User know when you are busy sending data to the server (With a progress bar in .gif format for example). As lot's of user feel that if nothing happens on the screen to notify them, that the application is frozen which means they will either reload the page or just try to click the button again.
But you will need to provide some sort of compatibility with browsers that have Javascript disable and thus cannot use your AJAX functions, just something to keep in mind.
AJAX stands for Asynchronus Javascript and XML, meaning that a page can get new data, without having to reload a page.
PHP cannot send data without reloading the whole page. A user has to press a button, to send data.
An example of AJAX is for example google suggestions or the tag suggestions on this website.
Let's say we have a page written in PHP. This page loads by it self a template with header, body and footer and print this out. Now let's say that in the body of this page we would like to start a loop and load some posts (messages taken from a database).
We also need the page to load new posts every 10 seconds, if any, without refreshing the page (classic AJAX). This ajax call will use JSON and AJAX and micro templates.
Now i'm just wondering:
Do we really need PHP to load posts the first time the page is loaded? Can't we just start that Ajax call and load posts with Ajax instead? (Notice that the existing ajax call would be kept as it is, since it loads posts starting from the latest loaded (in case of no posts, that would mean all posts).
If you did not understand my question don't hesitate to let me know.
In this situation I think the simpler approach is the let AJAX handle it, if you do let php load the initial messages, you'll have two places in code, that you'll need to maintain to perform identical jobs.
I think you are asking how you should load the posts the first time the page is accessed. If so: When the page firsts loads, have some PHP that prints out the existing posts. Then, add some JavaScript to update the page with new posts every 10 seconds. This is a matter of preference. You might want there to be no posts when the page first loads, and then use Ajax to get the existing posts once your page has loaded.
Edit:
I agree with jondavidjohn that you might be better off using pure Ajax. However, you could always isolate the code that fetches the pages into a separate function. That way, the script that generates the page calls the same function as the script that is called via Ajax.
The drawback with that technique is that it doesn't downgrade gracefully. So people with javascript disabled will not see any posts.
I'd recommend outputting some data with php - AJAX requires JavaScript which many people don't have activated.
Why not, instead of having the browser poll the server for new posts, have the browser push new content to the browser when it is available using the likes of node.js?
I designed my site with AJAX exclusively, and it works perfectly except for one rather major issue: Using AJAX requires JS to be enabled. Of course, if users trust your site, this is not a problem, but if they don't, then an AJAX solution won't work unless you put the entire page in a noscript tag.