Simplify Ajax development and implementation methods with jQuery_jquery

Using jQuery will make Ajax extremely easy. jQuery provides some functions that can make simple tasks easier and complex tasks less complicated.

Some simple code simplification

Here is a simple example that illustrates the impact jQuery can have on your code. To perform some really simple and common tasks, such as attaching a click event to every link in a certain area of ​​the page, you can do it using pure JavaScript code and DOM scripts, as shown in Listing 1.

Listing 1: DOM script without jQuery

Copy the code The code is as follows:

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(&#39;You are going to visit: &#39; + this.href); 
}; 
}

Listing 2 shows the same functionality implemented using jQuery.
Listing 2. DOM script using jQuery

Copy code The code is as follows:

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

Isn't it amazing? With jQuery, you can grasp the gist of the problem and only let the code achieve the function you want, eliminating some tedious processes. There is no need to loop through the elements, the click() function will do this. There is also no need to make multiple DOM script calls. You just need to use a short string to define the required elements.
Understanding how this code works can be a little complicated. First, we use the $() function - the most powerful function in jQuery. Usually, we use this function to select elements from the document. In this case, a string containing some Cascading Style Sheet (CSS) syntax is passed to the function, and jQuery finds the elements as efficiently as possible.
If you have basic knowledge of CSS selectors, the syntax should be familiar to you. In Listing 2, #external_links is used to retrieve the element with id external_links. The space after a means that jQuery needs to retrieve all 3499910bf9dac5ae3c52d5ede7383485 elements in the external_links element. It’s very convoluted in English, even in DOM scripts, but in CSS it couldn’t be simpler The
$() function returns a jQuery object containing all elements that match the CSS selector. A jQuery object is similar to an array, but comes with a number of special jQuery functions. For example, you can assign a click handler to all elements in a jQuery object by calling the click function.
You can also pass an element or an array of elements to the $() function, which will encapsulate these elements in a jQuery object. You may want to use this feature to apply jQuery functions to some objects, such as the window object. For example, we usually assign the function to the loading event like this:

Copy the code The code is as follows:

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

Written using jQuery The code with the same function:

Copy the code The code is as follows:

$(window).load(function() { // run this when the whole page has been downloaded });

As you may have experienced, the process of waiting for the window to load is very slow and It's painful because you have to wait for the entire page to load, including all the images on the page. Sometimes you want to finish loading the image first, but in most cases you just load the Hypertext Markup Language (HTML). jQuery solves this problem by creating a special ready event in the document as follows:

Copy the code The code is as follows:

$(document).ready(function() { 
// do this stuff when the HTML is all ready 
});

This code creates a jQuery object around the document element, and then sets up a function that calls the instance when the HTML DOM document is ready. This function can be called as many times as needed. And be able to call this function using a shortcut in true jQuery format. It's easy, just pass a function to the $() function:

Copy the code The code is as follows:

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

So far, I have introduced to you three uses of the $() function. The fourth method can use strings to create elements. The result is a jQuery object containing the element. Listing 3 shows an example that adds a paragraph to the page.
Listing 3. Creating and appending a simple paragraph

Copy the code The code is as follows:

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

As you may have noticed in the previous example, another powerful feature in jQuery is method chaining. Each time a method is called on a jQuery object, the method returns the same jQuery object. This means that if you need to call multiple methods on a jQuery object, you don't have to retype the selector to do so: Ajax Made Easy

Copy Code The code is as follows:

$('#message').css('background', 'yellow').html('Hello!').show();

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：

复制代码 代码如下:

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

通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。
清单 4. 使用 Ajax 向页面发送数据

复制代码 代码如下:

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

如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 Ajax 体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置 Ajax 请求的超时，也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。
清单 5. $.ajax() 使 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 
} 
});

当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 success 函数的一个扩展，它为 XML 中的每个 5083cbefc9e5095dae6431462e2af988 元素都添加了一个列表项到 Web 页面中。
清单 6. 使用 jQuery 处理 XML 文档

复制代码 代码如下:

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

为 HTML 添加动画
可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。

复制代码 代码如下:

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){ 
alert('The element is done growing!'); 
});

jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素，立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut()，或者 slideDown() 和 slideUp() 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。

复制代码 代码如下:

$('#nav').slideDown('slow');

DOM 脚本和事件处理
或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。
从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起，使用 clone() 复制元素，使用 html() 设置内容，使用 empty() 函数删除内容，使用 remove() 函数删除所有的元素，即便是使用 wrap() 函数，用其他元素将这些元素包装起来。
通过遍历 DOM，一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。
如果结合使用 end() 函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象。
如果配合方法链接（method chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。
清单 7. 轻松地遍历和处理 DOM

复制代码 代码如下:

$('form#login') 
// hide all the labels inside the form with the 'optional' class 
.find('label.optional').hide().end() 
// add a red border to any password fields in the form 
.find('input:password').css('border', '1px solid red').end() 
// add a submit handler to the form 
.submit(function(){ 
return confirm('Are you sure you want to submit?'); 
});

不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用 end() 返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用 end() 返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery 完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。
处理常见事件就像调用函数（比方说 click()、submit() 或 mouseover()）和为其传递事件处理函数一样简单。此外，还可以使用 bind('eventname', function(){}) 指定自定义的事件处理程序。可以使用 unbind('eventname') 删除某些事件或者使用 unbind() 删除所有的事件。有关这些函数的使用方法的完整列表，请参阅 参考资料 中的 jQuery 应用程序编程接口（Application Program Interface，API）文档。
释放 jQuery 选择器的强大能量
我们经常会使用 ID 来选择元素，比如 #myid，或者通过类名，比如 p.myclass 来选择元素。然而，jQuery 提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。
jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多，使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表，包括 CSS 和 XPath，请参阅 参考资料 中的链接。
CSS3 包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：:empty 伪选择器（pseudo-selector）：

复制代码 代码如下:

$('td:empty').html('-');

如果需要找出所有不含特定类的元素呢？ CSS3 同样提供了一个语法可以完成这个目的，使用 :not 伪选择器： 如下代码显示了如何隐藏所有不含 required 类的输入内容：

复制代码 代码如下:

$('input:not(.required)').hide();

与在 CSS 中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：

复制代码 代码如下:

$('ul, ol, dl').hide();

XPath 是一种功能强大的语法，用于在文档中搜寻元素。它与 CSS 稍有区别，不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框，可以使用 XPath 的 /.. 语法：

复制代码 代码如下:

$("input:checkbox/..").css('border', '1px solid #777');

jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段（striping）。使用 jQuery 不费吹灰之力就可以做到这点，这需要归功于 odd 伪选择器。下面这个例子使用 striped 类改变了表格中所有奇数行的背景颜色：

复制代码 代码如下:

$('table.striped > tr:odd').css('background', '#999999');

我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。

使用插件扩展 jQuery
与大多数软件不同，使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上，jQuery 插件非常易于编写，您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件：

复制代码 代码如下:

$.fn.donothing = function(){ 
return this; 
};

虽然非常简单，但是还是需要对这个插件进行一些解释。首先，如果要为每一个 jQuery 对象添加一个函数，必须把该函数指派给 $.fn。第二，这个函数必须要返回一个 this（jQuery 对象），这样才不至于打断 方法链接（method chaining）。
可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件，以替代使用 css('background')，可以使用下面的代码：

复制代码 代码如下:

$.fn.background = function(bg){ 
return this.css('background', bg); 
};

清注意，可以只从 css() 返回值，因为已经返回了 jQuery 对象。因此，方法链接（method chaining）仍然运作良好。
我建议在需要重复工作的时候使用 jQuery 插件。比方说，如果您需要使用 each() 函数反复执行相同的操作，那么可以使用一个插件来完成。
由于 jQuery 插件相当易于编写，所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器，以及我们可以想到的一切效果。有关插件的完整列表，请参阅 参考资料。
最为复杂、使用最为广泛的插件要属界面（Interface），它是一种动画插件，用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面（User Interface，UI）。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。
表单插件也同样流行且非常有用，通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况：您需要截获某个表单的提交事件，找出所有不同的输入字段，并使用这些字段构造一个 Ajax 调用。

 以上就是用jQuery简化Ajax开发实现方法_jquery的内容，更多相关内容请关注PHP中文网（www.php.cn）！