之前,我们用原生的JavaScript来实现Ajax,现在我们来用一种更简单的方法,使用jQuery来进行Ajax操作。
在原生的JavaScript中,使用XMLHttpRequest 对象异步加载数据;而在jQuery 中,使用load() 方法可以轻松实现异步获取数据的功能。
<?PHP echo "Hello,FORERVER!"; ?>
在jQuery中,我们可以通过jQuery.ajax()函数来实现Ajax。其中可以对ajax()函数指定两个参数。第一个参数为目标url。第二个参数则是指定了相关信息的对象。另外,也可以省略第一个参数,而将url指定为第二个参数中的对象的属性。
示例如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div id="show"></div> <input id="ajax" type="button" value="ajax"/> <script type="text/javascript"> $("#ajax").click(function(){ $.ajax("forever.PHP",{ type:"GET",data:{name:"FOREVER",url:"liaoyuming.cn"},success: function(data,status,xhr){ $("#show").html(data); },error:function(xhr,errorThrown){ $("#show").html(errorThrown); },async:true }) ; }); </script>
<?PHP echo "Hello,".$_GET['name']."!"; echo "From <a href='http://".$_GET['url']."'>永远站</a>."; ?>
下表,总结了传递给第二个参数的对象可以指定的一些主要属性
属性名 | 说明 |
---|---|
url | 请求发送目标的URL |
type | 所使用的 HTTP 类型 |
timeout | 超时时间。单位为毫秒 |
async | 是否执行异步通信(默认为true) |
crossDomain | 是否执行跨源通信 |
isLocal | 在访问文件系统等本地环境时值为true |
data | 所发送的数据对象或字符串 |
procssData | 是否不将 data 转换为查询字符串就发送 |
headers | 请求头部 |
contentType | 发送数据到服务器时,内容的编码格式。(默认为'application/x-www-form-urlencoded; charset=UTF-8') |
ifModified | 如果该值被指定为true,则只有在数据被更改的时候请求才算发送成功 |
cache | 是否使用浏览器缓存 |
dataType | 通过字符串指定响应数据的类型。可指定为 xml、html、script、json 及 text 中的一种。 |
beforeSend(xhr,settings) | 在发送前执行的回调函数。如果该函数返回false,则将取消请求的发送 |
success(data,xhr) | 通信成功时执行的回调函数 |
error(xhr,status) | 通信失败时执行的回调函数 |
complete(xhr,status) | 通信完成时执行的回调函数。 |
dataFilter(data,type) | 用于对响应数据过滤的回调函数。该函数再success()之前被执行,其结果作为data参数传递给success() |
statusCode | 用于指定每一个状态码的回调函数的映射。其键为状态码,其值为函数 |
global | 是否触发与 AJAX 相关的全局事件 |
xhr | 用于创建 XMLHttpRequest 对象的工厂函数 |
username | 再需要认证的访问中所用的用户名 |
password | 再需要认证的访问中所用的密码 |
更加具体的,请查看 jQuery API 中的jQuery.ajax()