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
Related
today a good friend of mine had an offline website and wanted to have it that way an alternative link is provided when the other doesn't work.
E.G. Say sometimes a server works and you go to it frequently and then it is down. He wants an alternative link for that link if that server is not available, instead be redirected to another. I assume that JavaScript is required.
I have no code to provide since I don't know how. Please leave random code of yours as a representation of your answer. Hopefully I asked the question correctly for you to understand. :)
I will edit this question if it is not understandable.
The only way for this to work is to create an API endpoint on his server with the website that could be down, which just returns success. This is usually called a healthcheck.
Then on the website which links the broken one, use a JQuery POST to see if the healthcheck returns success or failure, and then change the HTML Dom accordingly. (So if other people link to your website, they would have to do this)
You can't redirect from the website that would be down from your point, because.... well it would be down....
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
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 have a search engine on my website and it works via ajax. I want to have a specific <title> for each search attempt. To achive that I have to alter every time after I recieve a response from ajax.
Do you have any idea if googlebot will see this altered and use it to index my webpage?
Thanks for any help!
Do you have any idea if googlebot will see this altered and use it to index my webpage?
Most likely not.
You should change the title on server side.
Google bot does something similar to opening the page URL using notepad. It will see the JavaScript code as a plain text, which tries to change the title; but it will not see the result of the script execution of course.
EDIT:
Ajax enabled web pages are crawled using the same principle, unless they follow the techniques for Ajax-enabled web sites, as suggested by google:
AJAX crawling: Guide for webmasters and developers
Well, google added many features to its search engine over past years, and probably it will be able to see the changes. But how do you imagine a client should reach a page which address doesn't change, but content does after few clicks? You must combine AJAX with normal separate pages; this will also add compatibility for clients that have JavaScript disabled. E.g. have all pages redirect to the one working with AJAX if JavaScript is enabled and user-agent string doesn't match *bot*.
Simply, Google will not index any dynamic content from your page.
As Slava said, Google added many features to its search engine over past years, and probably it will be able to see the changes. But even if Google does eventually start indexing dynamically changed content, I think it is still uninteresting from a search engine optimization standpoint that those content will not be indexed as quickly as the others served from server.
It's important to know what you're getting and what you're losing. Yes, you may be adding functionality to your page easily and enhancing the user experience, but if you don't get the data indexed, you lose all that juicy keywordy goodness. :)
Hi i'm looking for a tutorial for understand how i can create a page with a div that isn't refreshed when the page url changes.
Ex. The facebook chat isn't refreshed when i move from an url to another.
Thanks
AJAX is definitely being used, although it may not seem like it because the actual URL is changing. Most AJAX apps just change the hash part of the URL (somesite.com/page/#feature1).
I don't know exactly what Facebook is doing as I haven't studied the app, but I would guess that they are using HTML5 history.pushState() to change the URL so that if you bookmark it or reload, it will go to the same place. I see that #Felix already mentioned this in a comment.
Take a look here for more help:
Is there a way to change the browser's address bar without refreshing the page?
There are lots and lots of resources on using AJAX. I personally use jQuery and find that it makes much of this quite easy. Here's a tutorial that might help:
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Sounds like you are wanting to use AJAX (javascripts XMLHttpRequest function). here is a great article on it along with some basic examples: Here
It's called AJAX, if you use jQuery, here's a good tutorial:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
I wanted to post another examples if you dont use jQuery but i need more points to post more than one link, sorry...