可以看到，仅仅实现如此简单的功能，代码却如此冗长，特别是创建 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>
服务端代码为：
<?php // 服务器端为格林尼治标准时间，这里需设置为中国所在时区 date_default_timezone_set("PRC"); $username = ""; $ajaxMethod = ""; // 判断是 GET 还是 POST if(isset($_GET["username"])) { $username = $_GET["username"]; $ajaxMethod = "GET"; } else { $username = $_POST["username"]; $ajaxMethod = "POST"; }
echo "你好，" . $username . ", 现在时间为：" . date("Y-m-d H:i:s"). "，此数据来源于 " . $ajaxMethod . " Ajax";
?>
可以看到，jQuery Ajax 的 GET 方法 和 POST 方法，使用起来依然相当之方便。
控制 Ajax
GET 和 POST 方法以及前面提到的 load 方法，使用起来虽然十分实用，但是某些时候却过于简单，很多时候我们都需要更多的控制 Ajax 的细节，jQuery 同样提供了一些方法来控制 Ajax 的细节，主要通过 $.ajax(options) 方法来实现，请看下面的代码片段：
<script type="text/javascript"> $(document).ready(function() { // 为 GET 按钮添加事件 $("#getbtn").click(function() { $.ajax({ type: "GET", url: "ajaxpage.php", data: {username:$("#username").val()}, timeout: 3000, error: function() { alert("error!"); }, success: function(data) { // 回调函数，将返回的数据添加到 P 标签中 $("#ajaxdata").html(data); } }); }); // 为 POST 按钮添加事件 $("#postbtn").click(function() { $.ajax({ type: "POST", // Ajax 提交方式 url: "ajaxpage.php", // 提交页 data: {username:$("#username").val()}, // 要提交的数据 timeout: 3000, // 超时设置，单位为毫秒 error: function() { // Ajax 发生错误时 alert("error!"); }, success: function(data) { // 回调函数，将返回的数据添加到 P 标签中 $("#ajaxdata").html(data); } }); }); }); </script>
上面例子中，$.ajax(options) 中的 options 条目是可选的，并不是每个参数都要设置。对于有些参数而言，例如 timeout 和 error 在某个项目中是固定不变的，那么就没必要在每个 Ajax 代码中都写，可以用 jQuery 提供的全局 Ajax 设置的方法来设置一下，设置方法如下：