jQuery starting tutorial - using AJAX

In this part we wrote a small AJAX application that can rate something (Keel's Note: vote for something), just like what you see on youtube.com.
First we need some server-side code. In this example, a PHP file is used to read the rating parameter and return the total number and average of ratings. Take a look at the rate.php code.
Although these examples can also be implemented without using AJAX, it shows that we will not do that. We use jQuery to generate a DIV container with the ID "rating".$(document).ready(function( ) {G // generate markup
var ratingMarkup = ["lease rate:"];
for (var I = 1; i & lt; = 5; i ++) {
ratingMarkup.Length] = "& lt; a hREF = = '#'>" + i + " ";
              }
                                                                                                                                                                                                                                      ​ ).find("a").click(function(e) {
                                            e.preventDefault(); }, Function (XML) {
// Format Result
Var Result = [
"" than "" than "thanRRENT AVERAGE:",
$ ("Averay", xml) .text (), number of votes: " ,
                                                                                                                    ​                                                                                    $("#rating").html(result.join(''));
}); This code generates 5 links and appends them to the container with the id "rating". When one of the links is clicked, the score indicated by the link will be sent to rate.php in the form of the rating parameter. , then the results will be returned from the server in XML form and added to the container to replace these links.

If you don’t have a webserver with PHP installed, you can take a look at this online example.
For examples that do not use javascript, you can visit softonic.de and click "Kurz bewerten!"

More AJAX methods can be found here , or take a look at the AJAX filed under AJAX.

(Translator's Note: This online instance is relatively slow to access from China. It takes a while to see the results after clicking. You can consider modifying it, such as adding Loading, adding a return link for re-voting after voting, etc. In addition, there are still many things that need to be further digested in this example. If you don’t understand, please refer to the API documentation.)

A common problem when using AJAX to load content. The problem that occurs is: when loading an event handler into an HTML document, you also need to apply these events on the loaded content. You have to apply these event handlers after the content is loaded. To prevent repeated execution of code, you may use The following function: $(function() {
var addClickHandlers = function() {
                                                             s );
                 });}); Now, addClickHandlers is only executed once after the DOM is loaded, which is every time the user clicks a link with the clickMeToLoadContent style and the content is loaded.

Please note that the addClickHandlers function is defined as a local variable, and Not a global variable (such as: function addClickHandlers() {...}). This is done to prevent conflicts with other global variables or functions.

Another common question is about the parameters of the callback. You can specify the callback method through an additional parameter. The simple way is to include the 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 the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );use After simple AJAX, we can consider it to be very "web2.0", but so far, we still lack some cool effects. The next section will talk about these effects.

For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!