Whenever I want to study a new language, the best way IMO is to see how expert writes code in that language, that is always effecient.
I am looking for that :)
First you should understand that what is AJAX
Ajax is a way of developing Web
applications that combines:
XHTML and CSS standards based presentation
Interaction with the page through the DOM
Data interchange with XML and XSLT
Asynchronous data retrieval with XMLHttpRequest
JavaScript to tie it all together
Simple Ajax Example
AJAX isn't really a language in and of itself, it's used in tandem with other languages to create dynamic web applications. There isn't really a catch-all open source AJAX project that I'm aware of, although there may be some tailored to specific languages. Perhaps if you update the tags to elaborate on the language I can offer some suggestions.
Some resources you may be interested in:
http://api.jquery.com/category/ajax/
http://www.w3schools.com/ajax/default.asp
http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html
Related
I have to choose right js framework for web project. The structure of project consist from two separate modules:
1) Backend which sends data in xml/Json formats
2) html5 + JavaScript which receives data from backend and display it in browser.
Our team would be responsible for UI and JavaScript. I need to choose javascript framework.. (jQuery, ExtJs, Mootools, Prototype, DoJo, YUI, etc)
The ui is not complex but it contains small photo gallery, paging, popups, a lot of ajax, cross browsing..
How good is your team with CSS and Browser Compatibility?
If the answer is "not very" then I would suggest a rich framework such as ExtJs or DoJo that produces the html/css content for you.
If you are reasonably competent, then a behaviour only framework such as jQuery would give you more flexibility. There is of course also jQuery-UI which builds on jQuery base but falls into the first category.
Also be mindful of the future usefulnes of the skillsets required - good HTML/CSS/jQuery skills are widely used. By comparison few projects will use extJS. You may have a difficult job providing this as a rationale to management, but hopefully you get my point.
Perhaps the following reference may also help you decide?
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
I have no idea about AJAX programming features. I just know that it is Asynchronous Javascript and XML.
Please help me in knowing about this language.
I have gone through many AJAX tutorials. But none of the programs are running. Why I don't know.
Do we save the file with .HTML extension?
Read:
AJAX Tutorial by W3Schools.
AJAX Programming by Google Code University
To start coding you can get the Ajax Control Toolkit by Microsoft. You should read Ajax Control Toolkit Tutorials to get a grasp of it.
You can use the free Microsoft Visual Web Developer 2010 Express Edition as your IDE.
Aside from the correct responses that the others gave you, judging from your question I think you first need to learn about client-side and server-side code.
Do we save the file with .HTML extension?
Yes and no. You will have an HTML frontend, that for instance contains a button. This will be interpreted from the client's (=user) browser. In fact it may be rendered differently depending on the browser/OS/etc.
Now, you attach some Javascript code to this button. This also runs on the client's browser, and creates a XMLHttpRequest object, either directly or through the use of a library (JQuery & Co.). Note that a library is not necessary to do an AJAX request. It will make your life easier if you do a lot of AJAX calls, but it is not essential.
And here's where the magic happens: the XMLHttpRequest object will call asynchronously (i.e.: without reloading the page) a server-side page. This may be a PHP, ASP, Perl etc etc file that does something on the server, for instance queries a database. This part of the operation is absolutely independent from the client. The user can close the browser before the server-side code finishes to load and the server will not know about it.
Once the server-side code has finished executing it returns to the client with some response data (e.g. a piece of XML, JSON, HTML or whatever you like). Finally the client executes (or not) some other Javascript code in response to this, for example to write on the screen, again with no reloading of the page, something based on what the server has returned.
Maybe I can help you understand AJAX by clarifying the concepts a bit.
Please help me in knowing about this language.
AJAX is not a language, it is a way of using existing techniques to improve the user experience of a web site. The language is Javascript in the browser but you can use any server side technique that you feel comfortable with (ASP.NET, Java, PHP, Ruby etc.)
Do we save the file with .HTML extension?
Well, that is not really the point. What you have to grasp here is that there is a server and a browser that interact with each other. Yes, you can use static HTML files for your pages (and save them as .html files), but you'll need a server to respond to the requests of the browser. This may be why your sample code is not working; you need to set up a server that works with your pages.
The whole idea behind AJAX is to improve the user experience by not reloading the entire page when a user interacts with it. You request the data you need and update the page by using Javascript to update the HTML. This is called an out-of-band or asynchronous request.
I just know that it is Asynchronous Javascript and XML.
That is what the acronym stands for but it doesn't quite cover what the technique is for, nor is it accurate any more. In the beginning XML was used to transfer data from the server to the client. People found that XML is not really that easy to work with in Javascript so now it's more common to use JSON. JSON is a snippet of javascript that can be evaluated in the browser. The snippet creates javascript object(s) that represent the data.
If you use a Javascript library, like others have suggested here, you won't have to worry about many of the details though.
Before you get into AJAX you should make sure that you understand:
HTML and CSS
Javascript
how to modify HTML with Javascript
how a browser requests information from a server
how to handle requests on the server
If you are not comfortable with all of these concepts, stick with 'regular' web pages and try to improve your knowledge step by step.
Once you get the basic knowledge from W3school, I suggest you use a framework. Usually developers do not use XMLHttpRequest at all. Instead, javascript frameworks like ExtJS, jQuery and other frameworks make your work simple. I suggest you learn bit of javascript as well. check out jQuery.
Just to add that AJAX is rarely used in its pure form with XMLHttpRequest. You will often use it as a part of AJAX UI libraries which make your life easier. If you are from the Java world - such an AJAX library is Richfaces.
Instead of worrying about how to do AJAX, use something that allows you to forget about it. Frameworks like NOLOH do AJAX (and Comet) for you automatically without you having to do a thing. Just concentrate on your application, and business logic and it does the rest.
Really, everything is done via AJAX if available, automatically. No work on your part. If you're don't want to spend much time researching it, check out this short video that was demonstrated at Confoo PHP Conference this past March http://www.youtube.com/phpframework#p/u/11/cdD9hSuq7aw.
For all those worried about, well, if it's all AJAX, what about search engines? No need to worry, http://dev.noloh.com/#/articles/Search-Engine-Friendly/.
So instead of having to worry about all these different technologies, or the client-server relationship, you can sit down, code and have your website/WebApp working in no time.
You can read about NOLOH is this month's cover story of php|architect magazine, http://www.phparch.com/magazine/2010/may/.
Enjoy.
Disclaimer: I'm a co-founder of NOLOH.
It is easy one. Ajax getting data from server side by client side execution. We have to do use XMLHttpRequest to get the result.
I am trying to find the optimal architecture for an ajax-heavy Django application I'm currently building. I'd like to keep a consistent way of doing forms, validation, fetching data, JSON message format but find it exceedingly hard to find a solution that can be used consistently.
Can someone point me in the right direction or share their view on best practice?
I make everything as normal views which display normally in the browser. That includes all the replies to AJAX requests (sub pages).
When I want to make bits of the site more dynamic I then use jQuery to do the AJAX, or in this case AJAH and just load the contents of one of the divs in the sub page into the requesting page.
This technique works really well - it is very easy to debug the sub pages as they are just normal pages, and jQuery makes your life very easy using these as part of an AJA[XH]ed page.
For all the answers to this, I can't believe no one's mentioned django-piston yet. It's mainly promoted for use in building REST APIs, but it can output JSON (which jQuery, among others, can consume) and works just like views in that you can do anything with a request, making it a great option for implementing AJAX interactions (or AJAJ [JSON], AJAH, etc whatever). It also supports form validation.
I can't think of any standard way to insert ajax into a Django application, but you can have a look to this tutorial.
You will also find more details on django's page about Ajax
Two weeks ago I made a write up how I implement sub-templates to use them in "normal" and "ajax" request (for Django it is the same). Maybe it is helpful for you.
+1 to Nick for pages displaying normally in the browser. That seems to be the best starting point.
The problem with the simplest AJAX approaches, such as Nick and vikingosegundo propose, is that you'll have to rely on the innerHTML property in your Javascript. This is the only way to dump the new HTML sent in the JSON. Some would consider this a Bad Thing.
Unfortunately I'm not aware of a standard way to replicate the display of forms using Javascript that matches the Django rendering. My approach (that I'm still working on) is to subclass the Django Form class so it outputs bits of Javascript along with the HTML from as_p() etc. These then replicate the form my manipulating the DOM.
From experience I know that managing an application where you generate the HTML on the server side and just "insert" it into your pages, becomes a nightmare. It is also impossible to test using the Django test framework. If you're using Selenium or a similar tool, it's ok, but you need to wait for the ajax request to go return so you need tons of sleeps in your test script, which may slow down your test suite.
If the purpose of using the Ajax technique is to create a good user interface, I would recommend going all in, like the GMail interface, and doing everything in the browser with JavaScript. I have written several apps like this using nothing but jQuery, state machines for managing UI state and JSON with ReST on the backend. Django, IMHO, is a perfect match for the backend in this case. There are even third party software for generating a ReST-interface to your models, which I've never used myself, but as far as I know they are great at the simple things, but you of course still need to do your own business logic.
With this approach, you do run into the problem of duplicating code in the JS and in your backend, such as form handling, validation, etc. I have been thinking about solving this with generating structured information about the forms and validation logic which I can use in JS. This could be compiled at deploy-time and be loaded as any other JS file.
Also, avoid XML. The browsers are slow at parsing it, it is a pain to generate and a pain to work with in the browser. Use JSON.
Im currently testing:
jQuery & backbone.js client-side
django-piston (intermediate layer)
Will write later my findings on my blog http://blog.sserrano.com
Our team is experienced in web development (tomcat/Oracle) but not with AJAX on our existing projects. This is new technology for us, so I want to introduce this carefully and correctly.
What should I look at in terms of frameworks or best practice or common pitfalls?
read this:
progressive enhancement
and use a library such as jQuery, mootools, or YUI it'll save you many headaches with cross-browser implementation. this will show you why you want to use a library.
My first recommendation would be to explore the different frameworks available and see what your team prefers in terms of coding style. Most of the frameworks have the same basic features so a lot of it comes down to preference. I prefer jQuery, so that is my first recommendation, but I worked with YUI, MooTools, Prototype and EXT JS before making my decision.
Secondly, I would recommend working AJAX functionality as a progressive enhancement, allowing your apps to work with and without JavaScript. I find that this approach also ensures a solid, working application before worrying about adding the bells and whistles.
Head First Ajax is a good book IMO for getting started with the basic concepts behind working with Ajax. It would probably be a good place to start for your team to gain some knowledge of what is happening behind the scenes in whatever framework you choose.
One thing we struggled with when starting to use ajax was how often to use it.
We had no exact requirement as to where we were supposed to use ajax and not, and initially we erred to the side of using it too much. This affected application complexity quite a lot.
If you think of your inter-page-structure as a state-machine, ajax introduces nested state-machines within each page-state. The moment your sub-state machine ends up with a number of distinct states (I'd say anything over 2), you should think really hard about using a traditional approach.
The best starting point is to try to get a mix og full page reloads and ajax, and be conservative until you're sure you're getting really good at it.
Don't use it where you don't need it.
Long running operations that need to send the client some status updates? Use AJAX.
Markup for major UI elements (menus, ect)? Use plain old HTML.
Basically, use AJAX for transmitting data only. If you try do fancy things like dynamically pulling in UI elements on the client side with AJAX, you are in for a world of hurt when you get a client who wants to use ie5 (they exist), or a non-pc based browser.
first, look at the user interface you already have, and consider where it might make sense for its elements to be able to change/react independently. This is where your ajax enhancements might make sense
second, look at libraries as noted in the other answers (I like AJAXPRO for its simplicity, but it has been discontinued)
if you find that all of your page elements tie together and cannot change independently, then there is really no need for ajax
otherwise, consider how you will access the page state from your ajax enhancement points - depending on which ajax framework you use, you may or may not have access to the entire page object, session state, original request parms, etc. Consider these issues up front to avoid coding yourself into a hole and/or having to make messy workarounds.
If you were on .Net or Mono I would encourage you to use Ra-Ajax which abstracts away JavaScript completely. Though I work for Ra-Ajax (inventor) so I am biased...
From http://en.wikipedia.org/wiki/AJAX, I get a fairly good grasp of what AJAX is. However, it looks like in order to learn it, I'd have to delve into multiple technologies at the same time to get any benefit out of it. So two questions:
What are resources that can help me understand/use AJAX?
What sort of website would benefit from AJAX?
If you aren't interested in the nitty gritty, you could use a higher-level library like JQuery or Prototype to create the underlying Javascript for you. The main benefit is a vastly more responsive user interface for web-based applications.
There are many libraries out there that can help you get benefit out of AJAX without learning about implementing callbacks, etc.
Are you using .NET? Look at http://ajax.asp.net. If you're not, then take a look at tools like qcodo for PHP, and learn about prototype.js, jquery, etc.
As far as websites that would benefit: Every web application ever. :) Anything you interact with by exchanging information, not just by clicking a link and reading an article.
Every website can benefit from AJAX, but in my opinion the biggest benefit to AJAX comes in data entry sections - forms basically. I have done entire sites where the front end - the part the user sees had almost no AJAX functionality in it. All the AJAX stuff was in the administration control panel for assisting in (correct!) data entry.
There is nothing worse than submitting a form and getting back an error, using AJAX you can pretty much prevent this for everything but file uploads.
I find it easiest to just stay away from all the frameworks and other helpers and just do basic Javascript. This not only lets you understand what's going on under the covers, it also lets you do it in the simplest way possible. There's really not much to it. User the JS XML DOM objects to create an xml document client side. Sent it to the server with XMLHTTPRequest, and then process the result, again using the JS XML DOM objects. Start with something simple. Just try sending one piece of information to the server, and getting a small piece of information back.
The Mozilla documentation is good. Sites that benefit from it the most are ones that behave almost like a desktop application and need high interactivity. You can usually improve usability on almost any site by using it, however.
Ajax should be thought of as a means to alter some content on a page without reloading the entire page.
So when do you need to do this? Really only when you have some user interactions or form information that you want to keep intact while you change some content on the page.