- 浏览: 137220 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
gezi2213:
...
HttpClient及有关jar包详解 -
sailor119:
学习一下!
〖ExtJS〗之ToolBar
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 ,成功后显示信息。
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
对象是唯一的参数。
this ; //theoptionsforthisajaxrequest } |
cache |
Boolean |
(默认 :true)jQuery1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 |
complete |
Function |
请求完成后回调函数(
请求成功或失败时均调用
)
。参数:
XMLHttpRequest
对象,成功信息字符串。
this ; //theoptionsforthisajaxrequest } |
contentType |
String |
(默认 :"application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
data |
Object,
|
发送到服务器的数据。将自动转换为请求字符串格式。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
对象,错误信息,(可能)捕获的错误对象。
//通常情况下 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 |
请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
//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 函数 .
无返回值
说明:
设置全局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
说明:
序列化表格元素( 类似 '.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 请求发生的事件 . 主要有如下事件 :
名称 |
说明 |
AJAX请求完成时执行函数 |
|
AJAX请求发生错误时执行函数 |
|
AJAX请求发送前执行函数 |
|
AJAX请求开始时执行函数 |
|
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 - 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程序员从笨鸟到菜鸟之(九十)跟我学jquery(六)jquery中事件详解
2012-07-24 08:13 834由于jquery本身就是 web 客户端的有力帮手, ... -
Java程序员从笨鸟到菜鸟之(九十一)跟我学jquery(七)jquery动画大体验
2012-08-10 11:46 746本文来自:曹胜欢博客专栏。转载请注明出处:http://blo ... -
Java程序员从笨鸟到菜鸟之(九十二)深入java虚拟机(一)——java虚拟机底层结构详解
2012-09-03 11:27 642本文来自:曹胜欢博客专栏。转载请注明出处:http://b ... -
Java程序员从笨鸟到菜鸟之(九十三)深入java虚拟机(二)——类的生命周期(上)类的加载和连接
2012-09-05 10:30 653本文来自:曹胜欢 ... -
Java程序员从笨鸟到菜鸟之(九十四)深入java虚拟机(三)——类的生命周期(下)类的初始化
2012-09-08 15:00 565上接深入java 虚拟机 —— 深入 ... -
Java程序员从笨鸟到菜鸟之(九十五)深入java虚拟机(四)——java虚拟机的垃圾回收机制
2012-10-06 10:11 724Java语言从出现 ... -
Java程序员从笨鸟到菜鸟之(九十六)深入java虚拟机(五)——java本地接口JNI详解
2012-10-12 09:25 631对于java程序员来说, java 语 ... -
Java程序员从笨鸟到菜鸟之(九十七)深入java虚拟机(六)——类加载的父亲委托机制
2012-10-16 12:11 626在前面两篇博客中我们简单介绍了类加载器 ... -
Java程序员从笨鸟到菜鸟之(九十八)深入java虚拟机(七)深入源码看java类加载器ClassLoader
2012-10-19 11:34 667欢迎阅读本专题的其 ... -
Java程序员从笨鸟到菜鸟之(九十九)深入java虚拟机(八)开发自己的类加载器
2012-10-22 09:26 741欢迎阅读本专题的其他博客: ... -
Java程序员从笨鸟到菜鸟之(一百)sql注入攻击详解(一)sql注入原理详解
2012-10-24 08:00 741前段时间,在很多博客和微博中暴漏出了123 ... -
Java程序员从笨鸟到菜鸟之(一百零一)sql注入攻击详解(二)sql注入过程详解
2012-10-25 10:12 761在上篇博客中 ...
相关推荐
java程序员-从笨鸟到菜鸟.pdf
### Java程序员成长之路——从菜鸟到笨鸟 #### 一、引言 《Java程序员由菜鸟到笨鸟》是一本由曹胜欢编写的书籍,旨在帮助初学者掌握Java编程的基础知识,并逐步进阶至更高级的应用场景。本书不仅适合初学者作为...
Java程序员的成长之路是一个充满挑战与探索的过程,从初学者到熟练掌握各项技能,需要系统性的学习和实践。"Java程序员由菜鸟到笨鸟学习文档"就是这样一个旨在帮助初入Java世界的学习者逐步进阶的资源。它覆盖了从...
曹胜欢在《JAVA程序员 从笨鸟到菜鸟.pdf》中分享了他个人学习Java的经历,从迷茫到逐渐成长的过程。他强调了自学的重要性,并鼓励初学者不要怕走弯路,同时希望自己的经验可以帮助到同样在学习Java的初学者。 2. ...
资源名称:《Java程序员-从笨鸟到菜鸟》PDF 下载资源目录:作者简介:..........................................................................................................................................
《java程序员由菜鸟到笨鸟》 刚开始学习java时看过的一个学习资料。 其中包括开发环境搭建、面向对象、Javascript、设计模式、SSH、jquery、java虚拟机等内容。 设计内容较广,可以学习参考。
以上内容只是《Java程序员由菜鸟到笨鸟》这本书中可能涵盖的部分知识点。对于初学者来说,系统地学习这些基础知识是非常重要的,因为它们构成了Java编程的基础,也是进一步学习高级主题的基石。希望这些内容能够帮助...
根据提供的文件信息,“Java程序员由菜鸟到笨鸟”是一本旨在帮助初学者成长为合格Java开发者的书籍。本书作者为曹胜欢,发布日期为2018年3月17日。以下是从该书的标题、描述以及部分可能包含的内容中提炼出的关键...
day01_Object类、常用API day02_Collection、泛型 day03_List、Set、数据结构、Collections day04_Map,斗地主案例 day05_异常,线程 day06_线程、同步 day07_等待与唤醒案例、线程池、Lambda...Java基础小节练习题答案
《Java游戏:笨鸟》(也称为FlappyBird)是一款基于Java编程语言开发的简单游戏,旨在帮助初学者更好地理解和掌握Java编程基础。这款游戏的实现涉及了许多Java编程的关键概念和技术,下面将对这些知识点进行详细阐述...