Just looking for a general consensus here. I am displaying results from my database and am filtering and sorting them at the onchange event of a select input with js. This works by adding a new _GET variable to the URL and reloading the page, then using php to select the appropriate results. Would I be better using ajax to do it in realtime? I'm just thinking about what the pro's and con's are of both options...
One thing I would worry about when using AJAX is pagination and page bookmarking, or for people who will forward a page to someone else. You can still change the URL with AJAX, though with some extra work.
To display the sql results, this will be based on the design/process of your application. There are times that it is best to load the results during page load. And there are times that AJAX is more convenient way.
Here in SO there are already a questions related to yours. I'll just provide a link for you.
When NOT to use AJAX in web application development?
Pros and cons of AJAX-loaded content
When is it appropriate to use AJAX?
Now regarding your main questions about displaying the results. As KMC mentioned if you want to bookmark your page and there is a pagination. Reloading the page I guess is much better, if I'm correct SO also use this way.
Now when you should use ajax. If the results is a small or a single data and you dont care about the bookmarks. Also when some part of the page must not be change or you are only updating some part of the pages.
These are only my assumption, please read the link I provided.
Related
I have to access data from MySQL database which is updated dynamically without refreshing the page. Example: A user requests a service and the details are stored in the database. When the admin accepts the requests it should be updated from pending to accepted on the user's web page without him refreshing the page.
This can be accomplished by using ajax.
Since you did not provide any code or a detailed explanation of the enviroment you want to implement this in i can't help you with the specifics but i can point you in the right direction.
the easiest one is using jquery and its ajax api.
Link to jquery documentation
But since i do not see jquery tagged in this question i assume you have your reasons not to use it. The best alternative. in my humble subjective opinion is Axios Link to Axios github page
you can also use the native XMLHttpRequest [backwards compatible with older browsers] And fetch native api's. but these are harder to implement as a beginner.
Try Ajax.
With ajax you can call without refreshing the page.
This can be accomplished by Ajax, but you need to query in intervals to see if data has changed.
A better approach would be, if you have access to CRUD methods in your codebase, then write a trigger that whenever CRUD operations happen, you will call the web service to refresh the page.
For example,
Consider GIT , when ever you push a change, if anyone looking at the pull request will see a msg that it is outdated and needs to be refreshed
I know iframe and ajax comparisons have been asked many times. But I would like to add the good jQuery load() function, and also ask when to use which one.
I am certain they all have their own specific features, so I don't wanna know which one is faster and so on, I am more eager to recognize when to use which to retrieve the data from another page?
<iframe>
load();
ajax();
When to use iframe?
From this answer by Manishearth
Given that framing is deprecated, and AJAX has origin control, iframes
is pretty much the only way to embed another page into yours.
GMail is made from iframes. The smooth UX of GMail (you can still use
it when your internet connection breaks, smooth navigation without
having to reload every time) comes from iframes. Again, this could be
implemented in AJAX, but it's harder.
On the other hand, issues with iframes (CSRF, clickjacking, etc) are
well known to modern developers and they can take measures to avoid
that.
- When to use Ajax?
Form validation
This is almost a no-brainer. It's so much nicer when the form tells
you as you are typing if you've filled it out wrong or not. Having to
go to the server and then return an error message is not only old,
it's slow. Leave the server validation in the form, that's important
for accessibility. But for those who can support Ajax, tell them right
away.
Comments
Comments on blogs or even just articles are a great use of Ajax.
Comments can change all the time, and especially when a commenter hits
the comment button, it's nice to see the comment appear immediately on
the page.
Filtering data
If you've got a large table with a lot of data in it, a nice
application for Ajax is to add filters and sorters to the table.
Getting your Web table to act more like Excel is really useful to
people.
Surveys and polls
When you click on your vote, the poll would just switch to show you
the results. And before you comment, About doesn't yet support Ajax on
our polls - but it sure would be nice. Maybe we can give the About.com
developers an "Ajax call" of our own.
When to use load?
As far as load is concerned, in my personal opinion, it is used to
load documents into any element in DOM, but will have same
disadvantages as ajax over iframe with regard to cross domain
data. You can use load when the result you are returning is html
and this provides option to render the result directly to the DOM
element
UPDATE:
When to use AJAX
Basically, the main difference between ajax and load is that
ajax has more options that can be set before posting data to
server plus ajax can be used to store data in the server using
type="POST" and data returned from the server may be manipulated the
way we want unlike load which can be used only to render data.
To conclude - Security wise ajax/load is good but as said before if you know the loopholes of security using iframe you can take necessary precautions to prevent them too.
AJAX USAGES AND DISADVANTAGES
I'm working on a project which needs to load via AJAX some HTML information on the page.But I'm not quite sure how to load that information.
I don't know which method is better for me:
1) Load the entire HTML with AJAX and then just append it to the page
or
2) Load only the data with AJAX and then build the HTML using Javascript(+JQuery)
The one I tend to use is the first method because it's the easiest one but also it is more expensive regarding the memory (the biggest file I have to load has about 7kb which is not too much)
The second one which is the hardest, involves a huge Javascript (Jquery) code to build the HTML(I have also to load the attributes for the element).And because I have lots of different HTML code to load I have to make lots of conditions (e.g. one for a button, one for a title, one for a textarea etc) and also I have to create variables that containes that HTML.
My question is what method is the best to use in my case?
I would always stick to the solution where I cleanly divide data/logic and view. This would probably the case in the first alternative. Making changes to HTML generated with JavaScript is quite hard.
I'd suggest another option: Use client side templates. Load the template and the data with an ajax call and then fill out the template using javascript. There are some libraries out there for this scenario.
I can imagine a couple of developers working: A full-time back-end developer and a full-time front-end developer.
The BE developer has to send some data for the FE developer to display it right. Thinking of programming as easy as possible, he chooses the first method described by the OP. Everyone is happy.
A few months later, the presentation of this very data needs to be updated. The manager quickly calls the Front-End developer, which says:
"Uhhh... No can do. The entire data already comes formatted directly from the server."
Oh noes! Would this have happened if the data came only as RAW DATA from the server? I wonder =)
the second method:
Load only the data with AJAX and then build the HTML using Javascript(+JQuery)
is much appropriate, one main advantages of these method is your ajax response will become faster.
Also, it is more logical to separate the logic from design.
Note: always the best solution is depend on your specific case.
Im new to ajax, jquery and javascript. When i learnt ajax and jquery, i also learned about back button issues and of course i learnt it too. But this solution uses the # anchors. But I want to change the url to the actual page just like to facebook. If you use facebook, you may have noticed that when you click an image, the url gets changed to the url of image but the page doesnt navigates away.
If Any one know about facebook like solution then please answer it.
I know you don't want to hear this, and I'm also new to AJAX and I'm also working on this right now, but i can give you the advise to use hashes first. Why?
Because hashes are accpted in any browser. If i were you I would now work out a solution that can be used with or without ajax (so there's a 'normal' navigation if ajax is not available, because web crawlers don't understand javascript).
If you have successfully worked out your solution, THEN you can add some functions to use the javascript pushState() (or replaceState()) method to manipulate the url.
Don't underestimate this and use hashes at the beginning.
You are looking for Hash Navigation, also known as Fragment Navigation. Google has a very good article on this.
Here is a demo from them: http://gtv-resources.googlecode.com/svn/trunk/examples/location-hash-html.html
Up to know, for DB driven web sites, I've used php (and CodeIgniter) to populate the data within the page prior to rendering, what I'm thinking about doing now is to develop a javascript (via jquery) page, make it as interactive as possible and then connect to the db through ajax/json calls - so NO data populated to the screen prior to rendering.
WHY? sort of an idea that I can, some day, hook the same web page to different data sources - a true separation of page from data - linking only via ajax.
I think the biggest issue could be performance...are there other things to watch out for? What's the best approach to handling security (stateless/sessionless)?
The biggest question is accessibility. What about those people using screenreaders, for which Javascript doesn't work? What about those on mobile phones (non-smartphones), again with very limited or no Javascript functionality? What about those people who have simply disabled JS? Event these days, you simply can't assume that everyone can use JS.
I like the original idea, but perhaps this would be better done via a simple server-side wrapper, which calls out to your data source but which can be quickly and easily changed to point at a different one.
Definitely something I've considered doing but you'd probably want to develop some kind of framework (or see if someone already has) if you're going to do this. Brute forcing this kind of thing will lead to a lot of redundant code and unnecessary hair loss. Perhaps a jQuery plugin? I'd be very interested to see what you came up with.