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
Related
Ok so im learning javascript and I just wanted to know if its possible to make it do actions on external pages. For example if I wanted to say 'onload redirect to somesite.com/page1 then once on somesite.com/page1 fill in register form with these details'
is that possible?
You cannot do this.
This would represent, for lack of a better word, an enormous security hole.
The only way to make an external page "do stuff" is to write code that is on or explicitly included in that page itself. Period.
I have however, seen external pages get loaded INTO the current page as strings, and then have the javascript that loaded those pages modify that markup directly. But that is ugly.
On the first page you could modify some variables/values in a database. Then, in the second page you could check the values in your database, and do different "stuff" depending on those values.
You would need to set up a database and use some server-side scripting along with Javascript (server-side scripting is used to interact with your server/database). In your first page, the server-side script, like PHP, would fetch info from your Javascript. In your second page, your Javascript would fetch info from your server side script and then do stuff to that page.
This is a much safer way. If you are taking user input from things like HTML fields, you need to look into cleaning the input to prevent something called "cross-site scripting (XSS)".
You could do this IF you were rendering the other page in a frame of some sort.
There are multiple ways in which you can render an entire external page as a piece of your page. Many pages take precautions to block being rendered in a frame for just this very reason though (Not to mention copyright issues).
Once you're rendering the external page inside your page you should be able to reference components nested in your frame and do the sort of thing that you're describing.
There's no way to do this with JavaScript. The developers of all the major browsers work very, very hard to prevent this sort of thing. If this were possible, it would open up pretty massive security holes.
If you really want to use something like this for testing, you can look at browser automation software like Selenium. This allows you to automate various testing scenarios in your browser, but it does not affect other clients using your site.
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.
I'm mostly looking for directions here.
I'm looking to record events that happen within a web page. Somewhat similar to your average "Macro-recorder", with the difference that I couldn't care less about exact cursor movement or keyboard input. The kind of events I would like record are modification of input fields, hovers, following links, submitting forms, scripts that are launched, ajax calls, ajax results and so on.
I've been thinking of using Jquery to build a little app for this, and inserting this on whichever pages I would like to test it on (or more likely, loading the pages into an iframe or something). I however can not accommodate the scripts on these pages to work with this so it has to work regardless of the content.
So I guess my first question is: Can this be done? Especially in regards to ajax calls and various script execution.
If it can, how would I go about the ajax/script part of it? If it can't, what language should I look into for this task?
Also: maybe there's something out there that can already do what I'm looking for?
Thanks in advance
Two ways I can think of are:
Use an add on (firefox) or an extension (chrome) to inject a script tags that loads jquery and your jquery app
Set a proxy (you can use node.js or some other proxy server) and in your proxy inject script tags, be sure to adjust the ContentLength header. (tricky in https sites).
A much simpler and faster option where you don't need to capture onload is to write a JavaScript snippet that load jquery and your app by inject script tags, make that a bookmarklet and after the page loads hit the bookmarklet.
Came across this post when looking for a proxy for tag injection.
Yes it's quite possible to trap (nearly) all the function and method calls by a browser via code in a javascript loaded in the page - usually a javascript debugger (firebug?) or HTTP debugger (tamperdata / fiddler) will give you msot of what you require with a lot less effort.
OTOH if you really want to do this with bulk data / arbitary sites, then (based on what I've seen so far) you could use Squid proxy with an icap server/ecap module (not trivial - will involve a significant amount of programming) or implement the javascript via greasemonkey as a browser extension.
Just to clarify, so far I've worked out how to catch function and method (including constructor calls) and proxy then within my own code, but not yet how to deal with processing triggered by direct setting of a property (e.g. img.src='http://hackers-r-us.com') nor handle ActiveX neatly.
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.
I was wondering what is considered best practice. Let's say I have a dropdown select widget. Should it be preloaded with content when the page is served up from the server or once it is loaded, should an AJAX request be made to retrieve the contents and then populate it?
I kinda like the idea of loading it empty and issuing an AJAX call to retrieve the contents. But is that going to result in slower page loading times. Especially if the page has several widgets that need to be loaded with content from the server?
Does it matter on the amount of content being loaded?
For the dropdown example, I meant the options in the dropdown. So if I had a dropdown of employees to choose, from I am referring to that list of employees. Do I load an empty dropdown and on init of the controller have it retrieve the employees and populate the dropdown?
But then I think about a datagrid of let's say 200 rows of emplyees and some employee data that is stored in a database. Do I load the page and when the page loads have a controller whose init function retrieves the dataset of employees and populates and displays the datagrid?
Or when the page is served up from the server does it retrieve the dataset on the server-side where it also creates the datagrid and it gets loaded then.
This is the programming world that I am used to having done mostly PHP, JSP and ASP stuff in the past. Only using JavaScript for some cool page effects, etc.
But I seem to like the idea of once the page is loaded (or being loaded), make AJAX requests to retrieve the data needed to populate the widgets/content on the current screen. I am just concerned that the loading of page might seem clunky or slow since I am now making more requests to the server to paint the page. The initial request for the page, and then a request for each dataset needed to populate a widget.
I think the best answer is "it depends on your framework". I've seen web frameworks that handle this problem both ways. I do think that, especially when a lot of data is being populated into the DOM, it's preferable from a performance perspective to load as much of the page as possible in the initial HTTP response, and only update as needed via AJAX. Note that for large data sets, the performance overhead of an additional HTTP request is relatively small compared to the impact of performing substantial DOM manipulation via JavaScript -- DOM manipulation can be extremely slow in some browsers.
You might get more detailed answers if you add which framework(s) you're using.
As you point out yourself, loading everything with AJAX is going to make the page slow. In fact, one of the best practices for speeding up web pages is to reduce the number of http requests.
That being said, there are some cases where AJAX makes the page load faster. One example is auto complete for a text box. If implemented such a feature without using AJAX that would require the web page to load every single possible query in the first load. The page would take forever to load all that data. But the auto complete would probably seem more response than normal once the page had loaded.
My advice is to start out with the most simple solution you can think of, and then add AJAX, cache and other optimizing features where needed afterwords.
It depends of the data you are displaying, if you want quick updates from the database the ajax approach is fine.
But if your data is fixed (or you don't care about updating it once the page is loaded) then I shouldn't go with the ajax approach, is more work (requesting json, parsing it, populating the select or whatever) and you don't gain much benefit.