AJAX教程–jQuery

发布时间：2020-12-16 02:00:32 所属栏目：百科来源：网络整理

导读：之前，我们用原生的JavaScript来实现Ajax，现在我们来用一种更简单的方法，使用jQuery来进行Ajax操作。在原生的JavaScript中，使用XMLHttpRequest 对象异步加载数据；而在jQuery 中，使用load() 方法可以轻松实现异步获取数据的功能。 script src="http://a

之前，我们用原生的JavaScript来实现Ajax，现在我们来用一种更简单的方法，使用jQuery来进行Ajax操作。

在原生的JavaScript中，使用XMLHttpRequest 对象异步加载数据；而在jQuery 中，使用load() 方法可以轻松实现异步获取数据的功能。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="show"></div>
<input type="button" id="get" value="获取数据"/>
<script type="text/javascript">
$("#get").click(function(){
	$("#show").load("forever.php");
});
</script>

forever.php 内容如下：

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

forever.php内容如下：

<?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()

原文地址:http://liaoyuming.cn/?p=507

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!