在JavaScript的jQuery库中操作AJAX的方法讲解【站长博客网】(2)_H5之家

<span> $(function(){ var options = { beforeSubmit : function() {//处理以前需要做的功能 $("tipMsg").text("数据正在保存，请稍候..."); $("#insertBtn").attr("disabled", true); }, success : function(result) {//返回成功以后需要的回调函数 if ( result.success ) { $("#tipMsg").text("机构保存成功"); //这里是对应的一棵树，后边会介绍到， // 控制树形组件，增加新的节点 var tree = window.parent.treeFrame.tree; tree.insertNewChild("${org.id}", result.id, result.name); } else { $("#tipMsg").text("机构保存失败"); } // 启用保存按钮 $("#insertBtn").attr("disabled", false); }, clearForm : true }; $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 }); </span>

这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

利用 jQuery 简化 Ajax 开发

Ajax 并不是一种语言，它只是几种旧技术如 JavaScript 和 XML 以及 DOM 的综合应用，全称为 Asynchronous JavaScript and XML，即异步 JavaScript 和 XML ，它能够在页面不刷新的前提下和服务器进行异步数据交互，如果运用得当，它能够很好的提高用户体验，还能节省带宽、降低服务器压力。作为一个优秀的 JavaScript 框架，jQuery 同样也提供了很多方法来处理 Ajax 的相关操作。
利用 Ajax 获取异步数据

传统 Ajax 一般步骤为：

例如用 Ajax 获取服务器上的当前时间，示例代码如下：

<html> <head> <title>Traditional Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function getDateTime() { var xmlHttp; if (window.XMLHttpRequest) { // For IE7+, Firefox, Chrome, Opera, Safari xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // For IE6, IE5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("timediv").innerHTML = "现在时间" + xmlHttp.responseText; } } xmlHttp.open("GET", "ajax.php", true); xmlHttp.send(null); } </script> </head> <body> <div>现在时间</div> <br /><input type="button" value="测试传统的 Ajax" /> </body> </html>

服务端代码为：

<?php //服务器端为格林尼治标准时间，这里需设置为中国所在时区 date_default_timezone_set("PRC"); echo date("Y-m-d H:i:s"); ?>

可以看到，仅仅实现如此简单的功能，代码却如此冗长，特别是创建 XMLHttpRequest 的时候，还要兼容多种浏览器，另外还要监测 XMLHttpRequest 的 onreadystatechange 时间，以及返回的 readyState 和 status 状态，稍显麻烦。

jQuery 的 Ajax 方法，如果将上面的代码改写为 jQuery 的 Ajax 方法，代码如下：

<html> <head> <title>Traditional Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script> <script type="text/javascript"> function getDateTime() { $("#timediv").load("ajax.php"); } </script> </head> <body> <div></div> <br /><input type="button" value="测试 jQuery 的 Ajax" /> </body> </html>

可以看到，jQuery 的 Ajax 方法，主要代码只有一行 $("#timediv").load("ajax.php");，相当之简单，而且绝对兼容各种主流浏览器。从这个例子可以看出，jQuery 大大的简化了 Ajax 的编码方式。
GET 还是 POST ？

上面的例子中的 load 函数固然方便，但是我们还是经常要指定 jQuery 到底是用 GET 方法还是 POST 方法，使用方法如下：

$.get(url, [data], [callback]) $.post(url, [data], [callback], [type])

GET 和 POST 的使用方法基本相同，参数 data 为向服务器发送的数据，callback 为回调函数，type 用来指定服务器返回的数据类型，如纯文本、XML、JSON 等。

下面来看具体例子：

<html> <head> <title>jQuery Ajax (get and post)</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script> <script type="text/javascript"> $(document).ready(function() { // 为 GET 按钮添加事件 $("#getbtn").click(function() { $.get("ajaxpage.php", {username:$("#username").val()}, function(data) { $("#ajaxdata").html(data); // 将服务端返回的数据填充到 P 标签中 }); }); // 为 POST 按钮添加事件 $("#postbtn").click(function() { $.post("ajaxpage.php", {username:$("#username").val()}, function(data) { $("#ajaxdata").html(data); // 将服务端返回的数据填充到 P 标签中 }); }); }); </script> </head> <body> 你的大名：<input type="text" /><br /> <input type="button" value="GET 方法" /><br /> <input type="button" value="POST 方法" /> <p></p> </body> </html>

服务端代码为：