Class 10 – Intro to AJAX
AJAX is an acronym that stands for Asynchronous Javascript And XML. It refers to a specific feature of the browsers’ implementations of Javascript that became popular in the first few years of this century because it provided a way in which web pages could load content on demand in reaction to a user’s actions, rather than preloading all content with the initial page load, as had been the norm previously.
Many people in the web industry conflate the terms AJAX and dHTML. Since you are taking this class, you should know the accurate meaning of each of these terms, even if you choose not to stick to the correct meanings when conversing with the ignorant and incorrigible masses.
dHTML
Since Javascript was first introduced into Netscape Navigator in 1995, people have been using it to change the content of web pages. In other words, long before AJAX was even possible, there was dHTML. Dynamic HTML is the technique, which we have already seen, of using Javascript to change the content of the page dynamically. Most typically, this change is in response to a user’s action, such as a click, a mouseover, mouseout, or some other action that changes the appearance of the page in some way. Often, these changes are simply showing and hiding various parts of the content, or changing the styles associated with some of the content.
By preparing Javascript, CSS, and XHTML in just the right way, a website maker can make a page seem to be dynamic and responsive to user actions. dHTML refers to this use of Javascript, in combination with CSS and XHTML, to make a page seem dynamic and responsive.
People don’t use the term dHTML very much anymore, although the dHTML techniques are used more than ever.
AJAX
AJAX refers exclusively to the technique in Javascript whereby Javascript code on a page makes a request to the server without requiring a reload of the entire web page. As we have discussed the client/server relationship, the HTTP GET and HTTP POST methods, persistent data and passing data, we have spoken as if a request to the server is one and the same as the loading a whole web page in the browser. Now you know that there is a way to make requests to the server without requiring the reload of the entire page – it is called AJAX.
After an AJAX request is made from the Javascript code running on the client to the server, the server may respond, as it usually does to any request. The Javascript code that made the request often waits [asynchronously] for that response. Once the response is received from the server, the Javascript code on the client then updates the content of the page dynamically using standard dHTML techniques depending on exactly what response it got back.
People often [inacurrately] use the term AJAX to mean any dHTML, regardless of whether it actually involves a request to the server. The term, AJAX, has been usurped by marketers to indicate any kind of dynamic content.
Conceptually, making an AJAX request is identical to any other request to the web server. The Javascript code makes the request using either HTTP GET or HTTP POST. The client can pass data to the server along with that request, or not. The server can process that request using PHP or some other server-side language, read any data that was passed, do some business logic, and respond appropriately.
According to how AJAX was originally conceived, the server was supposed to respond with some XML code that the browser thean parsed. Practically-speaking, the browser is not especially good at parsing XML, so receiving a response in XML is more work than it’s worth. Today, having the server respond with XML is the exception rather than the rule, although it is still done. However, these days the server is programmed to usually respond either with an XHTML snippet which is then dynamically output on the page by the Javascript script on the client, or the server responds with a Javascript code snippet of its own which is then run by the client.
JQuery
Naturally, Internet Explorer handles making AJAX requests differently from Firefox and the other popular browsers. Once again, JQuery solves this problem by providing a set of functions that normalize the browser differences for us. While you can, of course, use the native Javascript AJAX methods to handle the asynchronous requests to the server, I strongly recommend that you use JQuery or another Javascript framework instead to make your code more reliable across browsers, and to keep it simpler and easier to maintain.
No related posts.
Tags: class 10
Loading ...