使用jQuery实现Ajax

  • 使用jQuery实现Ajax
  • $.ajax()方法


使用jQuery实现Ajax

前面介绍了如何使用原生的JavaScript实现Ajax技术，但是太麻烦了而且返回的数据如果是复杂的数据结构处理起来也很麻烦想对比而言没使用jQuery实现Ajax更加简洁方便且结构清晰。

$.ajax()方法

$.ajax()可以通过发送HTTP请求加载远程数据，是jQuery最底层的Ajax实现，具有较高灵活性。
语法： $.ajax([settings]);
参数settings是 $.ajax()方法的参数列表，用于配置Ajax请求和键值对集合。常用的配置参数如下。

参数

类型

说明

url

String

发送请求的地址，默认为当前页地址

type

String

请求方式(POST 或GET，默认为GET)，1.9.0之后的版本可以使用method代替type

data

PlainObject或String或Array

发送到服务器的数据

dataType

String

预期服务器返回的数据类型，可用的类型有XML、HTML、Script、JSON、JSONP、Text

beforeSend

Function(jqXHR jqxhr,PlainObject settings)

发送请求前调用的函数，可用于设置请求头等，返回false将终止请求。参数jqxhr：可选，jqXHR是XMLHttpRequest的超集 参数settings：可选，当前ajax()方法的settings对象

success

Function(任意类型 result，String textStatus，jqXHR jqxhr)

请求成功后调用的函数 参数result：可选，有服务器返回的数据 参数textStatus：可选，描述请求状态的字符串 参数jqxhr：可选

error

Function(jqXHR jqxhr,String textStatus,String errorThrown)

请求失败时被调用的函数 参数jqxhr：可选 参数textStatus：可选，错误信息 参数errorThrown：可选，文本描述的Http状态

complete

Function(jqXHR jqxhr,String textStatus)

请求完成后调用的函数(请求成功或失败时均调用) 参数jqxhr：可选 参数textStatus：可选，描述请求状态的字符串

timeout

Number

设置请求超时时间

global

Boolean

默认为true，表示是否触发全局Ajax事件

示例如下：

$.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("用户名可以用！");
	}

});

注意： $.ajax() 方法的参数语法比较特殊。参数列表需要包含一对花括号"{}"之间；每个参数以“参数名”：“参数值” 的方式书写；如有多个参数，以逗号“，”隔开。
此语法即为一种重要的数据类型：JSON。
看了上面的代码就会发现它与原始JavaScript实现Ajax相比要简洁清晰很多。只需要设置几个参数即可。其中，success函数来处理响应，相当于原生JavaScript实现Ajax时，回调函数中响应成功的分支；error函数则相当于错误分支，在函数执行程序出错误的操作，如给出提示信息等。另外，要注意的是，不需要特别设定的参数可以省略。
技巧： beforeSend回调函数除了可以修改请求参数外，还可以添加一些业务功能，以提升用户体验。例如，如果请求耗时较长，可以在请求提交前显示一条提示信息，提醒用户正在处理中，以免用户认为没有响应而重复操作。

"beforeSend":function(){
		$("#loading").show();//#loading为带有提示信息的div元素
	}//若还有其他参数，这里应加","

还可以进一步禁用“提交”按钮，以杜绝用户的重复操作。

"beforeSend":function(){
		$("#loading").show();//#loading为带有提示信息的div元素
		$("#submit").attr("disable","disable"); //禁用“提交按钮”
	}//若还有其他参数，这里应加","

（2）complete 回调函数则类似于Java代码中的finally语句块的特点。例如，无论是否成功，响应结束后都要隐藏“处理中”提示并将“提交”按钮恢复可用。

"complete":function(){
	$("#loading").hide(); //隐藏提示
	$("#submit").removeAttr("disabled");//恢复按钮可用
}//若还有其他参数，这里应加","