win7架设asp网站微博推广有用吗
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 。
翻译自: https://www.sitepoint.com/ajax-jquery-3/
jquery实现ajax