I will just provide a hypothetical case to understand the point. Let's assume I am creating a mailing application. If I refresh the data every time the user returns to the main mail list page from viewing a particular mail, is there an advantage to make this navigation on the client side via AJAX? Or does it make more sense to actually navigate to a new url for viewving a particular mail and a separate url for the main page?
The same question applies to other cases such as a shopping website. What are the advantages/disadvantages of making each product page a separate url rather than navigating to that product using AJAX?
With a one page app the navigation after the page load is quicker, and you can add effects for the page change, but if you have a lot of items to show, you should load data about it also, so the other approach should be better.
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
I'm taking an online course from a site that does not provide for asking questions about the content, so I am asking you.
This is one of the MUSTS for page titles:
"On a so-called single-page application — in which AJAX is used to bring in new content without refreshing or loading the entire web page — any time that the URL changes, the page title should be updated accordingly"
I always thought that if you used ajax to change part of a page the page itself would remain static. That is why would a URL change with an AJAX call. Are there any examples showing what this looks like?
AJAX requests don’t change the browser URL or history. To mimic the behaviour of traditional websites, single page apps will modify the URL and history and use the URL to change the view.
For more on changing the browser history, see Adding and modifying History entries.
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
My website uses ajax.
I've got a user list page which list users in an ajax table (with paging and more information stuff...).
The url of this page is :
/user-list
User list is created by ajax. When the user click on one user, he is redirected to a page which url is : /member/memberName
So we can see here that ajax is used to generate content and not to manage navigation (with the # character).
I want to detect bot to index all pages.
So, in ajax I want to display an ajax table with paging and cool ajax effetcs (more info...) and when I detect a bot I want to display all users (without paging) with a link to the member page like this :
JohnBob...
Do you think I can be black listed with this technique ? If you think so, could you please provide an alternative solution by keeping these clean urls and without redeveloping the user-list (without ajax) ?
Google support a specification to make AJAX crawlable:
http://code.google.com/web/ajaxcrawling/docs/specification.html
I did an experiment and it works:
http://seo-website-designer.com/SEO-Ajax-Google-Solution
As this is a Google specification, you won't get penalised (unless you abuse it).
Saying that, only Google support it at the moment (AFAIK).
Also, I believe following the concept of Progressive Enhancement is a better approach. That is, create a working html website then make the JavaScript enhance it
Maybe use the urls with an onclick to trigger your AJAX scripting? Like
Some URL
I don't think Google would punish you for this, you primarily use JScript, but you do provide a fall back for their bot, so your site doesn't get any less accessible.
EDIT
Ok, I misunderstood. Then my guess would be you basically have two options:
1. Write a different part of your site where bots end up, or,
2. Rewrite your current site to for example always give a 'full' page, with an option to only get, say, the content div. Then you can get only the content with JavaScript, but bots will always get a nice page.
I was wondering what the best way to keep my background.asp file playing throughout all of my web pages.
My website www.marioplanet.com uses ASP #includes in order to keep certain parts of my website the same. So, if I want to change a link in my header, I just need to update 1 file.
Now, I was wondering how to keep my background.asp file loaded throughout my entire site, which has all of my music functionality, even when changing pages.
Therefore, the music and backgrounds are continuous throughout the entire site.
How can I most easily do this without restructuring my entire site? Or would I have to completely redo my site?
From what I understand, you're looking for a way to keep track of the state of e.g. a music player while your visitor is navigating around on your site.
The following ideas might help:
Make your entire website an AJAX application where state is given through hash identifiers (take a look at Facebook and the jQuery History Forward plugin). With this you could start playing music and the user would navigate around the site without reloading the entire page (hence, without stopping the music).
Set a cookie with the timestamp of when the music player starts (via Javascript). Now, when a page loads, check for the existence of such a cookie and, if returned, calculate the offset between cookie timestamp and current timestamp. Setting the player to that offset will pick up the music approximately where it stopped on the last page.
Control the music in a separate pop-up window. Old fashioned and not really nice in terms of usability.
Control the music in an invisible frame that doesn't reload. Very old fashioned and with major backlashes for the user (there is a reason why traditional frames are out-dated).
Hope this helps. :)
If I understand you correctly, you are essentially wanting to have the background and music (which can be loaded in the background) never reload once the user visits the site. THe best way to do this is to make the site a completely AJAX based application, and use jQuery to load pages into divs when the user is navigating through the site.
Essentially you will want to create an index page which holds your backgound, and also contains a 'content' div. When a user clicks on a navigation button using the jQuery .load() method to load the requested page into the content div.
Another option is to go with jQuery UI, and have an element like their tabs component where you define all of the different pages of the site, and then it takes care of all the heavy lifting for you.
There are a few tutorials around for using jQuery with ASP.Net. I would definately go with it while trying to do something like this.