JavaWeb 第6章 Ajax 与 JQuery 任务2：使用 jQuery 发送 Ajax请求

任务2：使用 jQuery 发送 Ajax请求

前面介绍了如何使用原生 JavaScript 实现 Ajax 技术来提升用户体验。但是通过

原生 JavaScript 实现 Ajax 相对比较复杂，并且如果服务器返回复杂结构的数据（如

XML 格式），处理起来相对比较繁琐，此外还要考虑浏览器的兼容性等一系列问题。

而 jQuery 将 Ajax 相关的操作都进行了封装，只需简单调用一个方法即可完成请求发

送和复杂格式结果的解析。相比而言，使用 jQuery 实现 Ajax 更加简洁方便且结构

清晰。

jQuery 的 $.ajax() 方法可以通过发送 HTTP 请求加重远程数据，是jQuery 最底层

的 Ajax 实现，具有较高灵活性。

语法

$.ajax([settings]);

参数 settings 是 $.ajax() 方法的参数列表，用于配置 Ajax 请求的键值对集合。需用

配置参数如表 6-4 所示。

表 6-4 $.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 setting)	发送请求前调用的函数，可用于设置请求头等，返回 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, Strign textStatus)	请求完成后调用的函数（请求成功或失败均可调用）参数 jqxhr: 可选参数 textStatus: 可选，描述请求状态的字符串
timeout	Number	设置请求超时时间
gloal	Boolean	默认为 true, 表示是否触发全局 Ajax 事件

如表 6-4 所示为常用配置参数，如果有特殊需求或想了解更多细节可以参考 jQuery

官方文档。

了解了 $.ajax() 方法的常用参数后，接下来介绍如何使用 $.ajax() 方法实现 Ajax

无刷新远程请求服务器功能。

以示例1 中实现的用户名验证功能为例，如果使用 jQuery 提供的 $.ajax() 方法实

现发送 Ajax 异步请求，代码如示例 3 所示。

示例 3

$.ajax({
        "url"        :"userServlet",            //要提交的 URL 路径
        "type"       :"GET",                    //发送请求的方式
        "data"       :"name="+name,             //要发送到服务器的数据
        "dataType"   :"text",                   //指定返回的数据格式
        "sucess"     :"callBack",               //响应成功后执行的回调函数
        "error"      :function(){               //请求失败后执行的代码
                alert("用户名验证时出现错误，请稍后再试或与管理员联系！")；
        }
})；

//响应成功后的回调函数
function callBack(data){//传入参数 data 表示响应结果
    if(data=="true"){
        $("#nameDiv").html("用户名已被使用！");
    }else{
        $("#nameDiv").html("用户名可以使用！");
    }
}

注意

$.ajax() 方法的参数语法比较特殊。参数列表需要包含在一对花括号 "{ }" 之

间；每个参数以 "参数名" ："参数值" 的方式书写；如有多个参数，以逗号 " , "

隔开。

此语法即为一种重要的数据类型： JSON 。有关 JSON 的内容将在后面详细

介绍，这里先简单了解即可。

读了上面的关键代码，就会发现它与原生 JavaScript 实现 Ajax 相比要简洁清晰很

多。只需要几个参数即可。其中，success 参数用来处理成功响应，相当于原生

JavaScript 实现 Ajax 时回调函数中响应成功的分支； error 参数则相当于错误分支，在

该函数中执行程序出错后的操作，如给出提示信息等。另外，需要注意的是，不需要

特别设定的参数可以省略。

技巧

（1） beforeSend 回调函数除了可以修改请求参数外，还可以添加一些业务功

能，以提升用户体验。例如，如果请求耗时较长，可在请求提交前显示一条提示

信息，提醒用户正在处理中，以免用户认为没有响应而重复操作。

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

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

"beforeSend" : function(){
        $("#loading").show();//显示提示信息
        $("#submit").attr("disabled" , "disabled");//禁用提交按钮
}//若后面还有其他参数，这里应加上 " , "

（2）complete 回调函数则类似于 Java 代码中 finally 语句块的特点。列如，无

论是否成功，响应结束后都要隐藏 "处理中" 提示并将提交按钮恢复为可用状态。

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

技能训练

上机练习2——使用 $.ajax() 方法实现异步检查注册邮箱是否已经存在

需求说明

使用 $.ajax() 方法重新实现上机练习 1 的需求。

提示

参考示例 3 代码

JavaWeb 第6章 Ajax 与 JQuery 任务2：使用 jQuery 发送 Ajax请求

猜你喜欢