Jquery start point: Ajax (4)

In this section, we have written a small Ajax application, which can rate something (translated as keel Note: voting for something), just as we saw on Youtube.com.
First, we need some servers.CodeIn this example, a PHP file is used to read the rating parameter and return the total number and average number of rating. Let's take a look at the rate. PHP code.
Although these examples can be implemented without Ajax, We will not do that. We use jquery to generate a div container with the ID "rating ".

$ (Document). Ready (function (){
//
Generate Markup
VaR ratingmarkup = ["lease rate:"];

For (VAR I = 1; I <= 5; I ++ ){

Ratingmarkup [ratingmarkup. Length] = "<a href = '#'>" + I + "</a>
";
}
// Add markup to container and applier click handlers
To anchors
$ ("# Rating"). append (ratingmarkup. Join ('')
). Find ("A"). Click (function (e ){
E. preventdefault ();

// Send requests
$. Post ("rate. php", {rating:
Functions (this).html ()}, function (XML ){
// Format
Result
VaR result = [

"Thanks for rating, current average :",

$ ("Average", XML). Text (),
", Number
Votes :",
$ ("Count", XML). Text ()

];
// Output result

$ ("# Rating" pai.html (result. Join (''));
});

});
});

This code generates five links and appends them to the "rating" container. When one of the links is clicked, the score indicated by this link is sent to rate as the rating parameter. PHP. Then, the results will be passed back from the server in XML format and added to the container to replace these links.

If you do not have a webserver installed with PHP, you can look at this online example.
Examples implemented without javascript can be accessed
Softonic.de click "Kurz bewerten! "

More Ajax methods can be found here, or you can refer to the Ajax filed
Under
Ajax.

(Translator's note: This online instance is still relatively slow to access from China. After you click it, it will take a while to see the result. You can consider modifying it, such as adding loading, after voting, add the return link for voting. In addition, there are still many areas to be further digested in this example. For more information, see the API documentation .)

An issue that often occurs when using Ajax to load content is: when loading an event handle to an HTML document, you also need to apply these events on the loaded content, you have to apply these event handles after the content is loaded. To prevent repeated code execution, you may use the following function:

$ (Function (){
VaR
Addclickhandlers = function (){

$ ("A. clickmetoloadcontent"). Click (function (){

$ ("# Target"). Load (this. href, addclickhandlers );
});

};

Addclickhandlers ();
});

Currently, addclickhandlers is executed only once after Dom loading is complete.
After the link of this style is loaded.

Note that the addclickhandlers function is defined as a local variable rather than a global variable (for example: Function
Addclickhandlers ()
{...}) To prevent conflicts with other global variables or functions.

Another common problem is the callback parameter. You can use an additional parameter to specify the callback method. The simple method is to include this callback method in another function:

// Get some data
VaR foobar = ...;
//
Specify handler, it needs data as a paramter
VaR handler = function (data)
{
...
};
// Add click handler and pass foobar!
$ ('A'). Click (
Function (event) {handler (foobar );});

// If you need the context of
Original handler, use apply:
$ ('A'). Click (function (event ){
Handler. Apply (this, [foobar]);}
);

After using simple Ajax, we can think that it is already very "Web2.0", but till now, we still have some cool effects. These results will be discussed in the next section.

Links to this chapter:

• Jquery Ajax Module
• Jquery
  API: Contains description and examples for append and all other jquery
  Methods
• Thickbox: A jquery plugin that uses jquery to enhance the famous
  Lightbox