Using jquery to simplify Ajax development get started with Ajax _jquery

This article will show you the philosophy of jquery, explore his features and features, and do some Ajax examples and how to use Plug-in (Plug-ins) to extend jquery.

1. What is jquery?

jquery is a very good JavaScript library, it was born in 2006, from the hands of John Resig. Whether you are a JavaScriptNovice, but want to try Dom (Document Object Model) and the complexity of Ajax, or you are a JavaScript expert, but tired of repeatedly repeating the tasteless dom and Ajax scripts, jquery will be your choice.

jquery will help you keep the code simple and concise. You don't have to write a bunch of repetitive loops or dom call scripts, and with jquery, you'll quickly find the key points, and you can express your thoughts in minimal code.

The philosophy of jquery is simple: simplicity, reusability. When you understand and agree with this idea, you can begin to realize how easy it is to use jquery to make your programming enjoyable!

2. Some simple concepts

Here's a simple example that shows you how jquery affects the code you write. What you do is simple, such as adding a click Response event to all the links in a particular area on the page, and you can use the usual JavaScript and Dom to write, code see LISTING1:

Listing 1. DOM Scripting without JQuery

var external_links = document.getElementById (' external_links ');
var links = external_links.getelementsbytagname (' a ');
for (Var i=0;i < links.length;i++) {
var link = links.item (i);
Link.onclick = function () {
return confirm (' Your are going to visit: ' + this.href ');
};
}

If you use jquery, you do the following:

Listing 2. DOM Scripting with JQuery

$ (' #external_links a '). Click (function () {
return confirm (' Your are going to visit: ' + this.href ');
});


It's amazing, isn't it? With jquery, you can quickly find the key points and just express what you need to express,
Without the need for Rowe to be wordy. There is no need to loop through these elements, and the Click () function can handle all of this. And you don't want to thank too much for manipulating Dom's code,
All you need is to use a few characters to define the element you are looking for.

Take a look at how this code works, with a little bit of skill. First, see the most powerful function in the $ () function--jquery. Most of the cases,
You use this function to select elements from the document. In this example, use this function to pass with some cascading style sheets (cascading style sheets,css)
The syntax of the string, jquery can easily find this element.

If you know a little bit about the basic CSS selector, I think this syntax should look pretty familiar. In Listing2,#external_links用来寻找带有id为
external_links的元素.接下来的空格表示jQuery要找到在#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--
用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.

The $ () function returns a JQuery object that contains all the elements that match the CSS selector. The concept of a jquery object is like an array, but it may contain many jquery functions. For example, you can call the Click function to bind a click event response to each element in the jquery object.

You can also pass an element or an array of elements to the $ () function, which packs all the elements into a jquery object. You might want to apply this feature to a Window object. For example, you might use this function to load events like this:

Window.onload = function () {
  Do this stuff the page was done loading
};

If you use jquery, you can write this:

$ (window). Load (function () {
  Run this when the whole page has been downloaded
});

As you know, it is extremely painful to wait for a window to load because the entire page must be loaded, including all the pictures on the page. In some cases, you need to load the picture first,
But most of the time, you probably just need to see the Hypertext Markup (HTML). jquery solves this problem by creating a very special event ready on the document.
Use the following methods:

$ (document). Ready (function () {
  Do this stuff the HTML was all ready
});

This code creates a jquery object for the document element, and then calls this instance when the HTML DOM document is ready. You can call this function infinitely. Other than that
In real jquery style code, this function also has an abbreviated form. Simply passing a function to the $ () function:

$ (function () {
  Run this when the HTML was done downloading
});

By now, I've shown you three different ways to use the $ () function. The fourth way, you can create an element using a string. The result is a jquery object that contains this element. Listing3 shows an example that adds a section to the page:

Listing 3. Creating and appending a simple paragraph

	
$ (' <p></p> ')
  . html (' Hey world! ')
  . css (' background ', ' yellow ')
  . Appendto ("body");

As you can see from the example above, jquery also has a powerful function of methodchaining, and each time you call a method on a jquery object, this method will also return a jquery object. This means that if you need to invoke multiple methods on a jquery object, you don't have to write the CSS selector repeatedly, like this:

$ (' #message '). CSS (' background ', ' yellow '). html (' hello! '). Show ();

3.jQuery makes Ajax incredibly simple

I'm afraid the use of jquery,ajax will not be easy. jquery has a series of functions that can make simple things really simple and complicate things to be as
of simplicity.

One common use of Ajax is to load a section of HTML code into an area on a page. To implement this, you simply select the element and then use the load () function.
Here is an example to update some statistics.

$ (' #stats '). Load (' stats.html ');

Typically, you might want to pass some parameters to a server-side page. You might have guessed that using jquery would be very easy. You can choose to use $.post () or $.get (), depending on your specific needs, of course. If necessary, you can pass an optional data object and a callback function. Listing4 is a simple example of sending data and using callback functions:

Listing 4. Sending data to a page with Ajax

	
$.post (' save.cgi ', {
  Text: ' My string ',
  Number:23
}, function () {
  Alert (' Your data has been saved. ');
});

If you really want some complex Ajax code, that's using the $.ajax () function. You can specify the data type as XML, HTML, script, or JSON, and JQuery will automatically prepare the results for you once your callback function can use the data immediately. You can also set,,, and beforeSend error success complete callback functions to give users more hints about the Ajax experience. In addition, there are some parameters that allow you to set the timeout for the AJAX request or the "last change" status of a page. Listing5 shows a simple example of getting an XML document and using some of the parameters I mentioned above:

Listing 5. Complex Ajax Made Simple with $.ajax ()

	
$.ajax ({
  URL: ' Document.xml ',
  Type: ' Get ',
  DataType: ' xml ',
  timeout:1000,
  Error:function () {
    Alert (' Error loading XML document ');
  },
  Success:function (XML) {
    Do something with XML
  }
});

When you get XML feedback successfully, you can use jquery to traverse the XML document, just like you do with HTML. This makes it easy to manipulate an XML file and consolidate content onto the page. Listing6 expands the success function, adding a list entry on the page based on each <item> in the XML document.

Listing 6. Working with XML using JQuery

	
Success:function (XML) {
  $ (XML). Find (' item '). each (function () {
    var Item_text = $ (this). text ();

    $ (' <li></li> ')
      . HTML (Item_text)
      . Appendto (' ol ');
  });
}