使用jQuery轻松实现Ajax

这篇文章写于2011年，仍然是我们最热门的帖子之一。 如果你渴望更多地了解了jQuery，你会发现这个jQuery的1.9最近的一篇文章的极大兴趣。

阿贾克斯正在改变Web应用程序，给他们一个响应这是前所未闻的超越桌面。 但是，后面所有的炒作，没有太多阿贾克斯 - HTML，JavaScript和XML是什么新鲜事了，在本教程中，我会告诉你如何简化使用jQuery的帮助下将Ajax添加到您的应用程序进一步的处理。

什么是Ajax的？

你可能听说过关于Ajax之前，或者至少使用基于Ajax的应用程序 - 的Gmail，例如。 简单地说，Ajax是通过JavaScript异步处理外部数据，而无需重新加载整个页面的技术。 SitePoint提供了一个很好的介绍了Ajax 。 杰西詹姆斯加勒特记在压印术语这篇文章 。

不幸的是，在深入实际的方式进入阿贾克斯的世界教程是少之又少。 要添加到这个问题， XMLHttpRequest阿贾克斯的一类不是很容易的开始的网络开发者使用。 幸运的是，一些JavaScript库提供一个更简单的方法。 今天，我会告诉你jQuery的 - 其中一个库 - 可以让你轻松的Ajax添加到应用程序。

什么是jQuery的？

jQuery是另一个成熟的JavaScript库，它提供了一些功能，其他人没有。 诚然，它不完全是轻量级的，因为一些其他产品的：jQuery的排在19KB，而moo.fx只有3KB。 你可以阅读更多关于在jQuery的JavaScript库世界杯对于提供类似功能的其他一些JavaScript库的比较。

假设的知识

要完成本教程，你需要一些基本的JavaScript知识。 如果您知道任何C风格的语言，你会得到的JavaScript挂在任何时间。 试想大括号，函数声明，以及可选的分号在每一行结束时（他们不可选与jQuery，虽然）。 如果你热衷上手使用JavaScript，看到这个优秀的，简洁的JavaScript教程设计的程序员。 此外，由于我们正在谈论的Web应用程序，则需要HTML的基本知识。

jQuery的101

让我们通过一个简单介绍jQuery的。 为了能够在页面中使用它，你首先需要下载库。 您可以下载最新版本在写作时1.8 - 。 jQuery的方法很简单：找东西，做的东西。 我们选择使用jQuery的功能，别名为从文件（通过DOM）元素$() 这个方便的功能，行为就像的document.getElementById（） ，但不是唯一支持的ID，它支持CSS选择器和一些XPath选择; 和，而不是返回一个元件，它可以返回元件的阵列。 好吧，也许是更好的描述$()是，它像document.getElementById()类固醇。

然后，我们使用功能对我们的选择执行操作。 例如，要追加文本“Hello World！” 与类的所有div 'foo' ，然后将颜色设置为红色，我们可以使用下面的代码：

 $("div.foo").append("Hello World!").css("color","red"); 

简单！ 通常情况下，这个任务将需要两行代码，如下所示：

 $("div.foo").append("Hello World!"); 
$("div.foo").css("color","red"); 

//

jQuery的可链接的方法，让我们来写比其他JavaScript库更加紧凑的代码。 有jQuery的功能不需要的对象，因为他们独立工作，和许多的Ajax函数属于这一群体。 例如，POST功能，我们将很快使用，被称为输入$.post(parameters) 。 欲了解更多jQuery的功能，检查联机文档或visualjquery.com 。

例1 - 我们的第一个AJAX应用程序

举个例子，我们要做出一个互动的概念产生。 基本上，这涉及到我们随机从列表中选择两个词，然后结合他们创造一个短语。 在这个练习中，我们将使用网络流行语2.0（“混搭”，“分众分类”，“媒体”等），通常我们会取从平面文件这些条款。 为了节省您下载的每一个组合（或至少每个元素）在JavaScript中，我们将生成它在服务器端的苍蝇，把它拿来与jQuery的客户端。 jQuery的正常JavaScript的完美集成，所以你会发现这是一种轻松的任务，以它的工作到你的代码。

服务器端代码（PHP）

为了简单起见，我们将在下面的基本代码来创建我们的概念产生。 不要担心它是如何工作的，只是看它做什么：它输出的随机报价。 注意，这个代码不输出XML - 它仅仅输出原始文本：

 <?php 
header("Cache-Control: no-cache"); 
// Ideally, you'd put these in a text file or a database.  
// Put an entry on each line of 'a.txt' and use $prefixes = file("a.txt"); 
// You can do the same with a separate file for $suffixes. 
$prefixes = array('Mashup','2.0','Tagging','Folksonomy'); 
$suffixes = array('Web','Push','Media','GUI'); 
// This selects a random element of each array on the fly 
echo $prefixes[rand(0,count($prefixes)-1)] . " is the new "  
   . $suffixes[rand(0,count($prefixes)-1)]; 
// Example output: Tagging is the new Media 
?> 

在这里，我已经使用了Cache-Control头响应，因为Internet Explorer有缓存具有相同的URL页面的习惯，即使在不同页面之间的内容。 显然，我们的失败脚本的目的 - 生产上的每个负载一个新的报价。 我们可以使用jQuery来包括在那么这将被丢弃的URL随机数，但它更容易解决在服务器端比客户端此缓存问题。

客户端代码（HTML）

让我们开始创建前端的HTML，那么我们的工作阿贾克斯进去。 在页面上我们需要的是一个按钮，用户可以点击请求另一个报价，和一个div到我们会把报价一旦我们从服务器接收到它。 我们将使用jQuery选择这个div和报价加载到它，我们将通过它的引用DIV id 。 如果我们愿意，我们可以使用jQuery报价加载到多个元素，一类的帮助，但一个id是我们需要现在。 让我们把这个我们的身体元素的内容：

 <input type="submit" id="generate" value="Generate!"> 
<div id="quote"></div> 

我们可以把引号本身的DIV中。 通常情况下，我们就会有一个漫长onSubmit的按钮事件（ID为输入'generate' ）。 有时候，我们就会有一个onSubmit事件处理程序调用JavaScript函数。 但随着jQuery的，我们甚至不需要触摸HTML - 我们可以从结构（网页HTML）轻松分离行为（事件处理程序）。

客户端代码（jQuery的）

它的时间来与我们使用jQuery前端带给我们的后端在一起。 我在前面，我们可以选择使用jQuery的DOM元素提及。 首先，我们必须选择按钮，并为其分配onClick事件处理它。 在此事件的代码，我们可以选择div和我们的脚本的内容加载到它。 下面是Click事件处理程序的语法：

 $("element expression").click(function(){ 
  // Code goes here 
}); 

正如你可能已经知道，如果我们选择在CSS这个元素，将#将确定我们使用元素的设备选型id属性。 您可以使用完全相同的语法使用jQuery。 因此，要选择与所述ID的按钮'generate' （其中我们给它上面），我们可以使用该元素表达#generate 。 此外，要知道，这句法定义了我们的事件处理程序与事件本身内部的匿名函数。

马克Wubben的JavaScript术语页面提供的匿名函数一个很好的解释，如果你想知道更多。

我们将使用jQuery的更高水平的Ajax功能之一， load() 让我们假设我们生成的脚本保存为script.php 。 让我们把它与我们的客户端用的帮助整合load()函数：

 $("#generate").click(function(){ 
  $("#quote").load("script.php"); 
}); 

就是这样：三行代码，我们已经充分运作的阿贾克斯随机报价发生器！ 好了，差不多了。

使用JavaScript的问题是代码，这不是一个函数内，执行一旦浏览器在渲染过程中达到它 - 不是一次页面完成渲染。 因此，该代码会试图连接到一个尚未加载的元件。 通常情况下，我们会使用window.onload来处理这个问题。 然而，这种方法的局限是， window.onload调用一次都完成加载-图像和所有。 我们不感兴趣，等待这些图像 - 这仅仅是DOM，我们希望访问。

幸运的是，jQuery有$(document).ready()其中，顾名思义，当DOM准备好进行操作执行。

完整的代码

下面是完整的代码，包括$(document).ready包装和一些基本的HTML和CSS：

 <html> 
<head> 
  <title>Ajax with jQuery Example</title> 
  <script type="text/JavaScript" src="jquery.js"></script> 
  <script type="text/JavaScript"> 
  $(document).ready(function(){ 
    $("#generate").click(function(){ 
      $("#quote p").load("script.php"); 
    }); 
  }); 
  </script> 
<style type="text/css"> 
    #wrapper { 
      width: 240px; 
      height: 80px; 
      margin: auto; 
      padding: 10px; 
      margin-top: 10px; 
      border: 1px solid black; 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <div id="wrapper"> 
    <div id="quote"><p> </p></div> 
    <input type="submit" id="generate" value="Generate!"> 
  </div> 
</body> 
</html> 

此代码也包含在这个下载的zip文件 。 请记住，这代码假设jQuery库已保存为jquery.js在同一文件夹作为PHP脚本和HTML前端。 现在你已经熟悉的jQuery，让我们到更复杂的东西的举动：表单元素和XML处理。 这是一个真正的Ajax！

转到页： 1 | 2 | 3

From: https://www.sitepoint.com//ajax-jquery/