jquery实现ajax_jQuery文章轻松实现Ajax

最新推荐文章于 2024-10-18 00:00:00 发布

dingshi7798

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量72

点赞数

文章标签： python javascript java vue js ViewUI

原文链接：https://www.sitepoint.com/ajax-jquery-3/

版权

jquery实现ajax

客户端代码（jQuery）

现在，进入jQuery前端。首先，我们需要将当前消息的时间戳声明为0，然后调用从服务器加载消息的函数：

timestamp = 0;   
updateMsg();

接下来，我们将编写表单提交的代码。 jQuery允许我们为表单的onSubmit事件添加事件钩子，就像我们在HTML本身中添加onSubmit事件一样，只是我们不必触摸HTML。这是提交事件：

$("form#chatform").submit(function(){ /* Code */ });

在这里，我们使用CSS选择器语法来引用id为'chatform'的表单元素。一旦进入表单提交代码，就可以使用jQuery的$.post向服务器发出POST请求。在对$.post的调用中，我们可以根据我们先前确定的id来选择页面上表单元素的值。考虑到这一点，我们可以深入研究Ajax调用：

$.post("backend.php",{ message: $("#msg").val(),   
name: $("#author").val(), action: "postmsg", time: timestamp }, function(xml) {

请注意，要在请求中传递的参数数组用花括号括起来。如果您有更多参数，只需用逗号分隔它们，然后使用此处提供的JSON-style格式。您还可以使用jQuery的Ajax函数发送一个GET请求，该请求需要一个JSON样式的响应，并使jQuery将响应文本转换为易于使用的格式。但是请记住，此功能仅适用于GET请求类型，不适用于我们用于聊天系统的POST请求类型。因此，我们暂时将使用纯XML。

现在，让我们看一下XML响应的处理。由于我们都打算重复使用代码，因此我们将创建一个处理XML的函数并立即调用它：

addMessages(xml);

我们稍后将编写此函数，以便我们可以完成表单提交事件代码。到目前为止，我们编写的代码就是$.post回调函数所需的全部内容，因此我们可以将其关闭并添加return false；线。此行使用标准浏览器表单提交错误代码失败。浏览器不会将用户发送到另一个页面来提交表单-我们已经处理了表单提交，因此浏览器不需要。这是完整的事件代码：

$("form#chatform").submit(function(){   
  $.post("backend.php",{   
        message: $("#msg").val(),   
        name: $("#author").val(),   
        action: "postmsg",   
        time: timestamp   
      }, function(xml) {   
    addMessages(xml);   
  });   
  return false;   
});

现在，让我们回到处理响应XML的addMessages()函数。这很简单，利用了jQuery的DOM操作和遍历功能。还记得我之前提到的状态码吗？现在该处理它了：

if($("status",xml).text() == "2") return;

我还没有在jQuery中提到上下文。此函数调用中的XML告诉jQuery不在文档HTML内部，而是在服务器发送给我们的XML中。

该代码行检查状态代码2，表示成功的请求，导致我们没有要添加到窗口的新消息。 'return'关键字终止函数调用。接下来，我们将时间戳记设置为XML中的时间戳记：

timestamp = $("time",xml).text();

同样，这将获取XML中<time>标记的文本值。

现在我们可以继续使用jQuery的数组迭代函数each() 。 jQuery有一种有趣的处理数组迭代的方法。我们使用标准的选择器语句，并且将each()函数传递给一个参数-一个用于处理匹配元素的每个实例的函数。在这种情况下，元素是服务器响应中<message>标记的实例，每个实例都代表要显示的消息。一个参数（实例的id ）传递给函数。我们可以将它与jQuery的get()函数一起使用，以获取新的上下文- <message>标签的实际XML。这是我们选择的方式：

$("message",xml).each(function(id) {   
  message = $("message",xml).get(id);

然后，我们可以通过将上下文'message'传递给jQuery / $函数来选择元素。现在我们有了所需的所有数据，我们必须将其添加到页面上消息窗口的顶部。消息窗口的ID为'messagewindow' ，因此我们使用$("#messagewindow")选择它，并使用prepend()函数添加数据：

$("#messagewindow").prepend("<b>"+$("author",message).text()+   
          "</b>: "+$("text",message).text()+   
          "<br />");

这里的所有都是它的！放在一起，下面是该函数的代码：

function addMessages(xml) {   
  if($("status",xml).text() == "2") return;   
  timestamp = $("time",xml).text();   
  $("message",xml).each(function(id) {   
    message = $("message",xml).get(id);   
    $("#messagewindow").prepend("<b>"+$("author",message).text()+   
              "</b>: "+$("text",message).text()+   
              "<br />");   
  });   
}

最后，我们需要在代码开始时调用过的updateMsg函数。该函数必须查询服务器是否有新消息，并使用响应调用上述addMessages函数。它还必须设置一个超时时间，以在设置的时间段后调用自己，这会使聊天窗口自动更新。首先，除了时间戳，我们不需要向服务器提交任何内容，因此这是我们的$.post调用：

$.post("backend.php",{ time: timestamp }, function(xml) {

如前所述，此时我们还需要删除加载消息，因此我们在跨度上调用jQuery的remove函数：

$("#loading").remove();

然后，我们在对象'xml'收到了xml响应，因此将其传递给我们的addMessages函数：

addMessages(xml);

我们通过调用JavaScript setTimeout()函数将其四舍五入，该函数在指定的间隔后执行指定的代码。这是整个函数的总和：

function updateMsg() {   
  $.post("backend.php",{ time: timestamp }, function(xml) {   
    $("#loading").remove();   
    addMessages(xml);   
  });   
  setTimeout('updateMsg()', 4000);   
}

放在一起

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

现在，我们可以将难题的所有部分放在一起。正如我所提到的，此可下载的zip文件中提供了代码。但是，您可以在这里仔细阅读，我在其中添加了一些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(){   
      timestamp = 0;   
      updateMsg();   
      $("form#chatform").submit(function(){   
        $.post("backend.php",{   
              message: $("#msg").val(),   
              name: $("#author").val(),   
              action: "postmsg",   
              time: timestamp   
            }, function(xml) {   
          $("#msg").empty();   
          addMessages(xml);   
        });   
        return false;   
      });   
    });   
    function addMessages(xml) {   
      if($("status",xml).text() == "2") return;   
      timestamp = $("time",xml).text();   
      $("message",xml).each(function(id) {   
        message = $("message",xml).get(id);   
        $("#messagewindow").prepend("<b>"+$("author",message).text()+   
                      "</b>: "+$("text",message).text()+   
                      "<br />");   
      });   
    }   
    function updateMsg() {   
      $.post("backend.php",{ time: timestamp }, function(xml) {   
        $("#loading").remove();   
        addMessages(xml);   
      });   
      setTimeout('updateMsg()', 4000);   
    }   
  </script>   
  <style type="text/css">   
    #messagewindow {   
      height: 250px;   
      border: 1px solid;   
      padding: 5px;   
      overflow: auto;   
    }   
    #wrapper {   
      margin: auto;   
      width: 438px;   
    }   
  </style>   
</head>   
<body>   
  <div id="wrapper">   
  <p id="messagewindow"><span id="loading">Loading...</span></p>   
  <form id="chatform">   
  Name: <input type="text" id="author" />   
  Message: <input type="text" id="msg" />       
  <input type="submit" value="ok" /><br />   
  </form>   
  </div>   
</body>   
</html>

因此，有了22行JavaScript，8行HTML和大约50行PHP，我们现在有了一个功能齐全的Ajax Web应用程序。试用一下，并将其集成到您自己的站点中。使用这些技术和您自己的想法来构建自己的Ajax应用程序。使用此代码并对其进行修改以构建新的东西。如果您对生成和处理XML不满意，请坚持使用Web应用程序生成HTML，并使用load()将其带到客户端。然后，一旦掌握了这些技巧，就可以尝试一个利用标签属性和jQuery的attr()函数充分利用XML强大功能的应用程序—您会惊讶于jQuery的Ajax如此强大。

如果您喜欢阅读这篇文章，您会喜欢Learnable的；向大师学习新鲜技能的地方。会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如jQuery Fundamentals 。

转到页面： 1 | 2 | 3