前言
jQuery的ajax提供了简介易用的方法让我们来实现ajax。
1 jQuery.ajax(options);——通过http请求加载远程数据
1.1 $.ajax() 只有一个参数，参数是一个json对象
1.1.1 url：发送请求的地址
1.1.2 type：请求方式包括GET和POST
1.1.3 timeout：请求超时时间(毫秒)
1.1.4 data：发生到服务器的数据，是一个json对象
1.1.5 datatype：预期服务器返回的数据类型，包括：xml、html、script、json。（注意：如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。）
1.1.6 beforeSend事件：发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
1.1.7 complete事件：请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
1.1.8 success事件：请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
1.1.9 error事件：请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
1.1.10 请注意：以上的beforeSend、complete、success和error事件里的this都是指向ajax请求的选项信息
1.1.11 示例如下：
<script type="text/javascript">
$(function(){
$("#result").toggle(
function(){
//第一次点击时的普通ajax请求
$.ajax({
url:"ajax_return.aspx", //发送请求的地址
type:"GET", //请求方式，包括GET和POST
data:{name:"luo", age:"23"}, //发送到服务器的数据。将自动转换为请求字符串格式。
//请求发送前触发，发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。
beforeSend:function(XMLHttpRequest){
alert("请求发送前");
},
//请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
success:function(data, status){
alert("请求执行成功了");
show(this, data, status);
},
//请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
complete:function(XMLHttpRequest, status){
alert("请求执行完了，不管成功与否");
show(XMLHttpRequest);
},
//请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
error:function(XMLHttpRequest, errMsg, errObj){
alert("请求出现了错误");
}
});
},
//第二次点击时，从服务器抛出一个错误
function(){
$.ajax({
type:"get",
url:"ajax_return.aspx?error=true",
beforeSend:function(XMLHttpRequest){
alert("请求发送前");
},
success:function(data, status){
alert("请求执行成功了");
show(this, data, status);
},
complete:function(XMLHttpRequest, status){
alert("请求执行完了，不管成功与否");
},
error:function(XMLHttpRequest, errMsg, errObj){
alert("请求出现了错误"); //这回出现了错误将执行error函数
show(this, '', '');
}
});
},
function(){
//第三次点击返回json对象，请设置dataType为对应类型
$.ajax({
type:"get",
url:"ajax_return.aspx",
data:{json:true},
dataType:"json", //如果不设置则返回的是字符串，如果设置了则返回json对象
beforeSend:function(XMLHttpRequest){
alert("请求发送前");
},
success:function(data, status){
alert("请求执行成功了");
alert(typeof data + " : " + data.name); //可直接访问返回对象的属性
},
complete:function(XMLHttpRequest, status){
alert("请求执行完了，不管成功与否");
},
error:function(XMLHttpRequest, errMsg, errObj){
alert("请求出现了错误"); //这回出现了错误将执行error函数
show(this, '', '');
}
});
}
);
function
var msg = "";
msg += "status: " + status + "/r/r";
for(var x in obj) msg += x + ": " + obj[x] + "/r";
msg += "/rdata:/r"
alert(msg);
}
});
</script>
Ajax_return.aspx页面的后台代码：
protected void Page_Load(object sender, EventArgs
{
if (Request["error"] != null)
{
throw new Exception("我抛出的错误");
}
if (Request["json"] != null)
{
Response.Clear();
Response.Write("{'name':'soldierluo', 'age':'23'}"); //1.3.2 请自行选择
Response.Write("{/"name/":/"soldierluo/", /"age/":/"23/"}"); //1.4.2
Response.End();
}
else
{
Response.Write(DateTime.Now.ToString());
}
}
以下所有函数都是在执行正确时才会有返回，如果需要在错误时处理，请直接使用ajax函数。
2 $(...).load(url,[data,][callback])：载入远程 HTML 文件代码并插入至 DOM 中。
2.1 默认使用get方式，当data有数据时自动转换成post方式
2.2 url：请求的地址
2.3 data：json对象，要发送的参数
2.4 callback：载入成功时的回调函数
2.5 示例如下：
<script type="text/javascript">
$(function(){
$("#result").click(function(){
$(this).load("ajax_return.aspx", {name:"luo", age:24}, function(){
alert("ajax请求执行成功后才会执行的哦~~");
});
});
});
</script>
Html代码如下
<div id="result">
点击异步获取数据
</div>
3 jQuery.get(url[,data][,callback][,type])：通过get方式异步请求信息
3.1 url：请求的地址
3.2 data：json对象，要发送的参数
3.3 callback：执行成功时的回调函数，参数为返回的数据
3.4 type：返回内容格式，包括：xml、html、script、json、text等（这个不知道怎么用，还要看看先）
3.5 示例如下：
<script type="text/javascript">
$(function(){
$("#result").click(function(){
//注意此处，是$.get而不是$(this).什么什么了
$.get("ajax_return.aspx", {name:"luo", age:24}, function(data){
alert("执行成功才会调用，返回数据是： " + data);
});
});
});
</script>
Html代码如下
<div id="result">
点击异步获取数据
</div>
4 jQuery.getJSON(url[,data][,callback])：通过get请求载入json数据（注意大小写）
4.1 url：请求的地址
4.2 data：json对象，要发送的数据
4.3 callback：执行成功时的回调函数，参数为返回的json对象
4.4 示例如下：
<script type="text/javascript">
$(function(){
$("#result").click(function(){
//注意此处，是$.get而不是$(this).什么什么了
$.getJSON("ajax_return.aspx", {json:true, type:"test"}, function(obj){
alert("成功执行，返回json对象：" + obj.name);
});
});
});
</script>
5 jQuery.post(url[,data][,callback][,type])：通过post请求载入信息
5.1 url：请求地址
5.2 data：json对象，要发送的数据
5.3 callback：执行成功时的回调函数，参数为返回的json对象
5.4 type：返回内容格式：xml、html、script、json、text等
5.5 示例如下：
<script type="text/javascript">
$(function(){
$("#result").toggle(
function(){
//未指定返回内容格式，则返回内容格式为text
$.post("ajax_return.aspx", {json:true}, function(result){
alert(typeof result + " : "
})
},
function(){
//指定了返回内容格式为json，则返回内容格式为json，当然返回的字符串必须是json格式
$.post("ajax_return.aspx", {json:true}, function(result){
alert(typeof result + " : " + result.name); //可以直接访问对象的属性
}, "json")
}
);
});
</script>
