jQuery_jquery를 사용하여 Ajax 개발 및 구현 방법을 단순화하세요.

jQuery를 사용하면 Ajax가 매우 쉬워집니다. jQuery는 간단한 작업을 더 쉽게 만들고 복잡한 작업을 덜 복잡하게 만들 수 있는 몇 가지 기능을 제공합니다.

몇 가지 간단한 코드 단순화

다음은 jQuery가 코드에 미칠 수 있는 영향을 보여주는 간단한 예입니다. 페이지의 특정 영역에 있는 모든 링크에 클릭 이벤트를 첨부하는 등 매우 간단하고 일반적인 작업을 수행하려면 목록 1에 표시된 대로 순수 JavaScript 코드와 DOM 스크립트를 사용하여 수행할 수 있습니다.

목록 1: jQuery가 없는 DOM 스크립트

코드 복사 코드는 다음과 같습니다.

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); 
}; 
}

목록 2에서는 jQuery를 사용하여 구현된 동일한 기능을 보여줍니다.
목록 2. jQuery를 이용한 DOM 스크립트

코드 복사 코드는 다음과 같습니다.

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

정말 놀랍지 않나요? jQuery를 사용하면 문제의 요점을 파악하고 코드가 원하는 기능을 달성하도록 하여 일부 지루한 프로세스를 제거할 수 있습니다. 요소를 반복할 필요는 없으며 click() 함수가 이를 수행합니다. 여러 DOM 스크립트를 호출할 필요도 없습니다. 필요한 요소를 정의하려면 짧은 문자열을 사용하면 됩니다.
이 코드의 작동 방식을 이해하는 것은 약간 복잡할 수 있습니다. 먼저 jQuery에서 가장 강력한 함수인 $() 함수를 사용합니다. 일반적으로 우리는 이 기능을 사용하여 문서에서 요소를 선택합니다. 이 경우 일부 CSS(Cascading Style Sheet) 구문이 포함된 문자열이 함수에 전달되고 jQuery는 최대한 효율적으로 요소를 찾습니다.
CSS 선택기에 대한 기본 지식이 있다면 구문이 익숙할 것입니다. 목록 2에서 #external_links는 ID가 external_links인 요소를 검색하는 데 사용됩니다. a 뒤의 공백은 jQuery가 external_links 요소의 모든 3499910bf9dac5ae3c52d5ede7383485 요소를 검색해야 함을 의미합니다. 영어에서는 DOM 스크립트에서도 매우 복잡하지만 CSS에서는 이보다 더 간단할 수 없습니다.
$() 함수는 CSS 선택기와 일치하는 모든 요소가 포함된 jQuery 객체를 반환합니다. jQuery 객체는 배열과 유사하지만 다양한 특수 jQuery 함수가 함께 제공됩니다. 예를 들어 click 함수를 호출하여 jQuery 객체의 모든 요소에 클릭 핸들러를 할당할 수 있습니다.
또한 요소 또는 요소 배열을 $() 함수에 전달할 수도 있습니다. 그러면 이러한 요소가 jQuery 개체에 캡슐화됩니다. 이 기능을 사용하여 window 개체와 같은 일부 개체에 jQuery 함수를 적용할 수 있습니다. 예를 들어, 일반적으로 다음과 같이 로딩 이벤트에 함수를 할당합니다.

코드 복사 코드는 다음과 같습니다.

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

jQuery를 사용하여 작성 동일한 기능의 코드:

코드 복사 코드는 다음과 같습니다.

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

경험하셨겠지만, 창이 로드되기를 기다리는 과정은 매우 느리고 페이지의 모든 이미지를 포함하여 전체 페이지가 로드될 때까지 기다려야 하기 때문에 고통스럽습니다. 때로는 이미지 로드를 먼저 끝내고 싶을 때도 있지만 대부분의 경우 HTML(Hypertext Markup Language)만 로드합니다. jQuery는 다음과 같이 문서에 특별한 준비 이벤트를 생성하여 이 문제를 해결합니다.

코드 복사 코드는 다음과 같습니다.

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

이 코드는 문서 요소 주위에 jQuery 객체를 생성한 다음 HTML DOM 문서가 준비되면 인스턴스를 호출하는 함수를 설정합니다. 이 함수는 필요한 만큼 여러 번 호출할 수 있습니다. 그리고 진정한 jQuery 형식의 단축키를 사용하여 이 함수를 호출할 수 있습니다. 쉽습니다. $() 함수에 함수를 전달하기만 하면 됩니다.

코드 복사 코드는 다음과 같습니다.

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

지금까지 $() 함수의 세 가지 용도를 소개했습니다. 네 번째 방법은 문자열을 사용하여 요소를 생성할 수 있습니다. 결과는 해당 요소를 포함하는 jQuery 객체입니다. 목록 3은 페이지에 단락을 추가하는 예제를 보여줍니다.
목록 3. 간단한 단락 생성 및 추가

코드 복사 코드는 다음과 같습니다.

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

이전 예제에서 알 수 있듯이 jQuery의 또 다른 강력한 기능은 메소드 체이닝입니다. jQuery 개체에 대해 메서드가 호출될 때마다 해당 메서드는 동일한 jQuery 개체를 반환합니다. 즉, jQuery 객체에서 여러 메서드를 호출해야 하는 경우 이를 위해 선택기를 다시 입력할 필요가 없습니다. Ajax Made Easy

코드 복사 코드 다음과 같습니다.

$('#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）！