脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery →

比较简单的jquery教程 Easy Ajax with jQuery 中文版全集

 更新时间：2007年11月30日 13:24:41   作者：  

客户端代码(html)

在使用jQuery之前,我们先处理一下html的页面.这样的话,当我们必须确定使用那些元素来获取或者更新使用jQuery返回的数据时,我们就知道怎么做了.我们不需要很多东西:一个外围div,一个消息段落以及一个有用户名和消息文本框的form,还有一个submit按钮.最后还需要加一个加载信息时的提示--我们可以使用jQuery轻松的移除它.下面就是代码:

复制代码 代码如下:

<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> 


客户端代码（jQuery）
现在，我们继续看jQuery在客户端的使用。首先，我们需要生命当前消息的时间戳为0，并且在服务器端调用函数来加载消息：
timestamp = 0; 
updateMsg();
然后，我们将完成表单提交的代码。jQuery允许我们为表单的submit事件添加一个事件钩子，就像在html代码中直接写onSubmit事件的效果一样，但是不需要动任何html代码。下面是submit事件：
$("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格式,像上面演示的那样.由还可以使用jquery的ajax函数发送一个get请求,会有一个json风格的响应,可以使用jQuery把反馈的文本转换成更容易阅读的形式.要记住,这种方式只有对get请求类型才起作用,对我们这里使用的post则无效.因此,我们这里将使用最简单的XML.
现在,我们看一下XML响应.为代码重用,我们在这里为处理xml创建一个函数并且调用它:
addMessages(xml);
我们将在后边实现它,以便我们现在专注实现表单提交代码.我们现在写出来的代码就是$.post需要的全部了,因此我们加个大括号以及一个返回false的提示(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;  
}); 

现在让我们回头看看addMessages()函数,来处理xml响应信息.使用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);
我们然后就可以使用jQuery的$函数来获取message的值.既然我们得到了我们需要的所有数据,我们就应该把它加到消息显示区里面去.这个消息显示窗体有一个叫做'messagewindow'的id,因此我们使用$("#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) { 
我上面提到,我们需要在这时移除我们的loading消息,因此,我们在这个span上调用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); 
}
整合代码

现在我们把所有的代码整合到一起.代码可以在这里下载( this downloadable zip file).不过,请看这里,我们加了一些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很不爽,那你可以直接在你的应用程序中生成html,然后使用load来加载到客户端.如果你想的话,可以试试用功能强大的xml标签属性以及jQuery的attr()函数. 现在你应该已经很惊讶于用jQuery实现ajax的简单了吧!
[全文完]

您可能感兴趣的文章:

相关文章

最新评论