通过原生JavaScript实现Ajax比较复杂,并且如果服务器返回复杂结构的数据,处理起来也会比较繁琐,此外还要考虑浏览器兼容性问题,JQuery将Ajax相关的操作进行了封装,使用jQuery实现了Ajax更加简洁方便
$.ajax() 方法:
$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的Ajax实现,具有很高的灵活性
语法:$.ajax([settings]); 参数setting是$.ajax()方法的参数列表,用于配置Ajax请求的键值对集合,常用参数:
url String 发送请求的地址,默认为当前页地址
type String 请求方式(post或get,默认为get)
data PlainObject 或 String 或者 Array 发送到服务器的数据
dataType String 预期服务器返回的数据类型,类型可以是XML,HTML,JSON,Text
beforeSend Function(jqXHR jqxhr,String status) 发送请求前调用的函数,可用于设置请求头等,返回FALSE终止请求
success Function(任意类型 result, 请求成功后调用的函数,
String textStatus,jqXHR jqxhr) 参数result:可选,由服务器返回的数据
参数textStatus:可选,错误信息
$.ajax()方法的参数语法比较特殊,参数列表需要包含在一堆花括号“{}”之间,没个参数以“参数名”:“参数值”的方式书写;如有多个参数,以逗号“,”隔开。----JSON写法
示例:
<script>
$.ajax({
"url":"userServlet", //要提交的URL路径
"type":"GET", //发送请求的方式
"data":"name="+name, //要发送到服务器的数据
"dataType":"text", //指定返回的数据格式
"success":"callback", //响应成功后要执行的代码
"error":function(){ //请求失败后要执行的代码
alert("用户名验证时出现错误,请稍后再试");
}
});
//响应成功的回调函数
function callback(data){
if(data=="true"){
$("#nameDIV").html("用户名已被使用");
}else{
$("#nameDIV").html("用户名可以使用");
}
}
</script>