Simplify Ajax development using jQuery Getting started with Ajax development_jquery

This article will lead you to understand the philosophy of jQuery, discuss its features and functions, and provide some ajax examples and how to use plug-ins to extend jQuery.

1. What is jQuery?

jQuery is an excellent Javascript library. It was born in 2006 and was created by John Resig. Whether you are a javascript newbie, but want to try the complexity of DOM (Document Object Model) and Ajax, or you are a javascript expert, but are tired of repeating it over and over again For tasteless DOM and Ajax scripts, jQuery will be your best choice.

jQuery will help you keep your code simple and concise. You no longer have to write a lot of repetitive loops or DOM call scripts. Using jQuery, you will quickly find the key points and express your ideas with the least code.

jQuery’s philosophy is actually very simple: simple and reusable. When you understand and agree with this idea, you can begin to realize how easy and enjoyable using jQuery can make your programming!

2. Some simple concepts

Here is a simple example to show you how jQuery affects the code you write. What you do is actually very simple, such as adding a click response event to all links in a certain area on the page. You can use general Javascript and DOM to write it. See Listing1 for the code:

Listing 1. DOM scripting without jQuery

var external_links = document.getElementById('external_links');<br>var links = external_links.getElementsByTagName('a');<br>for (var i=0;i < links.length;i++) {<BR>  var link = links.item(i);<BR>  link.onclick = function() {<BR>    return confirm('You are going to visit: ' + this.href);<BR>  };<BR>}<br><br>如果使用jQuery的话实现如下：<br><br><STRONG>Listing 2. DOM scripting with jQuery</STRONG><br><br>$('#external_links a').click(function() {<BR>  return confirm('You are going to visit: ' + this.href);<BR>});<br><br><BR>很惊讶，是吧？使用jQuery的话，你可以很快找到关键点，并且只需要表达你需要表达的，<BR>而不需要罗里罗嗦。不需要对这些元素进行循环，click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码，<BR>你需要的仅仅是使用很少的字符定义你要找的那个元素。<br><br>来看一下这段代码是如何工作的，有点小技巧。首先，看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,<BR>你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(Cascading Style Sheets,CSS)<BR>语法的字符串,jQuery可以很方便的找到这个元素.<br><br>如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,<CODE>#external_links用来寻找带有id为</CODE><CODE><BR>external_links的元素.接下来的空格表示jQuery要找到在</CODE><CODE>#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--<br>用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.

The

$() function returns a jQuery object containing all elements matching 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 to each element in the jQuery object.

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

window.onload = function() {<br>  // do this stuff when the page is done loading<br>};

If you use jQuery, you can write like this:

$(window).load(function() {<br>  // run this when the whole page has been downloaded<br>});<br><br>如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片. 某些情况下,你需要首先加载图片,<br>但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,<br>使用方法如下:<br><br>$(document).ready(function() {<br>  // do this stuff when the HTML is all ready<br>});<br>

This code creates a jQuery object of the document element, and then calls this instance when the html DOM document is ready. You can call this function an unlimited number of times. Additionally,
In true jQuery style code, this function There is also an abbreviated form. Simply pass a function to the $() function:

$(function() {<br>  // run this when the HTML is done downloading<br>});

So far, I have shown you three different ways to use the $() function. In the fourth way, you can create an element using a string. The result is a jQuery object containing this element. Listing 3 shows an example of adding a paragraph to the page:

Listing 3. Creating and appending a simple paragraph

	<br>$('<p></p>')<br>  .html('Hey World!')<br>  .css('background', 'yellow')<br>  .appendTo("body");<br>

As you can see from the above example, jQuery also has a very powerful feature called method chaining (method chaining). Every time you modify a jQuery object Calling a method will also return a jQuery object. This means that if you need to call multiple methods on a jQuery object, you do not need to write the css selector repeatedly, you can look like this:

$('#message').css('background', 'yellow').html('Hello!').show();<br><br><strong>3.jQuery让Ajax变得异常简单</strong><br><br>使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能<br>的简单.<br><br>Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.<br>下面是个例子,用来更新一些统计信息.<br><br>$('#stats').load('stats.html');

Usually, you may need to pass some parameters to the server-side page. As you may guess, it is very simple to use jQuery. You can choose to use $.post() or $.get(), of course, it depends on your specific needs. If necessary, you can pass an optional data object and a callback function. Listing4 is a simple example of sending data and using the callback function:

Listing 4. Sending data to a page with Ajax

	<br>$.post('save.cgi', {<br>  text: 'my string',<br>  number: 23<br>}, function() {<br>  alert('Your data has been saved.');<br>});<br>

If you really want some complex Ajax code, just use the $.ajax() function. You can specify the data type as xml, html, script or json, and jQuery will automatically prepare the results for you. The callback function can use this data immediately. You can also set <font face="新宋体">beforeSend</font>, <font face="新宋体">error</font>, <font face="新宋体">success</font>, and <font face="新宋体">complete</font> callback functions to give the user more prompt information about the ajax experience. In addition, there are some parameters, Allows you to set the timeout for ajax requests, or the "last changed" 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()

	<br>$.ajax({<br>  url: 'document.xml',<br>  type: 'GET',<br>  dataType: 'xml',<br>  timeout: 1000,<br>  error: function(){<br>    alert('Error loading XML document');<br>  },<br>  success: function(xml){<br>    // do something with xml<br>  }<br>});<br>

When you successfully get xml feedback, you can use jQuery to traverse the xml document, just like you do with html. This makes it very simple to manipulate an xml file and integrate the content into the page. Listing6 The success function is extended, and a list (list) entry is added to the page according to each in the xml document.

Listing 6. Working with XML using jQuery

	<br>success: function(xml){<br>  $(xml).find('item').each(function(){<br>    var item_text = $(this).text();<br><br>    $('<li></li>')<br>      .html(item_text)<br>      .appendTo('ol');<br>  });<br>}