1.6. HTML RefresherFeeling a little rusty on your <div> s and <span> s? We're going to dive into some HTML on the next page, so before we do, here's a quick refresher course on two of the coolest HTML elements you'll ever run across. A <div> is a container element that can hold related elements, and allow you to style all those elements with one CSS rule. <div> <div >Use a <div> to group together elements with a similar purpose. <a href="home.html">home</a> <a href="books.html">writing</a> <a href="links.html">resources</a> <a href="lib.html">library</a> </div>You can refer to a <div>'s id in your CSS to style everything within the <div> at one time. <span> lets you separate a bit of inline text from its surroundings. You can style your <span> elements using CSS, and set off text easily. <span> <ul> <li><span >Buddha Bar</span>, <span >Claude Challe</span></li><span> elements can set off text, but don't start new paragraphs or blocks. <li><span >When It Falls</span>, <span >Zero 7</span></li><span> elements don't create a new block of text, but can still by styled with CSS. ... 1.6.1. Reviewing the Boards 'R' Us HTMLFirst things first... Katie already has a web page, so let's take a look at it. Then you can begin to add in all the JavaScript code we've been talking about. Here's what Katie's page looks like so far: <html> <head> <title>Boards 'R' Us</title>Katie's read "Head First HTML with CSS & XHTML", so she's all over this stuff... <link rel="stylesheet" type="text/css" href="boards.css" />Katie's using an external CSS stylesheet. </head>You'll need <script> tags here... <body> <h1>Boards 'R' Us Sales Report</h1> <div > <table> <tr><th>Snowboards Sold</th> <td><span >1012</span>Here's the total sales figure you'll need to update... </td></tr> <tr><th>What I Sell 'em For</th> <td>$<span >249.95</span></td></tr> <tr><th>What it Costs Me</th> <td>$<span >84.22</span></td></tr> </table> <h2>Cash for the Slopes: $<span >167718.76</span>...and then you can figure out a new net profit, too. </h2> <form method="GET" action="getUpdatedBoardSales.php"> <input value="Show Me the Money" type="submit" />Here's that button Katie pushes for updated totals. Right now, it submits the form, but you're going to change that soon. </form> </div> </body> </html> Katie used id attributes on her <span> tags so she could style them in CSS... ...and we can use those IDs later in our JavaScript to update the numbers in each of these <span>s.
1.6.2. Step 1: Creating a request objectLet's get back to updating Katie's web report. First up, you need a function that creates a new object to make requests to the server. This turns out to be a bit tricky, because different browsers have different ways of creating this object. To help you out, we've written some "pre-assembled" JavaScript for you. Whenever you see the logo, it means you'll have to take some code on faith, like this code below that creates an object to make requests to the server. Trust us thoughyou'll learn all about this code in more detail in the chapters to come. For now, just type it in and see what it can do. If you don't want to type this in yourself, you can find this code in create-request.txt, in the chapter01/boards examples folder... var request = null;Here's a variable to hold the request object. function createRequest() { try { request = new XMLHttpRequest();This line tries to create a new request object. } catch (trymicrosoft) {This is the type of the request object. try { request = new ActiveXObject ("Msxml2.XMLHTTP");These two lines try and create the request object, too, but in a way that works on Internet Explorer. } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null;If something goes wrong, this makes sure the request variable is still set to null. } } } if (request == null)Now, you can check if request is still null. If it is, something went wrong in the code... alert("Error creating request object!");...and we can spit out an error message to users with JavaScript's alert() function. } ...but you should really type this code in yourself. It will help your brain get used to writing and thinking about Ajax apps. Go ahead and add this code into the <head> element of your HTML in boards.html. Don't forget, you'll need to add the <script> and </script> tags, too. <head> <title>Boards 'R' Us</title> <link rel="stylesheet" type="text/css" href="boards.css" /> <script language="javascript" type="text/javascript">These tell the browser that you're adding some scripting, and that you're using JavaScript as the scripting language. </script>All that pre-assembled JavaScript goes in here. </head>
1.6.3. Step 2: Requesting updated salesNow that you can get a request object with createRequest(), you're ready for the next step: writing the getBoardsSold() JavaScript function. This function will use the new object to request the total number of boards sold from the server. Let's figure out what this function needs to do, and then we can get back to coding Katie's app. Remember our diagram? Here's the step we're working on: Here's what you'll need to do to make getBoardsSold() work:
You can use the pre-assembled JavaScript from the last two pages to take care of this. Katie already has this URL in her form, so this should be simple enough. Here's where you'll use that request object you created in createRequest(). You can use this number later, in Step 3, when you update the page with new values. You'll tackle this in just a little while.
1.6.4. Adding the getBoardsSold() functionIf you did the exercise on the previous page, you should have some code in your boards.html page that looks something like this: <script language="javascript" type="text/javascript">Remember, all of the JavaScript code is between the <script> and </script> tags. var request = null;This is your request variable; once your code calls createRequest(), this variable will point to a new request object. function createRequest() {Here's createRequest(), which you should have added a few pages back. // pre-assembled JavaScript } function getBoardsSold() {This is the new JavaScript function... createRequest();...and here's where the request object is created, using the pre-assembled JavaScript. } </script> 1.6.5. Sending the request to the right URLSo what's next? You've got an object that you can use to request the board sales from the server, but how do you make that request? First, you need to tell the object where to send the requestin other words, it needs to know what program on Katie's server to send the request to. So you need to tell it the URL of the script running on the web server. And where do we get that URL? You can find it in Katie's web form: And where do we get that URL? You can find it in Katie's web form: <form method="GET" action="getUpdatedBoardSales.php">Here's the URL of the PHP script we need to make a request to. <input value="Show Me the Money" type="submit" /> </form>Here's the <form> part of Katie's web report HTML. But doesn't the PHP script return a bunch of HTML right now? I thought we only wanted the number of boards sold for the Ajax version of the app. This is bonus credit for those of you who are into PHP. If you don't know PHP, it's OK... just take a quick look, and keep going. You don't need to understand this script to learn Ajax or follow the examples in the book.
|