Webmonkey » wiki

Ajax for Beginners

Webmonkey Staff — Wed, 17 Feb 2010 01:45:47 +0000

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

What is Ajax?

So what is this fancy object that everybody wants a piece of? In brief, it’s a solution to one of the big annoyances of web interfaces. Generally, the user inputs some data or makes a choice, and clicks a button that sends the data to the server. The server takes a look at the data and sends back a whole new web page, which is loaded into the browser. Reloading a page every time you want to do something is annoying, disjunctive and time-consuming for the user. XMLHttpRequest moves that browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! Go take a look at Google Suggest if I’ve lost you — it’s a nice, eloquent example of this.

JavaScript has always been able to sneakily trigger a server-side script without anything happening in the browser by using a few classic tricks. This one, for example:onSubmit='runascript = new Image(); runascript.src="http://www.wired.com/images/archiveyscript.php?" + this.value'. That sort of chicanery is good, maybe, for caching form data to a file on the server, but it doesn’t return any information to the JavaScript that calls it, so its usefulness is limited. Ajax, on the other hand, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML is overkill or just not your cup of tea.

This opens up millions of exciting possibilities. Every form submission, every JavaScript event, and heaven knows what else, can now interact with server-side databases and processing power. Data retrieval, password authentication, image generation – you name it, Ajax can trigger it.

Making Your Own

The potential of Ajax-enhanced web apps is limited only by your imagination – and by browser support. Mozilla-based browsers can do it, and Safari, and newer versions of Explorer, and Opera 8 but not Opera 7. It’s best to incorporate a fallback way of doing things for users who aren’t as cutting edge as you’d like them to be. Also, Explorer does things somewhat differently (of course) from all the other browsers, so it’s necessary to fork the code to account for the irritating little 80-odd percent of the population who use IE.

Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts. First, we need an HTML form. This you’ve seen before:



 

 Report

    



 Welcome, student. Please enter your essay here:

Note that, for users without support for our script (named xhr.js), the form will just submit to the fallback page at fallbackpage.php.

Next comes the JavaScript. This is the exciting part, so we’ll take it slow.

 function grade(essay) {

First, we initialize the object. We have to do it two ways, for different browsers.

    // Mozilla version

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

    }

    // IE version

    else if (window.ActiveXObject) {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

Then, we escape the user input to make it URL-safe:

    essay=encodeURIComponent(essay);

and use the open method of the object to open a connection to the PHP script:

    xhr.open("POST","grade.php");

The method requires two arguments:first, the HTTP method (GET or POST); second, the URL of the script.

A quick HTTP header prepares the script for what it’s getting, and then the send method transmits the actual request:

 xhr.setRequestHeader(

      'Content-Type',

      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay);

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.

Getting Results

Now we’re ready to see if the HTTP request worked. The readyState property counts up from zero during the request, and shows 4 when the server page has loaded successfully.

 xhr.onreadystatechange=function() {

      if (xhr.readyState==4) {

If the request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. For more complex server script output, a responseXML property, which can hold a full document object of XML data, is also available.

      grade = xhr.responseText;

      alert ("Nice essay. Your grade is " + grade);

    }

    return false;

 }

Want to see all that in a pastable block? Here it is in a separate file.

Finally, the third component is the PHP script, which lives on the server and waits patiently for the JavaScript to pass it some juicy data. This example uses PHP, but any language you like — Ruby, Perl, C, ASP — can do as well. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space.

The php://input grabs the POST data, which gets put into a string, decoded and passed to the ingenious grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo – ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page must be set to text/xml.

What the user sees is this:She types her essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP gnomes, and returned with a grade, without ever reloading the page. The user can modify her essay and resubmit it endlessly.

And that’s the gist of the almost magical XMLHttpRequest object! The example is simple, but the uses of the object can be elaborately, multifariously clever. If you need further inspiration and edification, a burgeoning number of examples are dotted around the Web:

Ajax-powered start pages like iGoogle, Pageflakes and Netvibes

Social news site Digg

Movie rentals site Netflix

But what data you send and receive with Ajax is up to you.

CPC

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Cost per click (CPC) is a method of charging advertisers for the user clicks their advertisements have received.

Cost per click is the going method for charging for targeted advertising, such as search ads, while cost per impression (CPM) is largely associated to branding advertisements, such as banner ads. Cost per acquisition (CPA) charges only for users who have committed a transaction or conversion.

Hover

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Much like standing behind your co-worker while she slaves away, hover implies standing by but not doing anything. In dHTML, it refers specifically to when the user has positioned her cursor over a link but not yet clicked anything. The style will not change if the cursor is simply passed over the link, but you can set an action to take place after a predetermined amount of hovering.

Write Symbols and Special Characters in HTML

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

When you type regular letters, numbers, and characters from your keyboard into the body of an HTML document, they show up on your Web pages just as you typed them. But things aren’t so easy in non-English speaking countries (and such places do exist – honest). Languages such as French, German, and Icelandic often use characters that are not found on your typical keyboard. Even in English, accents can distinguish a “résumé” from a “resume.”

So how do you make special characters and accented letters show up on your pages? You use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

The most common character entities have been collected by the International Organization for Standardization and compiled in the Special Characters ISO Latin Alphabet No. 1 table, which includes special characters, letters with diacritical marks (accents, umlauts, etc.), and scientific and currency symbols. The Latin-1 table contains 255 characters.

There are two kinds of entities here: text and numeric. Both kinds begin with an ampersand (&) and end with a semicolon (;).

The text entities use letters to represent a character, and they’re designed to be easy to remember. So say you wanted to have the following sentence appear on your Web page:

"The © symbol stands for 'copyright.'"

Your HTML code would look like this:

"The © symbol stands for 'copyright.'"

Numeric entities are similar to text ones, but should be written in this form:&#x; – where the “x” represents a number between 0 and 255. It is very important to make sure that the # symbol precedes the number, or the entity will not work. So to make “The © symbol stands for ‘copyright.’” with a numeric entity, your HTML would look like this:

"The © symbol stands for 'copyright.'"

As you can see, some characters (like ©) can be represented by either a text or a numeric entity.

A note of caution here:Many computers let you use keyboard shortcuts to create accented letters and special characters (for example, typing option + e will produce “é”). Beware, the shortcuts may not always work. The browser may read the character you created differently or not at all. This occurs because the code that is used to represent the character on the keyboard does not directly translate into Latin-1 and probably won’t be read by your Web browser.

Sometimes, case can also be important. For example, é produces the é character, while É results in É.

So, that’s entities in a nutshell. Keep in mind that not all entities are recognized by older browsers. You may want to bookmark our ISO entities page for future reference.

Python

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Python is an interpreted, object-oriented programming language that runs on several operating systems, including Unix, Windows, OS/2 and Macintosh. The language is relatively easy to learn, and can be used for developing apps, or for more mundane tasks such as system administration, code generation and graphical user interfaces. Python was created by Guido van Rossum, whose favorite comedy group was, you guessed it, Monty Python’s Flying Circus. Python is copyrighted, but the source code is freely available and can be commercially re-sold.

Tags (HTML)

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Tags are commands written into a document that specifies how it should be formatted. In HTML, a tag is represented as

. For example, an HTML file can tell a browser to render text as boldfaced if in the text is written as

text

. Note how the slash in the second tag closes the bookended tags.

Live Thumbnails

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

This is the JavaScript example from the Webmonkey tutorial Make Images Grow and Shrink With JavaScript. This script will allow you to put “live thumbnails” of images on your website. The thumbnails will grow and shrink when users click on them.

Site Optimization Tutorial – Lesson 2

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

In Lesson 1 of this tutorial, we learned how to manipulate images to reduce your download time. Now, it’s time to dig even deeper into the fine art of slimming down those pages.

We’re going to talk about page layout, and that means talking about HTML tables, first and foremost. First, because table-based layouts are the de facto web standard, and foremost because table-heavy designs have a nasty reputation for poor performance.

And CSS layout? It’s faster, better, and smarter. We’ll cover it later. Now, you’re welcome to skip ahead, but The House bets that you’ll keep reading.

CSS is cooler than tables. And smaller. And in the long run, its better. But some CSS-2 layout standards still aren’t showing up the same in every browser. So let’s face it — sometimes right-now compatability trumps future-compatability.

Tables aren’t all bad, anyways. Most designers are taught to design with a grid, so dropping things into a table comes naturally. We’re also fond of their duality; variable-width tables can both define a layout and respond to the unpredictable elements of a page. Being a web designer means coping with unpredictability, and striking a compromise between your design and the user’s flexibility. (Users should be afforded the ability to make fonts larger, for instance). Unfortunately, tables also increase the time it takes to display a web page, and sometimes by a substantial amount.

Tables: Past Performance, Future Returns
Bring it to the Table
Better Structure, Faster Page
CSS:An Overview for Optimizers
Code Size

Tables: Past Performance, Future Returns

Historically, browsers needed to understand a table’s structure before drawing the table’s contents, so that nothing was put on-screen until all of the table’s content was downloaded. How dumb! Even with 99% of a page downloaded, some stubborn browsers wouldn’t even think about laying out a table, until receiving a concluding tag. This foot-dragging was the anathema of dial-up modem users everythwere. Well, back in ’96, it might’ve briefly been celebrated as “cyber” foot-dragging.

Since the advent of IE 5.x, Mozilla 1, and Netscape 6.x, this performance pitfall is automatically avoided. Today’s newer browsers use progressive or “incremental” rendering by default, and will attempt to render tables on a row-by-row basis, rather than pausing and waiting for the tag to begin the process. If a page’s source code relies heavily on tables, and the page downloads in fits and starts, modem users at least have a decent chance of seeing some content on the screen quickly.

Tables perform lamely for another reason, though. As tables get bigger, and nested into one another, the amount of info that needs processing increases exponentially. On mobiles and slower computers, all this processing-intensive work doesn’t come easy, and serious time can pass before a table renders to the screen.

But don’t fool yourself — circa-2003 operating systems require more CPU overhead, and the codebase of today’s web browsers sure ain’t getting smaller. Even Firefox, once a browser, is suddenly a “platform”. And don’t forget the flyweight “thin clients”, web-enabled phones and game consoles, valiantly attempting to take on the wild web. They lack CPU muscle, and don’t show much spirit for parsing table-heavy layouts. Basically, if you’re going to use tables, you still need to do whatever you can to optimize the code. Or, better yet, avoid it altogether.

Accelerating fixed-width tables

If you’ve got a fixed-width table where you’ve explicitly set the TABLE WIDTH attribute to so-and-so many pixels, check this out:

Appling a CSS-1 style of table layout:fixed to a fixed-width table speeds up the display process. With layout:fixed present, browsers use a simpler, faster rendering method to draw a table’s contents, trusting your assertion that everything’s been properly sized-up, already.

Here’s a code example of layout:fixed applied to a table:

Now, don’t go abusing the browser’s trust! If you apply the table layout:fixed style incorrectly, with widths that don’t quite add up, the browser will catch the error during the rendering process and start things over from scratch. Do that, and your tables will appear slower, not faster.

Bring it to the Table

Here’s another nugget of truth: Browsers prefer easy-chew tables. One old-school trick works, though – remembering that lots of little tables appear to render faster than one big, many-rowed table.

If you’ve got a nine-row table that fills a few screens full of information, go ahead and break it into three smaller tables of three rows each. This strategy is particularly beneficial if your web pages require a lot of vertical scrolling. Your audience can read the contents of your first table as other tables continue to load down in the nether regions of your page.

Don’t Trust WYSIWYG Editors

Tables can be a pain, which is one big reason WYSIWYG HTML editors became popular in the first place. However, while HTML editors make it easier to create tables, they can produce amazingly inefficient code.

The layout windows of WYSIWYG editors often make it tough to spot unnecessarily nested tables, improperly sized table elements, or strange, roundabout HTML code. So if you want your tables to be as slim and efficient as possible, but you still want to use your WYSIWYG editor, then budget some time at the end to validate and clean up your code. Once everything looks the way you want it, jump to “Code View” in the WYSIWYG editor, or drop the dirty HTML into a text-editing app and pick over your code until it is nice and clean.

Nested Tables – the old taboo!

One notorious culprit associated with slow-to-the-screen web pages has always been the nested table. A nested table is created when one table is put inside the cell of another table. Of course, with ever-faster computer hardware, nested tables may not get such a bad rap these days. Well, go ahead and call us old-timers, but nested tables are still sucky in our book.

Why the legendary performance hit with nested tables? For starters, browsers have to work double-time on tables. Unlike most page elements, tables absolutely require two passes of browser “reflow” (layout code-crunching), due to their auto-sizing shrink-wrap behavior. Pass #1 assesses what size each table cell would like to be, and Pass #2 determines how big they actually can be, once other elements on the page have been accounted for.

And there’s the rub. A single-nested table requires two passes, plus one more, because the inner table must be partially re-rendered during outer table’s rendering process. Nest three tables inside one another, and that makes for five passes of reflow. Nest five levels deep, and the browser loops through reflow routines nine times.

Fun Fact: Some tables may even require a third reflow pass when put in tricky situations like specified-percentage-height table cells squatting in an un-sized parent table. Woah! Wait – did we just say “Fact” or “Fun Fact”? Oh. Umm, we meant to say “Fact”.

So avoid using nested tables whenever possible, even if it means making minor alterations or simplifications to page layout. (Remind your design team that Photoshop is an image editor, not a HTML-prototyping application) If you must use nested tables, at least keep them simple — try not to nest more than a few levels deep. Even though table rendering speed issues are less problematic on modern PC hardware, table layouts still hamper screen readers and other accessibility-enhanced browsers. Nested tables doubly so. We’re building web pages here, not those little Russian dolls.

Better Structure, Faster Page

Below is the classic web page layout. You’ll notice the branding across the top, navigation down the left side, and content in the remaining part of the page. It’s pretty common for such pages to be constructed using a large table which defines the entire grid. With the branding, navigation, and content tables nested within the overall framework table, this can be a difficult page for the browser to render.

Examples

By making each table independent and concise, any browser can render each element as soon as it finishes reading it. So the first elements of the page appear faster, and the user can take advantage of the features at the top of the page immediately. (Remember, “perceived speed” and “visual accessibility”.)

In the second example, the branding table loads first on the page, followed by the navigation table. And, since we set the alignment of the navigation table to “left”, the content loads next, positioned to the right. The page appears to load faster, and the user has something to see and use almost immediately.

So, as with images, to get the best results with your tables, you need to play around with a variety of solutions until you get a layout that both you and your users can live with. It may seem like a lot of effort just to shave a few seconds off a page’s load time, but competition for user loyalty is fierce, and those seconds can be all that stand between your visitors and the Back button.

CSS:An Overview for Optimizers

Tired of tables yet? (You’re free to shout ‘Hellzyeeeaahh, G!’, without impinging the previous portion of this humble web development narrative.) After all, debugging cross-browser table display issues, or parsing content buried under a mishmash of

s and tags gets old, fast.

Hence the hooplah over CSS.

Cascading Style Sheets is a smart standard, promising precise control over the looks and the layout of websites. Idyllic stuff, indeed, for jaded web workers. Well, CSS isn’t quite Utopia, yet – cross-browser snags and snafus still exist. But it’s a solid leap ahead, especially if you’re keen on creating speedy web sites.

We’ll refrain from re-hashing the many treatises on why separating content from markup code is the bee’s knees (i.e. here, here, and here), but we will repeat this much:It is far easier to redesign or repurpose web content that has been built as such using technologies like CSS, XML, and XHTML. This matters for us speed freaks (in the positive, HTML-optimization sense), because serving different versions of a site is a serious consideration. “Optimized” is relative term for broadband users and mobile phone surfers, for example, and one page format is unlikely to satisfy both audiences. Once you’ve separated the content from a page’s architecture, you can publish to multiple formats or designs without doubling or tripling your workload.

Great resources for getting familiarized with CSS (a.k.a stealing code snippets) include Mulders Stylesheets Tutorial right here on Webmonkey, as well as glish.com, bluerobot.com, and Jeffrey Zeldman’s musings on the topic. To see a kick-ass example of a commercial site that pioneered web-standards-compliant code, look no further than Webmonkey’s sister-site Wired, which uses CSS absolute and relative positioning for almost all of its layout concerns.

Like we said, though, this tutorial focuses on optimization – why CSS layout is faster than table layout, and how to make it seem faster still.

Code Size

Reduced code size probably accounts for 95% of the performance gains you see when jumping from an intricate table-based layout to a smart CSS design. When your source code is shedding kilobytes by the dozen, rendering speed and the like become academic issues.

A CSS layout and text-styling combo is invariably bound to create a smaller page than one laid out with deprecated

happy	happy	happy
s,

and tags. That’s because with CSS, you type fewer characters to create the file, so unsurprisingly, the user downloads fewer characters to get the file.

How big of a difference does this make in the end? That depends on a lot of variables, like how complex a particular page is, but it’s probably worth a good 10K on average. Now, I use the rule of thumb that 2K of code represents one second of download/render/latency time, so we’re talking roughly five seconds. Five whole seconds otherwise wasted staring slack-jawed at a computer screen. Remember, for that great majority of people surfing sober, five seconds can be a palpably dull period of time.

CSS helps webmasters determine the order in which page elements are downloaded and when they appear on the screen. This is fantastic for boosting a site’s visual accessibility and perceived speed. For example, a news site can load the story element first, load decorative page elements next, and finally, load the advertisement, regardless of where these items appear on the page.

The user will still take note of a site’s design quality, as well as the advertisement. What they won’t notice, though, are frustrating delays in loading the page. Remember, if a user senses it’s the sponsorships or fancy decorative elements that make a page sluggish, it’s often the sponsors and the site’s image which suffer most.

How do you prioritize what elements get loaded first with CSS? Just put it at the top of the source code, no matter where it’s positioned on the page. Fisher-Price easy.

You don’t need to go the whole Harley with CSS layout to reap the benefits. Simply using CSS styles on your text, in lieu of tags, saves significant space. If you’re reluctant to migrate a tried-and-tested table layout to CSS-positioning, but mellow with the idea of serving unstyled text to the odd out-of-date browser, give this method a test drive.

By the way, this CSS+tables compromise works best for pages with text content spread across many table cells. Since long-winded font tags () must be repeated in every single table cell, the minimal notation of CSS styles gets leveraged to full effect. A simple “

” does the trick via CSS. Of course, try to use a sensible shorthand when naming CSS classes, and don’t explicitly add class attributes to tags if avoidable – why add more characters to your source code than necessary? Imagine those antiquated font declarations repeated thirty times and it’s easy to imagine the space savings.

The Compromise Method

If you’re still straddling the fence between CSS and tables and you have a minimal number of pages to manage, you might consider serving different page formats to different browsers via browser-detection and server-side scripting. Of course, this immediately doubles the amount of coding, testing, and debugging work that’ll need doing, but it may be worthwhile on a small scale, such as on your site’s homepage or a few heavily-trafficked pages.

Site Optimization Tutorial

Site Optimization Tutorial
Site Optimization Tutorial – Lesson 1
Site Optimization Tutorial – Lesson 2
Site Optimization Tutorial – Lesson 3
Site Optimization Tutorial – Lesson 4

JavaScript Tutorial – Lesson 5

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

Now that you’ve mastered the basics of computer programming, it’s time to refocus on the Document Object Model (DOM). We’ve already seen that the DOM hierarchy starts with a Window object. Inside each Window object is a Document object. We’ll be spending this lesson going through the Document object and seeing how it can be used to get all kinds of information from your users and to dynamically present new information.

We’ve already had a good look at one of the properties of the Document object, the Images array. If you remember back to Lesson 4, the first image in a document can be modified by changing its src property. For example,

 window.document.images[0].src='some_new_picture.gif';

will change the first image in a document to the GIF called some_new_picture.gif. As you might have guessed, each Image in the Image array is itself an object in the DOM. That’s why images[0].src works. It’s saying, get the Image object image[0] from the Images array and set its src property. The whole statement above reads in English, “get the document property of this window, get the first image from the document’s image array, and change its source property to some_new_picture.gif.”

The Image object has lots of other interesting properties. For example, you can have your JavaScript check to see if an image has been completely loaded before doing anything. However, these interesting properties will have to wait for later lessons. Gotta keep you coming back somehow, right? Today, we’ll be focusing entirely on forms and how to use them in JavaScript.

Introduction to Forms
Manipulating the Value of a Text Field
Text Field Events
Form Handlers
Text Field Exercise
Checkboxes
Radio Buttons
Selects
onChange in Select Form Elements
Review of Lesson 5

Introduction to Forms

Forms are part of the HTML 1.0 specification. Many people don’t know about them, however, because there’s a misconception that they’re only useful if you (or someone you know) can do server-side CGI programming. As June points out in her forms tutorial, forms can be fun even if you aren’t a CGI programmer. More important for this tutorial, JavaScript can be used to add all sorts of functionality to forms without the help of server-side CGI.

If you don’t know how forms work, check out Jay’s tutorial and try writing some forms yourself. I’m going to assume that you know the basics.

The first thing you need to know about forms and JavaScript is that forms, like images, are stored in an array of objects. Just like you can refer to the first image on a page by calling it window.document.images[0], you can refer to the first form on a page using window.document.forms[0]. Similarly, just like you can name images, you can name forms. For an example if this form is written like this,

You can refer to the form in either of these two ways:

 var the_form = window.document.forms[0];

 var the_same_form = window.document.first_form;

Although being able to refer to forms is sometimes useful, more often you want to refer to elements inside of forms, such as the text field in the last example. Here’s an example of manipulating the value of a text field.

Manipulating the Value of a Text Field

Click here and mouse over the links below the text field and see what happens.

This magic is performed by changing the value of the text field. The form looks like the one in the last example:

The links that change the text field are:

 Yes, and I know it.

 No!

These are normal mouseovers; the important part is:window.document.first_form.first_text.value='Clap clap!'. This says, “find the form called first_form in the document, find the form element called first_text, and set its value to ‘Clap clap!’.” The second line works similarly. This is very much like changing the src of an image. Instead of having a src, text fields have values.

Other types of form elements can be affected by messing with their values – for example, textareas:

Click here.

The forms and links here are very similar to those above. The form is:



 
 Mouse over below to see the first verse of

 The Webmonkey song, adapted from

 "I Wanna Be Like You" (The Monkey Song)

 from Walt Disney's <cite>The Jungle Book</cite>

 written by Richard M. Sherman and Robert B. Sherman

Notice that the form has a name, form_two, and the textarea has a name as well, the_textarea.

The links are basically the same as what you saw in the text field example:

Part 1

Part 2

The only difference is that instead of assigning a string to the value of the textareas, I assigned variables that I defined in the header. View Source to see that they’re there. I only did this for the sake of neatness, to get those long strings out of the HTML. A well-groomed monkey is a happy monkey. Here’s one of the strings:

 var first_part = "Now I'm the king of the swingersnOh, the jungle VIPnI've reached the top and had to stopnAnd that's what botherin' me";

Notice the "n". This is standard computerese for new lines. In general, because you’re working with HTML, the new line isn’t important. But if you’re writing something in a

 tag, or you’re writing into a textarea, the "n" comes in handy.
In addition to changing the values of form elements, JavaScript allows you to detect events that go on inside of them. Here’s an example of detecting events inside a text field.


 Text Field Events
Text fields understand onBlur, onFocus, and onChange. The onFocus event occurs when someone clicks inside a text field. onBlur happens when somebody moves out of a text field by clicking outside of it, or hitting “tab.” onChange happens when somebody changes what’s in the text field and then moves outside the text field.
Try doing these things in the text field and see what happens in the textarea below it.
Click here.
Here’s how this works. The text field looks like this:


Each of the event handlers calls the function writeIt(), which I’ve defined in the header. The header looks like this:


 Text Field Events

 

 

This should all look pretty familiar to you. The first few lines are the typical JavaScript preamble and the function definition. The first line in the body of the function …
 var word_with_return = the_word + "n";

…. initializes a new variable, word_with_return, and sets it equal to the string that was passed into the function concatenated with a "n". (Remember, the "n" is standard computerese for “new line.”)
The next line …
 window.document.first_form.the_textarea.value += word_with_return;

…. says, “set the value of the textarea to its current value plus the new variable.” This shortcut was covered when we learned about loops. It’s the same as saying:window.document.first_form.the_textarea.value =


  window.document.first_form.the_textarea.value + word_with_return;

 It just takes less time. So far, we've seen a property of text fields and textareas (the value) and some events that they can handle. The remaining thing to know about these elements is the methods that they can handle:blur(), focus(), and select().

Here are some links to show you how focus() and select() work. Beware that they sometimes stop working after the first time:

Click here.

Here are the form and the two links:
 

 

 
  Mouseover to focus

 Mouseover to select

Accessing the methods of a text field is just like accessing the methods of any object:object_name.method(). The name of a text field is window.document.form_name.text_field_name. So, to call the focus() method on the text field above, we call:
 window.document.method_form.method_text.focus();

That’s pretty much all there is to know about text fields and textareas. We’re about ready to try the first exercise for this lesson. First, however, there’s one more thing you need to know about form handlers before you can do the exercise.


 Form Handlers
Forms are objects; they have their own methods, properties, and event handlers. One event handler that you should know about is onSubmit. onSubmit gets called in two situations:if a user clicks on a Submit button, or if a user hits Return in a text field. If these actions are not handled in some way, your JavaScript may behave differently than expected. Try clicking on
Submit and see what happens.
In Netscape, clicking on an unhandled Submit button generally leads to reloading the page. In general, you won’t want this. In order to block this behavior, you need to do this:


 

 

Try it
Generally, return false is a way that JavaScript stops your browser from doing what it would otherwise do. Another example of this is stopping an href from going to the URL assigned to it. For example, the link …
 mattmarg!

…. won’t go anywhere because you’ve returned false on the onClick. Click on this dead link, if you don’t believe me.
This may seem like a weird thing to do, but actually it’s quite common, especially in the case of forms. Here’s an example of using a form to get input from a user. Type something into this text field and hit Return.

Here’s the form:
 

 Who does the monkey love:

 

 

When you hit Return in the text field, the onSubmit handler gets called. It executes the function monkeyLove(), which changes the value in the text field.
If the return false wasn’t in the onSubmit handler, the function monkeyLove() would execute, changing the text field, but then the page would reload, changing the text field back to what it was. To stop this from happening, you need to have that return false in the onSubmit.
Here’s the monkeyLove() function for your perusal:
function monkeyLove()

 {

   var who_it_is = window.document.text_entry_form.monkey_love.value;

   who_it_is = 'The monkey loves ' + who_it_is;

   window.document.text_entry_form.monkey_love.value = who_it_is;

 }

And here’s an example of the same form without the return false, just so you can see what happens.
Once you’ve convinced yourself of the merits of return false, it’s time to try a text-field exercise.


 Text Field Exercise
This exercise is an extension of one we did in Lesson 4. The exercise is to get this textarea to behave like a browser’s Location box. If you type in http://www.webmonkey.com/ or just www.webmonkey.com, it’ll spawn a window that displays the Mattmarg.com Web site.
Click here.
Try getting this to work before viewing source to see a solution. When you’re done, it’s time to move on to checkboxes and radio buttons.


 Checkboxes
Text fields and textareas are just two types of form elements. Others that we’ll look at in this lesson are checkboxes, radio buttons, and selects. Let’s discuss checkboxes first.
Checkboxes have one main property of interest: checked.
If you have a form named the_form and a checkbox named the_checkbox you can see if the checkbox has been checked like this:
var is_checked = window.document.the_form.the_checkbox.checked;

 if (is_checked == true)

 {

   alert("Yup, it's checked!");

 } else {

   alert("Nope, it's not checked.");

 }

As you can see, if a checkbox is checked, the checked property will be true. true is a built-in JavaScript datatype, so you don’t have to put it in quotes when checking it. If the checkbox is not checked, the checked property will be false (also a built-in datatype).
Just like you can read the checked property, you can set the checked property. Here’s an example of checking and setting the checked property of a checkbox.
Here’s the code for the above:


 Checkbox 1

 

 Click to check Checkbox 1

 Click to uncheck Checkbox 1

 Click to see the value of Checkbox 1

Notice that I’m sticking the return false in the href. It stops the page from bouncing around when you click on a link.
Checkboxes have one interesting event handler:onClick. When someone clicks on a checkbox, the onClick event handler goes into action. Here’s an example of it in use.
Click here to check out the Light Switch
This example introduces a few new things. First, there’s form that introduces the onClick checkbox handler:


 The Light Switch

 

When someone clicks on the checkbox, the onClick handler gets triggered and executes the switchLight() function. Here’s the switchLight() function (it’s in the header of this page):
function switchLight()

 {

   var the_box = window.document.form_2.check_1;

   var the_switch = "";

   if (the_box.checked == false) {

     alert("Hey! Turn that back on!");

     document.bgColor='black';

   } else {

     alert("Thanks!");

     document.bgColor='white';

   }

 }

The interesting thing here is the first line:
 var the_box = window.document.form_2.check_1;

This line assigns the checkbox object to a variable. This a handy way to cut down on your typing. It’s also a good way to pass objects as parameters to functions. We’ll see a lot more of that in later lessons.
That’s most of what you have to know about checkboxes. Now let’s learn about  radio buttons.


 Radio Buttons
Happily, radio buttons are almost exactly like checkboxes with respect to JavaScript. The only real difference is in the HTML. Checkboxes are on/off devices. If a checkbox is checked, you can uncheck it. If it’s unchecked, you can check it. Radio buttons are different. Once a radio button is on, it stays on until another one is selected. Then the first one goes off. Here’s a typical radio button set:
Click here.

As you can see, you can’t simply unselect a radio button, you have to choose a new one. With that in mind we can re-do the light switch example with two radio buttons instead of one checkbox:
Click here.
This example looks very much like the checkbox example. The form is:
 

 Light off

 Light on

 

When the first radio button is clicked, the offButton() function is called. That function is:
function offButton()

 {

   var the_box = window.document.form_1.radio_1;

   if (the_box.checked == true)

   {

     window.document.form_1.radio_2.checked = false;

     document.bgColor='black';

     alert("Hey! Turn that back on!");

   }

 }

This is pretty much just like the checkbox example earlier. The main difference is this line:
 window.document.form_1.radio_2.checked = false;

This tells JavaScript to turn off the other button when this button has been clicked. The function that is run when the other button is clicked is similar to this one:
 function onButton()

 {

   var the_box = window.document.form_1.radio_2;

   if (the_box.checked == true) {

     window.document.form_1.radio_1.checked = false;

     document.bgColor='white';

     alert("Thanks!");

   }

 }

There are a few more details about checkboxes and radio buttons, but those can wait until the next set of tutorials. Right now, let’s look at the last type of form element, selects.


 Selects
Selects are the strangest of the form elements we’ll cover in this lesson. There are two primary kinds, pulldown selects and list selects. Here are examples of each:
Click here.
The thing that makes select objects strange is that the whole select is named, but none of the select’s options is. For example, the HTML for the first select looks like this:
 

Notice that the whole select is named pulldown_1, but the individual options aren’t named. This makes it difficult to access individual options.
Luckily, through the magic of arrays and objects, there’s a way to access and change the options of a select. If you wanted to change the second option of the pulldown menu, you’d type:
 window.document.form_1.pulldown_1.options[1].text = 'new_text';

This works because the select element has an options property that is an array of all the select’s options. You can grab one of the options in the array and change its text property. Try it – change the select and then scroll up to see that the pulldown menu actually changed. The second option in the pulldown select should now be *thau*.
In addition to the options property, selects have a property called selectedIndex. When one option in a select has been chosen, the selectedIndex property of the select will be the array number of the selected option. To test this, select one of the options in the list select (the second one) and then check the index. Remember that the first option in the array is option 0. The line I used to check this was:
 check the index.

The form is named form_1, the list select is named list_1. To get the selectedIndex, I looked at window.document.form_1.list_1.selectedIndex. If you want, you can set the selectedIndex like this …
 window.document.form_1.list_1.selectedIndex = 1;

…. and highlight the second option in the list_1 select.
Once you know the index number of the selected option, you can find out what it is:
 var the_select = window.document.form_1.list_1;

 var the_index = the_select.selectedIndex;

 var the_selected = the_select.options[the_index].text;

The selectedIndex property is great when you only have one option selected. What happens when you have more than one option selected? Well, that gets slightly stranger. If you want to know, here’s some information about multiple selects.
Just like the other form elements, the select element has a handler:onChange(). This handler gets called whenever there’s a change to the select. Here’s the example from Lesson 1 to show you how  onChange works with a select.


 onChange in Select Form Elements
Play with this example and then read the blow-by-blow description.
This is a fairly complicated JavaScript, so let’s go through it slowly. First, let’s look at the form itself (note that your browser might wrap that onChange line, but it should be on one line, no spaces, inyour code):
 

 

 

 

This form has two elements, a pulldown select and a list select. The pulldown select has an onChange handler that calls a function called swapOptions(). swapOptions(), which is defined in the header, has one parameter – the selected animal type.
Now let’s check out the header. The first thing that happens is I define a few arrays:
 var dogs = new Array("poodle","puli","greyhound");

 var fish = new Array("trout", "mackerel", "bass");

 var birds = new Array("robin", "hummingbird", "crow");

Notice that the arrays are named the same thing as the animals in the pulldown select. You’ll see why soon. Now let’s look at the function that gets called when the pulldown select is changed:
 function swapOptions(the_array_name)

 {

   var numbers_select = window.document.the_form.the_examples;

   var the_array = eval(the_array_name);

   setOptionText(window.document.the_form.the_examples, the_array);

 }

The function definition includes one parameter:the_array_name. If you pulled the pulldown select to “Fish,” the_array_name will equal the string “Fish.”
The first line in the body of the function sets a variable to refer to the second form element, the list select.
The second line introduces something new:eval(). eval() is a little weird and better left for later lessons. The end result of the second line is that the variable the_array will equal one of the arrays defined earlier. If the_array_name is “Fish,” the_array will equal the Fish array. If you want a description of how this happens, study up on eval.
The third line of the function calls another function called setOptionText(). setOptionText() does the work of setting the values of the list select to the contents of the_array. Here it is:
 function setOptionText(the_select, the_array)

 {

   for (loop=0; loop < the_select.options.length; loop++)

   {

     the_select.options[loop].text = the_array[loop];

   }

 }

This function takes two parameters, a reference to a select element and an array. The first line of the function sets up a for loop, which loops through all the options in the select element. Remember that the options property of a select element is an array of all that select’s options. Because it’s an array, you can find out how many options are in a select using the length property of arrays. That’s how the loop works.
The first time you hit the loop, the loop variable equals 0. The body of the loop then reads:
 the_select.options[0].text = the_array[0];

If you chose “Fish” in the pulldown, the_array[0] will be “trout,” so this line will change the first option in the list select to “trout.” The next time through the loop, loop will equal 1, and the second option in the list select will equal “mackerel.”
There’s one caveat to all this. When you change the text of an option, the size of the select won’t change. So if you change an option’s text to something really long, it’ll probably get cut off.
One way to get around this is to stretch out the select when you first go to it. For example, I did this:
 
Note the period I used to stretch out my select box. It’s sort of cheesy, but it works.
OK, that was a mouthful. If you understand how this example works, you understand a lot of JavaScript, and you’ll have no problem doing your homework assignment for this lesson. Once you’ve done the example and viewed source to see how I did it, go on to this lesson’s review.


 Review of Lesson 5
Today we focused on forms and what you can do with them. We learned:

 Forms and their elements can be named

You can refer to a form element like this:window.document.form_name.element_name

 Text field and textarea form elements have value properties

Refer to the value property like this:window.document.form_name.element_name.value; you can set the value by equating it to something, or get the value

 Text field and textarea elements understand focus(), blur(), and change() event handlers

When you click on a text field or textarea, the focus event handler triggers; clicking out of one of these elements triggers the blur event handler; if you hit Tab or Return after changing an element, onChange() gets triggered

 Forms have an onSubmit() event handler

To stop a form from reloading the page when you click on a Submit button, put onSubmit="return false;" in the  tag

 Checkboxes and radio buttons have a checked property

You can check and uncheck checkboxes and radio buttons by changing their checked property

 Checkboxes and radio buttons have an onClick event handler

Just like links, you can trigger functions when a user clicks on a checkbox or radio button

 Selects have an options property that is an array of that select’s options

Just like any array, you can find the length of the options array by typing window.document.form_name.select_name.options.length

 You can change the text of an option by messing with its text property

To change the text of the first element of a select you’d type window.document.form_name.select_name.options[0].text='new text';

 You can find out which option was selected using the selectedIndex property of the select element

window.document.form_name.select_name.selectedIndex returns the array number, you can then type window.document.form_name.select_name.options[that_number].text to find out what was actually selected

 Selects have onChange event handlers

If someone changes the thing highlighted in a select, the onChange handler gets triggered

 You can change the URL of a window using window.location.replace('new url');

This was in the homework

 You can create a new option for a select element using new Option

Since each option in the options array of a select is an object, you can use new to create a new Option; then you can stick this option into the options array


Today was packed, and it concludes this set of five lessons. We covered a lot of territory, from the basics of computer programming to a major portion of the JavaScript DOM. Not surprising, there’s still much more to learn. We only covered part of the DOM, and there are more than a few interesting JavaScript objects to study. We also didn’t talk too much about making our own objects, nor did we cover all the interesting properties of the Windows object.
Obviously this is a plug for the next set of lessons. So after you give yourself a minute to catch your breath, dive right into my  Advanced JavaScript Tutorial.

Manage Transactions in MySQL – Lesson 2

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

In Lesson 1 of this tutorial, you leaned how to approximate transaction-like behavior with MyISAM tables. In this lesson, you’ll see how you can achieve real transactions with each of MySQL’s three transactional table types: BDB, InnoDB, and Gemini. But before I get to specifics surrounding each table, I need to revisit the notion of locking.

Remember that MyISAM supports only table-level locks of two types: read locks and write locks. The transactional tables types offer more granular locking mechanisms: They can place locks on specific subsets of data. You’ll read more about each table’s locking mechanisms as I get to them in the following pages.

Using BDB Tables
Working with Gemini Tables
Using InnoDB Tables
The Right Choice for You

Working with MySQL’s Transactional Table Types

Transactional table types can apply two types of locks. These are known as shared locks and exclusive locks. A shared lock is similar to the MyISAM read lock. When a client places a shared lock on data, other clients cannot alter that data with UPDATE or DELETE statements, but they can read the locked data via SELECTs. When a client gains an exclusive lock, other clients can neither alter the locked data via UPDATEs and DELETEs, nor can they read the data with SELECTs.

Before we get to the actual code, there’s a MySQL setting I need to mention. MySQL contains an environment variable called autocommit. By default, autocommit is set to 1. When autocommit is set to 1, you cannot run transactions with any of the MySQL table types. In this mode, MySQL treats every SQL statement as its own transaction. To use groups of statements as transactions you need to turn autocommit mode off. So in all the code snippets that follow, you’ll notice that I start each with the line:

SET autocommit=0;

OK, now on to the rest of the code, starting with BDB tables.

Using BDB Tables

To check if you have BDB tables available, run the following query:

 mysql> show variables like '%have%';

 +---------------+-------+

 | Variable_name | Value |

 +---------------+-------+

 | have_bdb      | YES   |

 | have_innodb   | YES   |

 | have_isam     | YES   |

 | have_raid     | NO    |

 | have_symlink  | YES   |

 | have_openssl  | NO    |

 +---------------+-------+

 6 rows in set (0.00 sec)

If the first row in the listing says “no” you don’t have BDB installed. If you’ve got either InnoDB or Gemini, that’s fine — you can just use one of those, and I’ll talk about these tables soon (but please stick around, what you learn here will be useful there). If you decide to work with BDB tables, you can either install a MySQL-Max binary or recompile MySQL from source using the --with-bdb flag. BDB tables are available for most operating systems, including Windows, Linux, and Mac OS X.

To create BDB tables, you can include type=bdb at the end of the CREATE statement. For example:


 create table inventory(

     product_id int not null primary key,

     in_stock int not null

 )type=bdb;

Or, if you wish to move data from a MyISAM to a BDB table, you can run an ALTER statement, like so:



ALTER table table_name type=bdb;

Note that before you run an ALTER statement like this, you should backup the table. This type of ALTER statement actually dumps the table data, creates a new BDB table, and then loads the dumped data into the table. It’s an involved process that can fail, and if it does fail you want to be protected. Also be prepared to wait a while. If you’ve got large table, the dump-and-reload process can take a bit of time.

BDB tables offer page-level locking. What’s a page? It’s a group of rows. The exact number of rows in a page varies depending on the number of rows in your tables, the operating system in use, and other factors. During a transaction, MySQL will apply a lock to a page worth of data. All other rows are unaffected by locks and ready to process whatever queries you throw at them.

Page-level locking is a vast improvement over the table-level locking used by MyISAM tables. If only groups of rows — small subsets of whole tables — are locked by a single client, that means many clients can access different portions of the table simultaneously. In fact, it’s acceptable, even commonplace, to have many clients applying various locks to different portions of a table at the same time. The simultaneous access of data by different clients is usually referred to as concurrency. In database land (where the men have hairless backs and the women shapely legs) the greater the concurrency the better.

One of the great things about transactions is that for the most part you don’t need to worry about manually applying the locks. Just start a transaction, run your SQL statements as you normally would, and the clever MySQL engine will mostly take care of the locking for you. Neat-o!

Take a look at a simple transaction in a BDB table working with the following table:

mysql> select * from inventory;

 +------------+----------+

 | product_id | in_stock |

 +------------+----------+

 |          1 |       24 |

 |          2 |       47 |

 +------------+----------+

 2 rows in set (0.05 sec)

To see the effect of a transaction, open up two copies of the command-line client. In one, start a transaction and run a SELECT on the first row:

 mysql> set autocommit=0;

 mysql> begin work;

 mysql> select * from inventory where product_id=1;

Now in the second client, start a transaction and try to update the row 1.

 mysql> set autocommit=0;

 mysql> begin work;

 mysql> update inventory set in_stock=23 where product_id=1;

You’ll see that the second client, the one trying to do the UPDATE, doesn’t respond. That’s because the first client has a share lock on that row. To release the lock, commit the transaction in the first client:

mysql> commit;

You’ll notice that the second client is immediately freed to run the update operation.

Take a look at the following improvement to the pseudo-code I used in Lesson 1 of the tutorial. Note the use of the BEGIN WORK-COMMIT/ROLLBACK syntax.

 set autocommit=0

 INSERT query into buyers table.

 run last_insert_id() to get user_id

 BEGIN WORK

 run INSERT into orders table

 run last_insert_id() to get order_id

 for each of the items in the order

     get quantity from the inventory table

     if quantity is > 0

         insert into order_items table

         update inventory table subtracting the ordered item

     elseif quantity = 0

         set error variable

 if error variable is not set

     update orders table with the current order_id,

     adding the order_total



     COMMIT

 else

     ROLLBACK

     output error

Pretty nice, eh? Much cleaner than the MyISAM transaction-equivalent, I think. Keep in mind that you get all the ACID properties with this code if you’re using BDB tables. There is only one line of this code that doesn’t really work well and needs to be improved.

Notice that for each item in the order, I first check the quantity from the inventory table. That quantity will come from a SELECT statement, something like SELECT in_stock FROM inventory WHERE product_id=1. But in most cases, the inventory is going to change just after this SELECT is run. If there’s sufficient quantity in stock, this person is going to buy the item and therefore the quantity listed in the table will decrement by one when the transaction is complete. You’d hate to see other clients get data that will be inaccurate in a matter of milliseconds.

In a case like this, you’d be much better off putting an exclusive lock on a page containing the row in question until the transaction is complete. Remember, with an exclusive lock, all other clients are forbidden from even reading the locked rows. But unfortunately, BDB tables have no way to execute exclusive locks on pages of data. Only by instituting a table-wide write lock can you safeguard the data in the inventory table.

When revised with the table-wide write lock the pseudo-code looks like this:

 set autocommit=0

 INSERT query into buyers table.

 run last_insert_id() to get user_id

 BEGIN WORK

 run INSERT into orders table

 run last_insert_id() to get order_id

 LOCK TABLES inventory WRITE

 for each of the items in the order

     get quantity from the inventory table

     if quantity is > 0

         insert into order_items table

         update inventory table subtracting the ordered item

     elseif quantity = 0

         set error variable

 UNLOCK TABLES;

 if error variable is not set

     update orders table with the current order_id,

     adding the order_total



     COMMIT

 else

     ROLLBACK

The LOCK TABLES command here is a bit messy. But with the other two MySQL tables you won’t have to worry about this kind of lock.

Working with Gemini Tables

It’s difficult to talk about Gemini tables without touching on the controversy surrounding the maker of the Gemini table, NuSphere. The NuSphere corporation is currently in a legal dispute with MySQL AB, the folks who code the MySQL core engine. The issues include copyright infringement and abuse of the GNU GPL. You may want to read further about these issues before choosing the Gemini table type.

Gemini offers a more granular level of locking than BDB. With Gemini (and InnoDB, which I’ll discuss momentarily), you get the advantage of row-level locking. With Gemini, you can apply both share and exclusive locks to one row at a time. A row-level locking scheme will generally achieve higher concurrency than page-level locking, and much greater concurrency than table-level locking.

You can check if you have Gemini installed by running show variables like '%have%'. And if you don’t have Gemini, you can get an installer that includes MySQL, PHP, mod_perl and other goodies from the NuSphere website. Note that the most current release of the Gemini table seems to have some bugs running on Windows 98, so if any of the following experiments crash your NuSphere MySQL installation on Windows 98, don’t blame me.

To create Gemini tables include the type=gemini syntax at the end of the CREATE statement, and to transfer a current table to Gemini, run an ALTER TABLE query. The same caveats I mentioned for BDB apply here. For example:

	 create table inventory(

     product_id int not null primary key,

     in_stock int not null

 )type=gemini;





 ALTER table table_name type=gemini;

Unlike BDB, Gemini tables implement both shared and exclusive locks. If a thread runs an UPDATE or DELETE statement on a row, Gemini will place an exclusive lock on that row, preventing other threads from either reading or altering the locked row until the transaction is complete. If you think about it, this makes perfect sense. If a row is about to change, other threads should be protected from seeing potentially inaccurate data.

If a thread runs a SELECT statement on a row, a shared lock will be placed on that row so other threads can read the row with SELECTs but they won’t be able to alter the row with UPDATE or DELETE statements.

You can do some quick experiments with Gemini tables to see how this locking works. Assume you have the following Gemini table.

mysql> select * from inventory;

 +------------+----------+

 | product_id | in_stock |

 +------------+----------+

 |          1 |       24 |

 |          2 |       47 |

 +------------+----------+

 2 rows in set (0.05 sec)

Open two copies of the command-line client. In the first start a transaction, then run a SELECT on row 1.

 mysql> set autocommit=0;

 mysql> begin work;

 mysql> SELECT * FROM inventory WHERE product_id=1;

Now in the second client, start a transaction and try two statements, a SELECT and an UPDATE.

 mysql> set autocommit=0;

 mysql> begin work;

 mysql> SELECT * FROM inventory WHERE product_id=1;

 mysql> UPDATE inventory SET in_stock=23 WHERE product_id=1;

You’ll see that the SELECT executes immediately, but the UPDATE doesn’t execute. The UPDATE won’t execute until you COMMIT or ROLLBACK the transaction started in the first client, which releases the shared lock.

You can re-run this experiment trying an UPDATE in the first client. You’ll notice that the second client is prevented from reading the locked row with a SELECT. When a client runs an UPDATE statement, it gets an exclusive lock on that row.

When I discussed BDB tables, I pointed out that at times when inventory numbers are changing fast, you need a SELECT to obtain an exclusive lock so your users access the most up-to-date information. When you run a SELECT on the inventory table to find out the number of items currently in stock, you’re better off locking out all other threads from reading that row because that number is likely to change very quickly — an UPDATE will almost always follow that SELECT.

With Gemini tables, you can get a exclusive lock while running a SELECT by using the FOR UPDATE keywords. For example.

SELECT * FROM inventory WHERE product_id=1 FOR UPDATE

Using this added power, the shopping cart pseudo-code can be re-written like so:

 set autocommit=0

 INSERT query into buyers table.

 run last_insert_id() to get user_id

 BEGIN WORK

 run INSERT into orders table

 run last_insert_id() to get order_id

 for each of the items in the order

     get quantity from the inventory

     table with SELECT ... FOR UPDATE



     if quantity is > 0

         insert into order_items table

         update inventory table subtracting the ordered item

     elseif quantity = 0

         set error variable

 if error variable is not set

     update orders table with the current order_id,

     adding the order_total



     COMMIT

 else

     ROLLBACK

This is much cleaner, and much safer, than non-transactional code. And you can do something similar with InnoDB tables.

Using InnoDB Tables

InnoDB offers row-level locking and works on a wide variety of operating systems, including most UNIX variants, MacOS X, and Windows. This table type is now included by default in most MySQL installations, so if you get current binary from mysql.com, you’ll have InnoDB tables. You can check if you have InnoDB installed by running SHOW VARIABLES LIKE '%have%';.

You can create InnoDB tables by using type=innodb in the CREATE statement or by running an ALTER TABLE command. For example:

 create table inventory(

     product_id int not null primary key,

     in_stock int not null

 )type=innodb;





 ALTER table table_name type=innodb;

The InnoDB transaction model is not quite as straightforward as the Gemini model. If you don’t understand how InnoDB implements transactions, you could end up with some serious problems with your data.

InnoDB uses what’s called a multi-versioning concurrency model. Essentially, this means that each transaction is locked to a view of the data at a specific point in time. When a thread initiates a transaction, InnoDB gets a snapshot of the data based on the exact moment the transaction started. To understand how this works, take a look at the following example. You have a simple InnoDB table:

 mysql> select * from inventory;

 +------------+----------+

 | product_id | in_stock |

 +------------+----------+

 |          1 |       24 |

 |          2 |       47 |

 +------------+----------+

In one copy of the command line client, you start a transaction:

 mysql> set AUTOCOMMIT=0;

 mysql> begin work;

This thread now has a snapshot of the table seen above. If you were to then open another copy of the client and start another transaction, that second client would have the same snapshot of the same table. At this point, the first client runs an UPDATE statement and commits the transaction.

mysql> UPDATE inventory set in_stock=23 WHERE product_id=1

mysql> commit;

Even after this COMMIT, the second client will not see the results of the UPDATE. The second client receives a snapshot of the data at the moment its transaction began. Until the second client finishes its transaction (with a COMMIT or ROLLBACK), it will not be able to view the changes implemented by other threads that took place while the transaction was active.

Things get really sticky if the second client was also running an UPDATE on the same row. If the first and second clients start their transactions at the same time, they would get the same snapshots of data. The first client would run an update, WHERE order_id=3, but the second client would be unaware of the change. The second client could then run its own update, UPDATE WHERE order_id=3. After both of these clients commit their transactions, only one of the values can survive. As it turns out, the last one to COMMIT wins.

As you can see, this is potentially a dangerous situation. If you’re not careful, some of your threads could see out-of-date information.

But there are steps you can take to make sure the rows obtained by your transactions are up to date. It may not surprise you that staying current involves locking. With InnoDB, threads can apply the same types of locks that were available in Gemini.

In Gemini tables, when you run a SELECT within a transaction, a share lock is placed on the rows read by the SELECT. However, by default, InnoDB does not place any locks on rows during a SELECT. But you can let InnoDB know that you want to obtain a share lock by the adding the clause LOCK IN SHARE MODE at the end of a SELECT.

When a thread issues a SELECT with a LOCK IN SHARE MODE clause, InnoDB goes beyond the snapshot of data taken at the start of the transaction and looks for the latest committed data. If another thread is operating on that data (via an UPDATE, DELETE, or another LOCK IN SHARE MODE), the first thread won’t be able to obtain the share lock and will wait until the other thread finishes its transaction and releases its locks. By attempting to obtain the share lock and receiving the latest committed data, the LOCK IN SHARE MODE clause ensures that the data read by a SELECT will be accurate and up to date.

If you’d like to see how this works, try the following, using the same table shown above. In one client, start a transaction and then run an UPDATE statement:

 mysql> set autocommit=0;

 mysql> begin work;

 mysql> update inventory set in_stock=22 where product_id=1;

Now in the second client, run two different SELECTs. The first you will run without the LOCK IN SHARE MODE clause. Try SELECT * FROM inventory. This will execute immediately, but the data is potentially inaccurate because there’s no telling if the first client will COMMIT or ROLLBACK the transaction. If you alter that SELECT statement to include the LOCK IN SHARE MODE clause, the client will not respond until the first client issues a COMMIT or ROLLBACK.

Threads can obtain exclusive locks in SELECT statements by using the same FOR UPDATE clause that is used with Gemini.

The pseudo-code shown for Gemini will also work for InnoDB tables. But be very careful when writing your SELECT statements for InnoDB. You want to make sure you’re getting the latest, most accurate data.

The Right Choice for You

At this point, InnoDB is the most logical choice for most. It offers row-level locking, is available on most every operating system, and is getting a lot of support from MySQL AB. InnoDB is also the first table type to enforce foreign key constraints. But if you’re working with an installation that has support of one of the other transactional tables, both of those will work just fine.

When you decide on the table type you wish to work with, you’ll have more technical matters to consider. You should read everything the MySQL manual has to say on the table type you end up using.

Pay especially careful attention to your logs. The transactional tables use logs to help recover from crashes. If a hard-disk failure causes a crash on your system, you could be in trouble if your logs are on the same hard disk as your MySQL data.

If you’re unhappy with the types of locks initiated by specific statements, you can adjust the locking behavior of Gemini and BDB table with the SET TRANSACTION command. I won’t cover it in detail here because the defaults discussed in this tutorial are usually preferable. Note that InnoDB tables are unaffected by SET TRANSACTION command.

Transactions are a great improvement to the MySQL database. If you’re not using them now, consider using them in the future. Because when that backhoe works it way through your power cord, you’ll be awfully glad you did.

Webmonkey » wiki

Ajax for Beginners

What is Ajax?

Making Your Own

Getting Results

CPC

Hover

Write Symbols and Special Characters in HTML

Python

Tags (HTML)

Live Thumbnails

Site Optimization Tutorial – Lesson 2

Contents

Tables: Past Performance, Future Returns

Bring it to the Table

Better Structure, Faster Page

CSS:An Overview for Optimizers

Code Size

JavaScript Tutorial – Lesson 5

Contents

Introduction to Forms

Manipulating the Value of a Text Field

Text Field Events

Form Handlers

Text Field Exercise

Checkboxes

Radio Buttons

Selects

onChange in Select Form Elements

Review of Lesson 5

Manage Transactions in MySQL – Lesson 2

Contents

Working with MySQL’s Transactional Table Types

Using BDB Tables

Working with Gemini Tables

Using InnoDB Tables

The Right Choice for You