21-02-2011, 03:55 PM
presented by:
Akash K. Mehta
AJAX.doc (Size: 3.4 MB / Downloads: 77)
AJAX Asynchronous JavaScript and XML
Introduction
Making Web applications look and feel like desktop applications is what this book is all about — that’s what Ajax does. Although Web development is getting more and more popular, users still experience the nasty part of having to click a button, wait until a new page loads, click another button, wait until a new page loads, and so on. That’s where Ajax comes in. With Ajax, you communicate with the server behind the scenes, grab the data you want and display it instantly in a Web page — no page refreshes needed, no flickering in the browser, no waiting. That’s a big deal, because at last it lets Web applications start to look like desktop applications. With today’s faster connections, grabbing data from the server is usually a snap, so Web software can have the same look and feel of software on the user’s desktop. And that, in a nutshell, is going to be the future of Web programming — now the applications in your browser can look and work just like the applications installed on your computer. No wonder Ajax is the hottest topic to come along in years.
In this part . . .
This par introduces you to Ajax. You get a guided tour of the Ajax world here, and you get a chance to see how Ajax is used today. A good sampling of Ajax applications are on view in Chapter 1, just waiting for you to check them out for yourself so you can see what Ajax has to offer. From autocomplete and live searches to Google Maps, I pack a lot of Ajax in here. Next comes Chapter 2, which provides the JavaScript foundation that the rest of the book relies on. If you already know JavaScript, feel free to skip that material, but otherwise, take a look. Ajax is built on JavaScript, so you want to make sure you’ve got all the JavaScript you need under your belt before going forward.
Lets see one talking between two IT people……
We aren’t getting enough orders on our Web site,” storms the CEO.
“People just don’t like clicking all those buttons and waiting for a new page all the time. It’s too distracting.”
How about a simpler solution?” you ask. “What if people could stay on the same page and just drag the items they want to buy to a shopping cart? No page refreshes, no fuss, no muss.”
“You mean people wouldn’t have to navigate from page to page to add items to a shopping cart and then check out? Customers could do everything on a single Web page?”
“Yep,” you say. “And that page would automatically let our software on the server know what items the customer had purchased — all without having to reload the Web page.”
“I love it!” the CEO says. “What’s it called?”
“Ajax,” you say.
Welcome to the world of Ajax, the technology that lets Web software act like desktop software. One of the biggest problems with traditional Web applications is that they have that “Web” feel — you have to keep clicking buttons to move from page to page, and watch the screen flicker as your browser loads a new Web page. Ajax is here to take care of that issue, because it enables you grab data from the server without reloading new pages into the browser.
1.1 How Does Ajax Work?
With Ajax, Web applications finally start feeling like desktop applications to your users. That’s because Ajax enables your Web applications to work behind the scenes, getting data as they need it, and displaying that data as you want. And as more and more people get fast Internet connections, working behind the scenes to access data is going to become all the rage. Soon, it’ll be impossible to distinguish dedicated desktop software from software that’s actually on the Internet, far from the user’s machine. To help you understand how Ajax works, the following sections look at Ajax from a user’s and a programmer’s perspective.
1.2 A user’s perspective
To show you how Ajax makes Web applications more like desktop applications,I’ll use a simple Web search as an example. When you open a typical search engine, you see a text box where you type a search term. So say you type Ajax XML because you’re trying to figure out what XML has to do with Ajax. Then, you click a Search the Web button to start the search. After that, the browser flickers, and a new page is loaded with your search results. That’s okay as far as it goes — but now take a look at an Ajax-enabled version of Yahoo! search. To see for yourself, go to http://openricorico/ yahooSearch.page. When you enter your search term(s) and click Search Yahoo!, the page doesn’t refresh; instead, thesearch results just appear in the box,
That’s the Ajax difference. In the first case, you got a new page with search results, but to see more than ten results, a user has to keep loading pages. In the second case, everything happens on the same page. No page reloads, no fuss, no muss. You can find plenty of Ajax on the http://openrico.org Web site. If you’re inclined to, browse around and discover all the good stuff there.
1.3 A developer’s perspective
In the article “Ajax: A New Approach to Web Applications” (www.adaptive pathpublications/essays/archives/000385.php), Jesse James Garrett, who was the first to call this technology Ajax, made important insights about how it could change the Web. He noted that although innovative new projects are typically online, Web programmers still feel that the rich capabilities of desktop software were out of their reach. But Ajax is closing the gap.
So how does Ajax do its stuff? The name Ajax is short for Asynchronous JavaScript and XML, and it’s made up of several components:
Browser-based presentation using HTML and Cascading Style Sheets (CSS)
Data stored in XML format and fetched from the server.
Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
JavaScript to make everything happen.
JavaScript is the scripting language that nearly all browsers support, which will let you fetch data behind the scenes, and XML is the popular language that lets you store data in an easy format. Here’s an overview of how Ajax works:
1. In the browser, you write code in JavaScript that can fetch data from the server as needed.
2. When more data is needed from the server, the JavaScript uses a special item supported by browsers, the XMLHttpRequest object, to send a request to the server behind the scenes — without causing a page refresh.
The JavaScript in the browser doesn’t have to stop everything to wait for that data to come back from the server. It can wait for the data in the background and spring into action when the data does appear (that’s called asynchronous data retrieval).
3. The data that comes back from the server can be XML (more on XML in Chapters 2 and 8), or just plain text if you prefer. The JavaScript code in the browser can read that data and put it to work immediately. That’s how Ajax works — it uses JavaScript in the browser and the XMLHttpRequest object to communicate with the server without page refreshes, and handles the XML (or other text) data sent back from the server. In Chapter 3, I explain how all these components work together in more detail. This also points out what you’ll need to develop Web pages with Ajax. You’ll add JavaScript code to your Web page to fetch data from the server (I cover JavaScript in Chapter 2), and you’ll need to store data and possibly write server-side code to interact with the browser behind the scenes. In other words, you’re going to need access to an online server where you can store the data that you will fetch using Ajax. Besides just storing data on the server, you might want to put code on the server that your JavaScript can interact with. For example, a popular server-side language is PHP, and many of the examples in this book show how you can connect to PHP scripts on Web servers by using Ajax. (Chapter 10 is a PHP primer, getting you up to speed on that language if you’re interested.) So you’re going to need a Web server to store your data on, and if you want to run server-side programs as
well, your server has to support server-side coding for the language you want to work with (such as PHP).
2 What Can You Do with Ajax?
The technology for Ajax has been around since 1998, and a handful of applications (such as Microsoft’s Outlook Web Access) have already put it to use. But Ajax didn’t really catch on until early 2005, when a couple of high-profile Web applications (such as Google Suggest and Google Maps, both reviewed later in this chapter) put it to work, and Jesse James Garrett wrote his article coining the term Ajax and so putting everything under one roof. Since then, Ajax has exploded as people have realized that Web software can finally start acting like desktop software. What can you do with Ajax? That’s what the rest of this chapter is about. Searching in real time with live searches One of the truly cool things you can do with Ajax is live searching, where you get search results instantly, as you enter the term you’re searching for. For example,
1.2. As you enter a term to search for, Ajax contacts Google behind the scenes, and you see a drop-down menuthat displays common search terms from Google that might match what you’re typing. If you want to select one of those terms, just click it in the menu. That’s all there is to it. You can also write an Ajax application that connects to Google in this way behind the scenes
Getting the answer with autocomplete
Closely allied to live search applications are autocomplete applications, which try to guess the word you’re entering by getting a list of similar words from the server and displaying them. You can see an example at www.paper mountaindemos/live, which appears in Figure 1-3. As you enter a word, this example looks up words that might match in a dictionary on the server and displays them, as you see in Figure 1-3. If you see
the right one, just click it to enter it in the text field, saving you some typing.
Akash K. Mehta
AJAX.doc (Size: 3.4 MB / Downloads: 77)
AJAX Asynchronous JavaScript and XML
Introduction
Making Web applications look and feel like desktop applications is what this book is all about — that’s what Ajax does. Although Web development is getting more and more popular, users still experience the nasty part of having to click a button, wait until a new page loads, click another button, wait until a new page loads, and so on. That’s where Ajax comes in. With Ajax, you communicate with the server behind the scenes, grab the data you want and display it instantly in a Web page — no page refreshes needed, no flickering in the browser, no waiting. That’s a big deal, because at last it lets Web applications start to look like desktop applications. With today’s faster connections, grabbing data from the server is usually a snap, so Web software can have the same look and feel of software on the user’s desktop. And that, in a nutshell, is going to be the future of Web programming — now the applications in your browser can look and work just like the applications installed on your computer. No wonder Ajax is the hottest topic to come along in years.
In this part . . .
This par introduces you to Ajax. You get a guided tour of the Ajax world here, and you get a chance to see how Ajax is used today. A good sampling of Ajax applications are on view in Chapter 1, just waiting for you to check them out for yourself so you can see what Ajax has to offer. From autocomplete and live searches to Google Maps, I pack a lot of Ajax in here. Next comes Chapter 2, which provides the JavaScript foundation that the rest of the book relies on. If you already know JavaScript, feel free to skip that material, but otherwise, take a look. Ajax is built on JavaScript, so you want to make sure you’ve got all the JavaScript you need under your belt before going forward.
Lets see one talking between two IT people……
We aren’t getting enough orders on our Web site,” storms the CEO.
“People just don’t like clicking all those buttons and waiting for a new page all the time. It’s too distracting.”
How about a simpler solution?” you ask. “What if people could stay on the same page and just drag the items they want to buy to a shopping cart? No page refreshes, no fuss, no muss.”
“You mean people wouldn’t have to navigate from page to page to add items to a shopping cart and then check out? Customers could do everything on a single Web page?”
“Yep,” you say. “And that page would automatically let our software on the server know what items the customer had purchased — all without having to reload the Web page.”
“I love it!” the CEO says. “What’s it called?”
“Ajax,” you say.
Welcome to the world of Ajax, the technology that lets Web software act like desktop software. One of the biggest problems with traditional Web applications is that they have that “Web” feel — you have to keep clicking buttons to move from page to page, and watch the screen flicker as your browser loads a new Web page. Ajax is here to take care of that issue, because it enables you grab data from the server without reloading new pages into the browser.
1.1 How Does Ajax Work?
With Ajax, Web applications finally start feeling like desktop applications to your users. That’s because Ajax enables your Web applications to work behind the scenes, getting data as they need it, and displaying that data as you want. And as more and more people get fast Internet connections, working behind the scenes to access data is going to become all the rage. Soon, it’ll be impossible to distinguish dedicated desktop software from software that’s actually on the Internet, far from the user’s machine. To help you understand how Ajax works, the following sections look at Ajax from a user’s and a programmer’s perspective.
1.2 A user’s perspective
To show you how Ajax makes Web applications more like desktop applications,I’ll use a simple Web search as an example. When you open a typical search engine, you see a text box where you type a search term. So say you type Ajax XML because you’re trying to figure out what XML has to do with Ajax. Then, you click a Search the Web button to start the search. After that, the browser flickers, and a new page is loaded with your search results. That’s okay as far as it goes — but now take a look at an Ajax-enabled version of Yahoo! search. To see for yourself, go to http://openricorico/ yahooSearch.page. When you enter your search term(s) and click Search Yahoo!, the page doesn’t refresh; instead, thesearch results just appear in the box,
That’s the Ajax difference. In the first case, you got a new page with search results, but to see more than ten results, a user has to keep loading pages. In the second case, everything happens on the same page. No page reloads, no fuss, no muss. You can find plenty of Ajax on the http://openrico.org Web site. If you’re inclined to, browse around and discover all the good stuff there.
1.3 A developer’s perspective
In the article “Ajax: A New Approach to Web Applications” (www.adaptive pathpublications/essays/archives/000385.php), Jesse James Garrett, who was the first to call this technology Ajax, made important insights about how it could change the Web. He noted that although innovative new projects are typically online, Web programmers still feel that the rich capabilities of desktop software were out of their reach. But Ajax is closing the gap.
So how does Ajax do its stuff? The name Ajax is short for Asynchronous JavaScript and XML, and it’s made up of several components:
Browser-based presentation using HTML and Cascading Style Sheets (CSS)
Data stored in XML format and fetched from the server.
Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
JavaScript to make everything happen.
JavaScript is the scripting language that nearly all browsers support, which will let you fetch data behind the scenes, and XML is the popular language that lets you store data in an easy format. Here’s an overview of how Ajax works:
1. In the browser, you write code in JavaScript that can fetch data from the server as needed.
2. When more data is needed from the server, the JavaScript uses a special item supported by browsers, the XMLHttpRequest object, to send a request to the server behind the scenes — without causing a page refresh.
The JavaScript in the browser doesn’t have to stop everything to wait for that data to come back from the server. It can wait for the data in the background and spring into action when the data does appear (that’s called asynchronous data retrieval).
3. The data that comes back from the server can be XML (more on XML in Chapters 2 and 8), or just plain text if you prefer. The JavaScript code in the browser can read that data and put it to work immediately. That’s how Ajax works — it uses JavaScript in the browser and the XMLHttpRequest object to communicate with the server without page refreshes, and handles the XML (or other text) data sent back from the server. In Chapter 3, I explain how all these components work together in more detail. This also points out what you’ll need to develop Web pages with Ajax. You’ll add JavaScript code to your Web page to fetch data from the server (I cover JavaScript in Chapter 2), and you’ll need to store data and possibly write server-side code to interact with the browser behind the scenes. In other words, you’re going to need access to an online server where you can store the data that you will fetch using Ajax. Besides just storing data on the server, you might want to put code on the server that your JavaScript can interact with. For example, a popular server-side language is PHP, and many of the examples in this book show how you can connect to PHP scripts on Web servers by using Ajax. (Chapter 10 is a PHP primer, getting you up to speed on that language if you’re interested.) So you’re going to need a Web server to store your data on, and if you want to run server-side programs as
well, your server has to support server-side coding for the language you want to work with (such as PHP).
2 What Can You Do with Ajax?
The technology for Ajax has been around since 1998, and a handful of applications (such as Microsoft’s Outlook Web Access) have already put it to use. But Ajax didn’t really catch on until early 2005, when a couple of high-profile Web applications (such as Google Suggest and Google Maps, both reviewed later in this chapter) put it to work, and Jesse James Garrett wrote his article coining the term Ajax and so putting everything under one roof. Since then, Ajax has exploded as people have realized that Web software can finally start acting like desktop software. What can you do with Ajax? That’s what the rest of this chapter is about. Searching in real time with live searches One of the truly cool things you can do with Ajax is live searching, where you get search results instantly, as you enter the term you’re searching for. For example,
1.2. As you enter a term to search for, Ajax contacts Google behind the scenes, and you see a drop-down menuthat displays common search terms from Google that might match what you’re typing. If you want to select one of those terms, just click it in the menu. That’s all there is to it. You can also write an Ajax application that connects to Google in this way behind the scenes
Getting the answer with autocomplete
Closely allied to live search applications are autocomplete applications, which try to guess the word you’re entering by getting a list of similar words from the server and displaying them. You can see an example at www.paper mountaindemos/live, which appears in Figure 1-3. As you enter a word, this example looks up words that might match in a dictionary on the server and displays them, as you see in Figure 1-3. If you see
the right one, just click it to enter it in the text field, saving you some typing.