`

Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解

jqueryjava 
阅读更多

Ajax让用户页面丰富起来 , 增强了用户体验 . 使用 Ajax 是所有 Web 开发的必修课 . 虽然 Ajax 技术并不复杂 , 但是实现方式还是会因为每个开发人员的而有所差异 .jQuery 提供了一系列 Ajax 函数来帮助我们统一这种差异 , 并且让调用 Ajax 更加简单 . Ajax最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load()函数即可。然后如果要用普通的ajax的话会使用大量的代码来实现。下面我们就来看一下 jquery 中的 ajax 。


 

一：jQueryAjax详解


jQuery提供了几个用于发送 Ajax 请求的函数 . 其中最核心也是最复杂的是 jQuery.ajax(options) ,所有的其他 Ajax 函数都是它的一个简化调用 . 当我们想要完全控制 Ajax 时可以使用此结果 , 否则还是使用简化方法如 get,post,load 等更加方便 . 所以 jQuery.ajax(options) 方法放到最后一个介绍. 先来介绍最简单的 load 方法 :


1.load(url,[data],[callback])：载入远程HTML文件代码并插入至DOM中。


Returns:jQuery包装集

url(String):请求的HTML页的URL地址。

data(Map):(可选参数)发送至服务器的key/value数据。

callback(Callback):(可选参数)请求完成时(不需要是success的)的回调函数。

 

说明:

load方法能够载入远程HTML文件代码并插入至DOM中。

默认使用GET方式,如果传递了data参数则使用Post方式.

-传递附加参数时自动转换为POST方式。jQuery1.2中，可以指定选择符，来筛选载入的HTML文档，DOM中将仅插入筛选出的HTML代码。语法形如"url#some>selector",默认的选择器是"body>*".

讲解:

load是最简单的Ajax函数,但是使用具有局限性:

1 它主要用于直接返回HTML的Ajax接口

2 load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回调函数也还是会加载.


不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

 

 <scripttype="text/javascript" src="../scripts/jquery-1.3.2-min.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("#btnAjaxGet").click(function(event)
            {
                //发送Get请求
                $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
            });
            $("#btnAjaxPost").click(function(event)
            {
                //发送Post请求
                $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
            });
            $("#btnAjaxCallBack").click(function(event)
            {
                //发送Post请求, 返回后执行回调函数.
                $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
                {
                    responseText = " Add in the CallBack Function! <br/>" + responseText
                    $("#divResult").html(responseText); //或者: $(this).html(responseText);
                });
            });
            $("#btnAjaxFiltHtml").click(function(event)
            {
                //发送Get请求, 从结果中过滤掉 "鞍山" 这一项
                $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
            });
        })
    </script>
</head>
<body>    
    <button id="btnAjaxGet">使用Load执行Get请求</button><br />
    <button id="btnAjaxPost">使用Load执行Post请求</button><br />
    <button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
    <button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
    <br />
    <div id="divResult"></div>
</body>
</html>

 

 

上面的示例演示了如何使用Load 方法 .

提示: 我们要时刻注意浏览器缓存 , 当使用 GET 方式时要添加时间戳参数 (netDate()).getTime() 来保证每次发送的 URL 不同 , 可以避免浏览器缓存 .

提示: 当在 url 参数后面添加了一个空格 , 比如 "" 的时候 , 会出现 " 无法识别符号 " 的错误 , 请求还是能正常发送 . 但是无法加载 HTML 到 DOM. 删除后问题解决 .


 

2.jQuery.get(url,[data],[callback])：使用GET方式来进行异步请求

参数：

url (String):发送请求的URL地址.

data (Map):(可选)要发送给服务器的数据，以Key/value的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的GET请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： 

$.get("./Ajax.aspx", {Action:"get",Name:"caoshenghuan"}, function (data, textStatus){
                //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
                this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
                alert(data);
                //alert(textStatus);//请求状态：success，error等等。
                                  当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
                //alert(this);
        });

 

 

点击发送请求：

jQuery.get()回调函数里面的this，指向的是Ajax请求的选项配置信息：


 

3. jQuery.post(url,[data],[callback],[type])

Returns: XMLHttpRequest

说明:

通过远程HTTPPOST请求载入信息。

这是一个简单的POST请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

讲解:

具体用法和get相同,只是提交方式由"GET"改为"POST".


4.jQuery.getScript(url,[callback]):通过GET方式请求载入并执行一个JavaScript文件。

参数

url (String):待载入 JS 文件地址。

callback (Function):(可选 ) 成功载入后回调函数。

jQuery1.2版本之前， getScript 只能调用同域 JS 文件。 1.2 中，您可以跨域调用 JavaScript 文件。注意： Safari2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

这个方法可以用在例如当只有编辑器focus() 的时候才去加载编辑器需要的 JS 文件 . 下面看一些示例代码：

加载并执行test.js 。 jQuery代码 :

$.getScript("test.js");

 

加载并执行AjaxEvent.js ，成功后显示信息。


5 . jQuery.ajax(options)

Returns: XMLHttpRequest

说明:

通过HTTP 请求加载远程数据。

jQuery底层 AJAX 实现。简单易用的高层实现见 $.get,$.post 等。

$.ajax()返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

$.ajax()只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

注意：如果你指定了dataType 选项，请确保服务器返回正确的 MIME 信息， ( 如 xml 返回 "text/xml") 。错误的 MIME 类型可能导致不可预知的错误。见 SpecifyingtheDataTypeforAJAXRequests 。

注意：如果dataType 设置为 "script" ，那么所有的远程 ( 不在同一域名下 ) 的 POST 请求都将转化为 GET 请求。 ( 因为将使用 DOM 的 script 标签来加载 )

jQuery1.2中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP 。使用 JSONP 形式调用函数时，如"myurl?callback=?"jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时， jQuery 将自动调用回调函数。

讲解:

这是jQuery 中 Ajax 的核心函数 , 上面所有的发送 Ajax 请求的函数内部最后都会调用此函数 .options 参数支持很多参数 , 使用这些参数可以完全控制 ajax 请求 . 在 Ajax 回调函数中的 this 对象也是 options 对象 .

因为平时使用最多的还是简化了的get 和 post 函数 , 所以在此不对 options 参数做详细讲解了 .options 参数文档请见 :

http://docs.jquery.com/Ajax/jQuery.ajax#options


参数列表：

参数名

类型

描述

url

String

(默认 : 当前页地址 ) 发送请求的地址。

type

String

(默认 :"GET") 请求方式 ("POST" 或 "GET") ，默认为 "GET" 。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

timeout

Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

async

Boolean

(默认 :true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false 。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend

Function

发送请求前可修改XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest){

this ; //theoptionsforthisajaxrequest

}

cache

Boolean

(默认 :true)jQuery1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。

complete

Function

请求完成后回调函数( 请求成功或失败时均调用 ) 。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest,textStatus){

this ; //theoptionsforthisajaxrequest

}

contentType

String

(默认 :"application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data

Object,
String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组， jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1","bar2"]} 转换为 '&foo=bar1&foo=bar2' 。

dataType

String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText ，并作为回调函数参数传递，可用值 :

"xml":返回 XML 文档，可用 jQuery 处理。

"html":返回纯文本 HTML 信息；包含 script 元素。

"script":返回纯文本 JavaScript 代码。不会自动缓存结果。

"json":返回 JSON 数据。

"jsonp": JSONP 格式。使用JSONP 形式调用函数时，如"myurl?callback=?"jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

error

Function

(默认 : 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数： XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest,textStatus,errorThrown){

//通常情况下 textStatus 和 errorThown 只有其中一个有值

this ; //theoptionsforthisajaxrequest

}

global

Boolean

(默认 :true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的 Ajax 事件

ifModified

Boolean

(默认 :false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData

Boolean

(默认 :true) 默认情况下，发送的数据将被转换为对象 ( 技术上讲并非字符串 ) 以配合默认内容类型 "application/x-www-form-urlencoded" 。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false 。

success

Function

请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data,textStatus){

//datacouldbexmlDoc,jsonObj,html,text,etc...

this ; //theoptionsforthisajaxrequest

}

这里有几个Ajax 事件参数： beforeSend ， success ， complete， error 。 我们可以定义这些事件来很好的处理我们的每一次的Ajax 请求。注意一下，这些 Ajax 事件里面的 this 都是指向Ajax 请求的选项信息的 ( 请参考说 get() 方法时的 this 的图片 ) 。
请认真阅读上面的参数列表，如果你要用jQuery 来进行 Ajax 开发，那么这些参数你都必需熟知的。

示例代码，获取 CSDN 首页的文章题目：

 

$.ajax({
        type: "get",
        url: "http://www.blog.csdn.net",
        beforeSend: function(XMLHttpRequest){
            //ShowLoading();
        },
        success: function(data, textStatus){
            $(".ajax.ajaxResult").html("");
            $("item",data).each(function(i, domEle){
                $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
            });
        },
        complete: function(XMLHttpRequest, textStatus){
            //HideLoading();
        },
        error: function(){
            //请求出错处理
        }
});


 

二 .Ajax相关函数 .


jQuery提供了一些相关函数能够辅助 Ajax 函数 .

1.jQuery.ajaxSetup(options)


无返回值

说明:

设置全局AJAX 默认 options 选项。

讲解:

有时我们的希望设置页面上所有Ajax 属性的默认行为 . 那么就可以使用此函数设置 options 选项 , 此后所有的 Ajax 请求的默认 options 将被更改 .

options是一个对象 , 可以设置的属性请此连接： http://docs.jquery.com/Ajax/jQuery.ajax#toptions

比如在页面加载时, 我使用下面的代码设置 Ajax 的默认 option 选项 : 

$.ajaxSetup({
                url: "../data/AjaxGetMethod.aspx",
                data: { "param": "ziqiu.zhang" },
                global: false,
                type: "POST",
                success: function(data, textStatus) { $("#divResult").html(data); }
            });

 

 

上面的代码设置了一个Ajax 请求需要的基本数据 : 请求 url, 参数 , 请求类型 , 成功后的回调函数 .

此后我们可以使用无参数的get(),post() 或者 ajax() 方法发送 ajax 请求 . 完整的示例代码如下 :


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Ajax - Load</title>
    <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $.ajaxSetup({
                url: "../data/AjaxGetMethod.aspx",
                data: { "param": "ziqiu.zhang" },
                global: false,
                type: "POST",
                success: function(data, textStatus) { $("#divResult").html(data); }
            });
            $("#btnAjax").click(function(event) { $.ajax(); });
            $("#btnGet").click(function(event) { $.get(); });
            $("#btnPost").click(function(event) { $.post(); });
            $("#btnGet2").click(function(event) { $.get("../data/AjaxGetMethod.aspx",{ "param": "other" }); });
        });
    </script>
</head>  
<body>    
    <button id="btnAjax">不传递参数调用ajax()方法</button><br />
    <button id="btnGet">不传递参数调用get()方法</button><br />
    <button id="btnPost">不传递参数调用post()方法</button><br />
    <button id="btnGet2">传递参数调用get()方法, 使用全局的默认回调函数</button><br />
    <br />
    <div id="divResult"></div>
</body>
</html>


 

注意当使用get() 或者 post() 方法时 , 除了 type 参数将被重写为 "GET" 或者 "POST" 外 , 其他参数只要不传递都是使用默认的全局 option. 如果传递了某一个选项 , 比如最后一个按钮传递了 url 和参数 , 则本次调用会以传递的选项为准 . 没有传递的选项比如回调函数还是会使用全局 option 设置值 .

2. serialize()

Returns: String

说明:

序列表表格内容为字符串，用于Ajax 请求。

序列化最常用在将表单数据发送到服务器端时. 被序列化后的数据是标准格式 , 可以被几乎所有的而服务器端支持 .

为了尽可能正常工作, 要求被序列化的表单字段都有 name 属性 , 只有一个 eid 是无法工作的 .

像这样写name 属性 :


< input id ="email" name ="email" type ="text" />


讲解:

serialize()函数将要发送给服务器的 form 中的表单对象拼接成一个字符串 . 便于我们使用 Ajax 发送时获取表单数据 . 这和一个 From 按照 Get 方式提交时 , 自动将表单对象的名 / 值放到 url 上提交差不多 .

比如这样一个表单:

生成的字符串为:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1

提示: 代码见 chapter6\7-serialize.htm

3. serializeArray()

Returns: Array < Object >

说明:

序列化表格元素( 类似 '.serialize()' 方法 ) 返回 JSON 数据结构数据。

注意，此方法返回的是JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

讲解:

看说明文档让我有所失望, 使用此函数获取到的是 JSON 对象 , 但是 jQuery 中没有提供将 JSON 对象转化为 JSON 字符串的方法 .

在JSON 官网上没有找到合适的 JSON 编译器 , 最后选用了 jquery.json 这个 jQuery 插件 :

http://code.google.com/p/jquery-json/

使用起来异常简单:

 

var thing = {plugin: 'jquery-json', version: 1.3};
var encoded = $.toJSON(thing);              //'{"plugin": "jquery-json", "version": 1.3}'
var name = $.evalJSON(encoded).plugin;      //"jquery-json"
var version = $.evalJSON(encoded).version;  // 1.3


 

使用 serializeArray() 再配合 $.toJSON方法, 我们可以很方便的获取表单对象的 JSON, 并且转换为 JSON 字符串 :


$("#results" ).html($.toJSON($("form" ).serializeArray()));


结果为:


[{"name" :"single" ,"value" :"Single" },{"name" :"param" ,"value" :"Multiple" },{"name" :"param" ,"value" :"Multiple3" },{"name" :"check" ,"value" :"check2" },{"name" :"radio" ,"value" :"radio1" }]

六. 全局 Ajax 事件

在 jQuery.ajaxSetup(options) 中的options 参数属性中 , 有一个 global 属性 :

global

类型: 布尔值

默认值: true

说明: 是否触发全局的Ajax 事件 .

这个属性用来设置是否触发全局的Ajax 事件 . 全局 Ajax 事件是一系列伴随 Ajax 请求发生的事件 . 主要有如下事件 :

名称

说明

ajaxComplete(callback)

AJAX请求完成时执行函数

ajaxError(callback)

AJAX请求发生错误时执行函数

ajaxSend(callback)

AJAX请求发送前执行函数

ajaxStart(callback)

AJAX请求开始时执行函数

ajaxStop(callback)

AJAX请求结束时执行函数

ajaxSuccess(callback)

AJAX请求成功时执行函数

用一个示例讲解各个事件的触发顺序:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Ajax - AjaxEvent</title>
    <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#btnAjax").bind("click", function(event)
            {
                $.get("../data/AjaxGetMethod.aspx");
            })
            $("#divResult").ajaxComplete(function(evt, request, settings) { $(this).append('<div>ajaxComplete</div>'); })
            $("#divResult").ajaxError(function(evt, request, settings) { $(this).append('<div>ajaxError</div>'); })
            $("#divResult").ajaxSend(function(evt, request, settings) { $(this).append('<div>ajaxSend</div>'); })
            $("#divResult").ajaxStart(function() { $(this).append('<div>ajaxStart</div>'); })
            $("#divResult").ajaxStop(function() { $(this).append('<div>ajaxStop</div>'); })
            $("#divResult").ajaxSuccess(function(evt, request, settings) { $(this).append('<div>ajaxSuccess</div>'); })
        });
    </script>
</head>
<body>    
  <br /><button id="btnAjax">发送Ajax请求</button><br/>
  <div id="divResult"></div>
</body>
</html>

 

 

我们可以通过将默认options 的 global 属性设置为 false 来取消全局 Ajax 事件的触发 .

 

分享到：
| Java程序员面试中的多线程问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java程序员-从笨鸟到菜鸟.pdf

    java程序员-从笨鸟到菜鸟.pdf

    [网盘]java程序员由菜鸟到笨鸟.pdf

    ### Java程序员成长之路——从菜鸟到笨鸟 #### 一、引言 《Java程序员由菜鸟到笨鸟》是一本由曹胜欢编写的书籍，旨在帮助初学者掌握Java编程的基础知识，并逐步进阶至更高级的应用场景。本书不仅适合初学者作为...

    Java程序员由菜鸟到笨鸟学习文档

    Java程序员的成长之路是一个充满挑战与探索的过程，从初学者到熟练掌握各项技能，需要系统性的学习和实践。"Java程序员由菜鸟到笨鸟学习文档"就是这样一个旨在帮助初入Java世界的学习者逐步进阶的资源。它覆盖了从...

    JAVA程序员 从笨鸟到菜鸟.pdf

    曹胜欢在《JAVA程序员 从笨鸟到菜鸟.pdf》中分享了他个人学习Java的经历，从迷茫到逐渐成长的过程。他强调了自学的重要性，并鼓励初学者不要怕走弯路，同时希望自己的经验可以帮助到同样在学习Java的初学者。 2. ...

    java程序员从笨鸟到菜鸟

    ### Java程序员从笨鸟到菜鸟 #### 一、开发环境搭建与基本语法 ##### 开发环境搭建 在开始Java的学习之前，首先需要搭建一个合适的开发环境。这通常涉及到以下步骤： 1. **JDK（Java Development Kit）安装**：...

    《Java程序员-从笨鸟到菜鸟》PDF下载

    资源名称：《Java程序员-从笨鸟到菜鸟》PDF 下载资源目录：作者简介：..........................................................................................................................................

    java程序员由菜鸟到笨鸟

    《java程序员由菜鸟到笨鸟》 刚开始学习java时看过的一个学习资料。 其中包括开发环境搭建、面向对象、Javascript、设计模式、SSH、jquery、java虚拟机等内容。 设计内容较广，可以学习参考。

    [网盘]java程序员由菜鸟到笨鸟.pdf.2018_03_19

    以上内容只是《Java程序员由菜鸟到笨鸟》这本书中可能涵盖的部分知识点。对于初学者来说，系统地学习这些基础知识是非常重要的，因为它们构成了Java编程的基础，也是进一步学习高级主题的基石。希望这些内容能够帮助...

    [网盘]java程序员由菜鸟到笨鸟.pdf.2018_03_17

    根据提供的文件信息，“Java程序员由菜鸟到笨鸟”是一本旨在帮助初学者成长为合格Java开发者的书籍。本书作者为曹胜欢，发布日期为2018年3月17日。以下是从该书的标题、描述以及部分可能包含的内容中提炼出的关键...

    黑马程序员-Java语言进阶-源码、教程笔记.zip

    day01_Object类、常用API day02_Collection、泛型 day03_List、Set、数据结构、Collections day04_Map，斗地主案例 day05_异常，线程 day06_线程、同步 day07_等待与唤醒案例、线程池、Lambda...Java基础小节练习题答案

    java游戏笨鸟

    《Java游戏：笨鸟》（也称为FlappyBird）是一款基于Java编程语言开发的简单游戏，旨在帮助初学者更好地理解和掌握Java编程基础。这款游戏的实现涉及了许多Java编程的关键概念和技术，下面将对这些知识点进行详细阐述...

Magicbox
Global site tag (gtag.js) - Google Analytics