jquery对ajax的支持介绍

1.三个方法

1.1.load方法

//作用：将服务器返回的数据直接添加到符合要求的dom对象上
//相当于 obj.innerHTML = 服务器返回的数据

用法:
$obj.load(url,[请求参数]);

url : 请求地址
请求参数 :
第一种形式：请求字符串，比如: 'username=zs&age=22'
第二种形式：对象,比如 {'username':'zs','age':22}

//注意：
//a, load方法如果没有参数，会使用get方式发请求。如果有参数，会使用post方式发请求。
//b, 如果有中文参数值，load方法已经帮我们做了编码处理。

例子:

$(function(){ 
$('a.s1').toggle(function(){ 
var airline = $(this).parent().siblings().eq(0).text(); 
$(this).next().load('priceInfo.do','airline=' + airline); 
$(this).html('显示经济舱价格'); 
},function(){ 
$(this).next().empty(); 
$(this).html('显示所有票价'); 
}); 
});

1.2.$.get()和$.post()方法

//作用：向服务器发送get或者post请求 (get请求ie有缓存问题)

用法:
$.get(url,[data],[callback],[type]);
$.post(url,[data],[callback],[type]);

url : 请求地址
data : 请求参数，形式同上。
callback : 回调函数，可以通过该函数来处理服务器返回的数据。
callback格式：

function(data,statusText)，

其中，data可以获得服务器返回的数据,
statusText是一个简单的字符串，描述服务器处理的状态。

type : 服务器返回的数据类型，类型可以是:
html : 返回的是html内容。
text : 返回的是text。
json : 返回的是json字符串
xml : 返回的是dom兼容的xml对象
script: 返回的javascriptz

例子:

function quoto(){ 
$.post('quoto.do',function(data){ 
//如果服务器返回的数据是json字符串, 
//会自动转换成js对象或者json对象组成的数组。 
$('#tb1').empty(); 
for(i=0;i<data.length;i++){ 
$('#tb1').append( 
'<tr><td>' + data[i].code 
+ '</td><td>' + data[i].name 
+ '</td><td>' + data[i].price 
+ '</td></tr>'); 
} 
},'json');t 
}

1.3.$.ajax(options):

//options是一个形如{key1:value1,key2:value2...}的js对象，用于指定发送请求的选项。

选项参数如下：

url(string) : //请求地址
type(string) : //GET/POST
data(object/string) : //发送到服务器的数据
dataType(string) : //预期服务器返回的数据类型
success(function) : //请求成功后调用的回调函数，有两个参数：
function(data,textStatus),
其中，data是服务器返回的数据,
textStatus 描述状态的字符串。
error(function) : //请求失败时调用的函数，有三个参数
function(xhr,textStatus,errorThrown),
其中xhr是底层的ajax对象(XMLHttpRequest),
textStatus,errorThrown这两个参数其中的
一个可以获得底层的异常描述。
async:true(缺省)/false : //当值为false时，发送同步请求。

例子:

$(function(){ 
$('#s1').change(function(){ $.ajax({ 
'url':'carInfo.do', 
'type':'post', 
'data':'carName='+$('#s1').val(), 
'dataType':'xml', 
'success':function(data){ 
//data是服务器返回的数据 
//如果返回的是xml文档，我们需要使用 
//$函数将其包装$(data)成一个jQuery 
//对象，方便查找。 
//追加之前先清空 
$('#tb1').empty(); 
$('#tb1').append( 
'<tr><td>制造商:' 
+ $(data).find('company').text() 
+' 价格:' + $(data).find('price').text() 
+' </td><td>车身大小:' 
+ $(data).find('size').text() 
+ ' 门数:' + $(data).find('door').text() 
+ '</td><td>排量: ' 
+ $(data).find('vol').text() 
+ ' 加速性能:' 
+ $(data).find('speed').text() 
+ '</td></tr>'); 
//要将表格显示出来 
$('#tips').slideDown('slow'); 
setTimeout(function(){ 
$('#tips').fadeOut('slow'); 
},2000); 
}, 
'error':function(){ 
$('#tb1').append( 
"<tr><td colspan='3'>该车型信息暂时不可用</td></tr>"); 
$('#tips').slideDown('slow'); 
} 
}); 
}); 
});

例子2:
解决中文乱码问题:

$.ajax({ 
'url':'netctoss7/ajaxCode', 
'type':'post', 
'data':{name:value}, 
'dataType':'json', 
'async':false, 
'success':function(data){ 
if(data){ 
$('#msg_verCode').text(''); 
v1=true; 
}else{ 
$('#msg_verCode').text('验证码错误'); 
} 
} 
});

2.两个辅助性的方法

2.1.serialize():

//将jquery对象包含的表单或者表单控件转换成查询字符串。

2.2.serializeArray():

//转换为一个数组，每个数组元素形如{name:fieldName,value:fieldVal}的对象。
//序列化元素的作用，主要是用于ajax请求中，给data赋值。

说明:
只能用于表单或者表单控件
直接把表单的name和对应的value值发送出去,形如:name=value

例子:

$.ajax({})中 
//'data':'carName='+$('#s1').val(), 
'data':$('#s1').serialize(), //'data':{'carName':$('#s1').val()}, 
'data':$('#s1').serializeArray(),