I am implementing slideshow. I have two options for paging between images:
1) to implement javascript page reload which definitely counts towards unique page view.
2) to implement ajax light box control which i am not sure is unique page view for each image.
I need more information for the second scenario.
How Your ajax request is interpreted by your statistics depends on the configuration of your webserver and / or statistic script installed.
An ajax call is simply a http request, so You can count it or not, depending on the source IP of the request and maybe the user agent (for IP's behind a NAT)
How are you counting pageviews? Google Analytics, for instance, counts page views via JavaScript, so if you don't retrieve and interpret (display to the browser) the GA JavaScript, the load wouldn't be counted.
Related
The business web application that I need to build for our company will use an accordion menu (such as the jQuery UI accordion).
I would like to use link jQuery click events to the accordion menu and load the content dynamically with the ajax .load shorthand.
Currently I'm dealing with an internal conversation where someone mentions that Ajax is slower than a regular browser request.
Now my question is: is that true, taken into account that:
The loading time of the accordion-content should be faster (all scripts / css / accordion / header loaded only once at the beginning);
The Ajax request does not influence the performance of any server actions;
Should I really use a browser request - and will it really be faster?
It seems very un-intuitive, using an accordion to use it as a static element that is just displayed on every page refresh.
I built a prototype before, using Ajax Load to load div containers with html and javascript, and it loaded as fast as a normal browser request would.
As for an answer, an ajax request is indeed smaller than a regular request for a page.
You have a few options where you could - pre-fetch the data, store this in an array or object and load it onclick of the slider,
or simply use ajax, this however will create another request which, if you have alot of users could potentially slow down your website.
pre-loading data into your html in hidden divs, or via a js.php directly into an array / object would be the most efficient way depending on the size of the contents.
Do know that ajax loaded content is not indexed by search engines and will be less SEO friendly.
In my webapp I have a page which presents a number of tabs, each of which must be independently reloadable via AJAX. For user experience's sake, I want all the data to be presented immediately when the page loads instead of ajaxing it in. For maintainability' s sake(and because I'm lazy) i don't want to write separate code for the complete page.
Is there a way to include the html that would be generated by calls to other controllers in the page?
I use jsp for views if that is relevant.
The easier way of doing this would be to manually trigger an AJAX call for each tab at page load event. This will bring the HTML for each tab. The downside of doing this would be that it'll cost you X requests.
Another option would be to create a Front Controller for all others that send the info per tab. You send one request to the front controller and its job would be to put the results of the others together and give a single big response.
I'll admit that I'm pretty new web development (only been coding for about a year) and especially green when it comes to JS / jQuery.
A specific web page I've built loads different data based on hovering over certain categories: country clubs, resorts, hotels, etc. When I built the site on my local machine, the javascript function was super quick. However, on the live site, it has a long delay before the data swap happens.
The URL is: http://preferredparkingsolutions.com/client_list.html
Which links to a javascript function at: http://preferredparkingsolutions.com/scripts/clientHover.js
Which replaces the display div (#client_list) by pulling data from a text file.
Is there a better / faster way of doing this?
Yes, this could be optimised by loading the content in up-front and caching it. Currently you are doing a HTTP request each for each and every hover - even if the user has hovered over that element before, since the AJAX responses aren't being cached. Doing this would be your quickest win.
However, I can't see any case at all for having the content live externally. Is there any reason you're against having the content physically in the page and just using show/hide methods? There's various benefits to this - SEO, for one thing, since Google will find the content.
this is the external page you are loading http://preferredparkingsolutions.com/client_list.inc.html and the content looks little and looks like its a static page then why not just load every thing upfront and then just hide and show div's ? as Utkanos suggested you will aslo have a SEO benifit and also its HTTP request each for each and every hover. if you still want to load it externally lost load it once and cache it and use the cached version to hide and show divs.
I like that, these days, we have an option for how we get our web content from the server: we can make an old-style HTTP request (with its own URL in the browser) or we can make an AJAX call and replace parts of the DOM on the fly.
My question is this: how do you decide which method to use when there's an option to use either?
In the "old days" we'd have to redraw the entire page (including the parts that didn't change) if we wanted to show updated content. Now that AJAX has matured we don't need to do that any more; we could, conceivably, render a "page" once and just update the changing parts as needed. But what would be the consequences of doing so? Is there a good rule of thumb for doing a full-page reload vs a partial-page reload via AJAX?
If you want people to be able to bookmark individual pages, use HTTP requests.
If you are changing context, use HTTP requests.
If you are dividing functionality between different pages for better maintainability, use HTTP requests.
If you want to maximize your page views, use HTTP requests.
Lots of good reasons to still use HTTP requests - Stack overflow is a wonderful example of those divisions between AJAX and HTTP requests. Figure out why each function is HTTP or AJAX and I'm sure you will derive lots more reasons when to use each.
My simple rule:
Do everything ajax, especially if this is an application not just pages of content. Unless people are likely to want to link to direct content, like in a blog. Then it is easier to do regular full pages.
Of course there are many blended combinations, it doesn't have to be one or the other completely.
A fair amount of development overhead goes into partial-page reloads with AJAX. You need to create additional javascript handlers for all returned data. If you were to return full HTML blocks, you would still need to specify where the content should go and whether or not it's replacing other content. You would potentially have to re-render header tags to reflect content changes and you would have to implement a history solution to make sure search engines can index each page (using SWFAddress jQuery plugin, for example). If you return JSON encoded data you have an additional processing step.
The trade-off for reduced bandwidth usage by not using a page refresh is offset by an increase in JS code and event bindings which could affect page rendering speed as well as visual effects.
It all really depends on your target audience and the overall feel you are trying to go for on your page. AJAX and preloaders are flashy, and people love flashy things. If you believe the end-user experience will improve by adding partial page loads by all means implement them.
I am new to ajax and i wanted to know if we can load a complete new page and not just a part of it using ajax. Please give a small example script for understanding if this is possible. Here i am trying to display only one url to user while i change from one page to another when he clicks on any of the links in the page.
You can of course request for a new page and load it via body.innerHTML = ajax.responseText;
I would strongly recommend against this though for reasons outlined in this post: Why not just using ajax for Page Requests to load the page content?
The whole premise really is that with
AJAX you don't need to reload the
whole page to update a small
percentage of that webpage. This saves
bandwidth and is usually much quicker
than reloading the whole page.
But if you are using AJAX to load the
whole page this is in fact
counterproductive. You have to write
customised routines to deal with the
callback of the AJAX data. Its a whole
lot of extra work for little to no
increase in performance.
General rule for where to use AJAX: If
your updating >50% of your page, just
reload, else use AJAX.
You will not only need to request for the new page, but then also take care of ensuring the old styles on the current page are removed and don't interfere with the new page. Theres all sorts of problems associated with what your trying to do. It's possible, but I recommend not to do it.
edit: actually you might be able to just do document.write(ajax.responseText) which should take care of overwriting everything in the document, including css styles etc. Though still don't recommend it.
When you're finished with processing the AJAX request simply use this JS line:
window.location.replace('<URL of the new page>');
This has exactly the effect of loading the new page via
....
When you make an AJAX request, a request goes off and brings you the contents of the URL that you have requested. Now technically you can do whatever you like with the contents (which could be HTML), you can replace any element within the DOM with it. Be careful however of replacing EVERYTHING on the page, you are more likely just going to want to replace what is within the tags.
If what you want to do is show one URL for multiple pages, AJAX is overkill. Why not just use an IFRAME?
This could be useful if your page was unsure if it was expecting back errors to be inserted onto the page or a "new" submission confirmation page. This can be used when you want to put a validation servlet (or whatever) in front of the submission servlet (or whatever). If the page always hits the validation servlet, you hide the submission servlet which actually performs the data update. In the case where the validation passes, forward to the submission servlet. The user never knows what happened in the background.
When the page gets a response back you could just look at the first portion of the response text and determine if it had a keyword set by the server, which means this is a new page. Remove the keyword from the text, and do document.write(ajax.responseText); as described previously. Otherwise insert the response text into your errorBox div and let the user retry submission.