第六章(jQuery 与 Ajax 的应用)(6.5 jQuery 中的 Ajax)
jQuery 对 Ajax 操作进行了封装,在 jQuery 中 $.ajax() 方法属于最底层的方法,第二层是 load() / $.get() / $.post() 方法,第三层是 $.getScript() 和 $.getJSON() 方法
6.5.1 load() 方法
1 载入 HTML 文档
load() 方法是 jQuery 中最简单和常用的 Ajax 方法,能载入远程 HTML 代码并插入 DOM中,结构为:
load(url [,data] [, callback]);
参数详解:
参数名称 |
类型 |
说明 |
url |
String |
请求HTML 页面的URL地址 |
Data(可选) |
Object |
发送至服务器的 key/value 数据 |
Callback(可选) |
Function |
请求完成时的回调函数,无论请求成功或失败 |
首先构建一个被 load() 方法加载并追加到页面中的 HTML 文件,名字为 test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="comment"> <h6>张三:</h6> <p class="para">沙发.</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地板.</p> </div> </body> </html>
新建空白页面,添加一个 <button> 按钮用来触发 Ajax 事件,id 为“resTest” 的元素用来显示追加的 HTML 内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> </head> <body> <input type="button" id="sent" value="Ajax获取" name=""> <div class="comment"> 已有评论: </div> <div id="resText"></div> </body> </html>
接下来编写 jQ 代码,等DOM元素加载完毕后,通过单击 id 为“send”的按钮来调用 load() 方法,然后将test.html 的内容加载到 id 为“resText” 的元素中
<script type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html"); }) }) </script>
将HTML文档和 text.html 文档放在同一目录下
效果:点击 Ajax 按钮弹出 text.html 文档的内容
总结:
开发人员使用 jQuery 选择器为HTML片段指定目标位置,然后将要加载的文件的 URL 作为参数传递给 load() 方法即可,当单击按钮后, test.html 页面的 HTML 内容会被加载到主页面
♥ test.html 并没有添加样式,但是却有样式,是因为主页面中添加了样式,主页面中相应的样式会立即应用到新加载的内容上。
2 筛选载入的 HTML 文档
上述示例是将 test.html 页面内容都加载到 id 为“resText” 的元素里,如果只需加载 test.html 页面内的某些元素,那么可以使用 load() 方法的 URL 参数来实现,通过为 URL 参数指定选择符,就可以从加载过来的 HTML 文档里筛选出所需内容
load() 方法的 URL 参数语法结构为:"url selector" 需要注意,URL 和选择器之间有一个空格。
$("#resText").load("test.html .para");
修改后实现效果:
加强版,返回各种相关数据:
<script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){ alert( $(this).html() ); //在这里this指向的是当前的DOM对象,即 $("#iptText")[0] alert(responseText); //请求返回的内容 alert(textStatus); //请求状态:success,error alert(XMLHttpRequest); //XMLHttpRequest对象 }); }) }) </script>
3 传递方式
load() 方法的传递方式根据参数 data 来自动指定,如果没有参数传递,则采用 GET 方式传递,反之,则会自动转换为 POST 方式。
// 无参数传递,则是 GET 方式 $("#resText").load("test.php",function(){ //..... }); // 有参数传递,则是 POST 方式 $("resText").load("test.php",function(responseText,textStatus,XMLHttpRequest){ //..... })
4 回调参数
对于必须加载完成后才能继续的操作,load() 方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和 XMLHttpRequest 对象
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){ // responseText 请求返回的内容 // textStatus 请求状态 success/error/notmodified/timeout // XMLHttpRequest XMLHttpRequest对象 })
6.5.2 $.get()方法和 $.post()方法
1. $.get() 方法
$.get() 方法可以使用 GET 方式来进行异步请求
结构为:
$.get(url [, data] [, callback] [, type]);
参数名称 |
类型 |
说明 |
url |
String |
请求的HTML页的URL地址 |
Data(可选) |
Object |
发送至服务器的key/value数据会作为QueryString附加到请求的URL中 |
Callback(可选) |
Function |
载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法 |
Type(可选) |
string |
服务器端返回内容的格式,包括xml/html/script/json/text/_default |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin:0px; padding:5px;} body { font-size:16px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <form action="#" id="form1"> <p>评论:</p> <p>姓名:<input type="text" name="username" id="username"></p> <p>内容:<textarea name="content" id="content" cols="20" rows="2"></textarea></p> <p><input type="button" id="send" value="提交"></p> </form> <div class="comment">已有评论:</div> <div id="resText"></div>
① 使用参数
首先,需要确定请求页面的 URL 地址
$("#send").click(function(){ $.get('get1.php' data参数,回调函数); })
然后,在提交之前,需要获取“姓名”和“内容”的值作为 data 参数传递给后台
$("#send").click(function(){ $.get('get1.php' ,{ username:$("#username").val(), content :$("content").val() }, 回调函数); })
如果服务器端接收到传递的 data 数据并成功返回,那么就可以通过回调函数将返回的数据显示到页面上
$.get() 方法的回调函数只有两个参数
function (data , textStatus){ // data 返回的内容,可以是 xml/html/json等 // textStatus 请求状态 success/error/notmodified/timeout }
data 参数代表请求返回的内容,textStatus参数代表请求状态,而且回调函数只有当数据成功返回(success)后才被调用,这点与 load() 方法不一样。
② 数据格式
服务器返回的数据格式可以有多种,它们都可以完成同样的任务
HTML 片段
由于服务器端返回的数据格式是 HTML 片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中
$(function(){ $("#send").click(function(){ $.get("get1.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 } ); }) })
XML 文档
由于服务器返回的数据格式是 XML 文档,因此需要对返回的数据进行处理,处理 XML 文档与处理 HTML 文档一样,也可以使用常规的 attr() / find() / filter() 以及其他方法
$(function(){ $("#send").click(function(){ $.get("get2.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ var username = $(data).find("comment").attr("username"); var content = $(data).find("comment content").text(); var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; $("#resText").html(txtHtml); // 把返回的数据添加到页面上 }); }) })
返回数据格式为 XML 文档的过程实现起来比 HTML 片段要稍微复杂些,但XML 文档的可移植性非常好,因此以这种格式提供的数据的重用性将极大提高。不过,XML 文档体积相对较大,与其他文件格式想比,解析和操作它们的速度要慢一些。
JSON 文件
之所以会出现JSON格式的文件,是因为 XML 文档体积大和难以解析, JSON 和 XML 一样,也可以方便的被重用,而且,JSON 文件非常简洁,也容易阅读
由于服务器端返回的数据格式是 JSON 文件,因此需要对数据进行处理后,才可以将新的HTML 数据添加到主页面中
$(function(){ $("#send").click(function(){ $.get("get3.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ var username = data.username; var content = data.content; var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; $("#resText").html(txtHtml); // 把返回的数据添加到页面上 },"json"); }) })
将上述$.get() 方法的第四个参数(type)设置为“json”来代表期待服务器端返回的数据格式
HTML / XML / JSON 三种数据格式都可以达到上述效果。进行优缺点分析
不需要与其他应用程序共享数据的时候,使用HTML 片段来提供返回数据是最简单的
如果数据需要重用,那么可以选择JSON,其性能和文件大小方面都有优势
当远程应用程序未知时,使用XML 文档最好,它是WEB服务领域的“世界语”,通用。
2 $.post() 方法
与 $.get() 方法的结构和使用方式都相同,不过也是有区别:
①GET 请求会将参数跟在URL 后进行传递,而 POST 请求则是作为 HTTP 消息的实体内容发送给 WEB 服务器,当然,在 Ajax 请求中,这种区别对用户是不可见的。
②GET 方式对传输的数据大小有限制(通常不能大于 2KB),而使用 POST 方式传递的数据量要比 GET 方式大很多(理论上不受限制)
③GET 方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史纪录中读取到这些数据,例如账号密码等,在某种情况下,GET 方式会带来严重的安全问题,而POST 方式相对来说就可以避免这些问题
④GET 方式和POST 方式传递的数据在服务器端的获取也不相同。在PHP 中,GET方式的数据可以用 $_GET[] 获取,而POST 方式可以用 $_POST[] 来获取,但是两种方式都可以用 $_REQUEST[] 来获取。
由于POST 和GET 方式提交的所有数据都可以通过 $_REQUEST[] 来获取,因此只需要改变 jQuery 函数,就可以将程序在 GET 和 POST 请求之间切换。
$(function(){ $("#send").click(function(){ $.post("post1.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 } ); }) })
当load() 方法带有参数时,会使用 POST 方法发送请求,因此也可以使用 load()方法来完成同样的功能
$(function(){ $("#send").click(function(){ $("#resText").load("post1.php",{ username : $("#username").val() , content : $("#content").val() }) }) })
6.5.3 $.getScript() 方法和 $.getJson() 方法1.
1. $getScript()
有时候,在页面初次加载时就取得所需的全部 Javascript 文件是完全没有必要的,虽然可以在需要哪个javascript文件时,动态地创建 <script>标签。如下代码:
$(document.createElement("script")).attr("src","test.js").appendTo("head"); //或者 $("<script type='text/javascript' src='test.js'>").appendTo("head");
但是这种方式并不理想,所以,jQ 提供了 $.getScritp() 方法来直接加载 js 文件,与加载 HTML 片段一样方便,并且不需要对 javascript 文件进行处理,javascript 文件会自动执行
$(function(){ $('#send').click(function(){ $.getScript('test.js'); }) })
创建test.js 文件
var comments = [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]; var html = ''; $.each( comments , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html);
将test.js加载到 HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin:0px; padding:5px;} body { font-size:16px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} </style> </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论:</div> <div id="resText" > </div> <script> $(function(){ $("#send").click(function(){ $.getScript('test.js'); }) }) </script> </body> </html>
效果如图,点击加载,会加载出 test.js 文件内容。
与其他Ajax方法一样,$.getScript() 方法也有回调函数,它会在 javascript 文件成功载入后运行,例如想载入 jQ 官方颜色动画插件(jQuery.coloc.js),成功后给元素绑定颜色变化动画,就可以用到 $.getScript() 方法的回调函数
将 jQuery.js 和 jQuery.coloc.js 和 HTML 文件放在同以文件夹下
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px; margin-top: 50px;margin-left: 50px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} .block{width:80px;height:80px;background:#DDD;} </style> </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <button id="go">运行</button><br/><br/> <div class="block"></div> <script> $(function(){ $.getScript('jquery.color.js',function(){ $("<p>加载JavaScript完毕</p>").appendTo("body"); $("#go").click(function(){ $(".block").animate( {backgroundColor: 'pink'},1000) .animate({backgroundColor: 'blue'},1000) }); }); }) </script> </body> </html>
当 jquery.color.js 动画插件加载完毕后,单击 id 为 “go” 的按钮时,class 为 block 的元素就有了颜色动画变化,从无色变为粉色,再变为蓝色。
2 $.getJSON()
$.getJSON() 方法用于加载 JSON 文件,与 $.getScript() 方法的用法相同
$(function(){ $('#send').click(function(){ $.getJSON("test.json"); }) })
HTML结构为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论:</div> <div id="resText" > </div> </body> </html>
test.json 的JSON 结构为
[ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]
当单击“加载”按钮后,网页上看不到任何效果,虽然函数加载了 JSON 文件,但是并没有告诉 javascript 对返回的数据如何处理,为此,jQ提供了回调函数,在回调函数里处理返回的数据
<script> $(function(){ $('#send').click(function(){ $.getJSON('test.json',function(data){ // data: 返回的数据 }); }); }) </script>
可以在函数中通过 data 变量来遍历相应的数据,也可以使用迭代方式为每个项构建相应的 HTML 代码,虽然在这里可以使用传统的 for 循环来实现,在 jQ 中提供了一个通用的遍历方法 $.each() ,可以用于遍历对象和数组。
$.each()函数不同于 JQ对象的 each() 方法 ,它是一个全局函数,不操作 jQ 对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数,回调函数拥有两个参数,第一个为对象的成员或者数组的索引,第二个为对应变量或内容
$(function(){ $('#send').click(function(){ $.getJSON('test.json',function(data){ // data: 返回的数据 $('#resText').empty(); var html = ''; $.each(data , function(commentIndex,comment){ html += '<div class= "comment"><h6>' + comment['username']+ ':</h6><p class="para">' + comment['content']+ '</p></div>' }); $('#resText').html(html); }); }); })
上述代码,当返回数据成功后,首先清空 id 为“resText”的元素内容,以便重新构造新的HTML,然后通过 $.each() 循环函数一次遍历每个项,并将遍历出来的内容构建成HTML 代码拼接起来,最后将构建好的 html 添加到 ID 为 “resText” 的元素中。
效果:
点击加载同样能显示 test.json 文件的内容。
6.5.4 $.ajax() 方法
$.ajax() 方法是 jQuery 最底层的 Ajax 实现,其结构为:
$.ajax(options);
该方法只有一个参数,但在这个对象里包含了 $.ajax() 方法所需要的请求设置以及回调函数等信息,参数以 key/value 的形式存在,所有参数都是可选的。
$.ajax() 方法常用参数解释 |
||
参数名称 |
类型 |
说明 |
url |
String |
(默认为当前页地址)发送请求的地址 |
type |
String |
请求方式(POST或GET)默认为 GET,注意其他 HTTP 请求方法,例如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持 |
timeout |
Number |
设置请求超时时间(毫秒),此设置将覆盖$.ajaxSetup() 方法的全局设置 |
data |
Object或string |
发送到服务器的数据,如果已经不是字符串,将自动转换为字符串格式,GET 请求中将附加在 URP后,防止这种自动转换,可以查看processData选项,对象必须为key/value格式,例如({fool:’bar1’,foo2:’bar2’}转换为&foo1 = bar1 &foo2 = bar2.如果是数组,jQ将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为 &foo=bar1&foo=bar2) |
dataType |
String |
预期服务器返回的数据类型,如果不指定它,jQ 将自动根据HTTP包MIME信息返回responseXML 或 responseText,并作为回调函数参数传递。 可用类型如下: Xml:返回XML 文档,可用jQ处理 Hmtl:返回纯文本HTML 信息,包含的script标签会在插入DOM时执行。 Script:返回纯文本javascript代码,不会自动缓存结果,除非设置了cache 参数,注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求 Json:返回JSON数据。 Jsonp:JSONP格式,使用SONP形式调用函数时,例如 myurl?callback=?,jQuery 将自动替换后一个“?”为正确的函数名,以执行回调函数 |
beforeSend |
function |
发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP 头,在beforeSend中如果返回false可以取消本次Ajax请求,XMLHttpRequest对象是唯一的参数 function(XMLHttpRequest){ this;// 调用本次Ajax请求时传递的options参数 } |
complete |
function |
请求完成后调用的回调函数(请求成功或失败时均调用) 参数:XMLHttpRequest对象和一个描述成功请求类型的字符串 function(XMLHttpRequest){ this;//调用本次Ajax请求时传递的options参数 } |
success |
function |
请求成功后调用的回调函数,有2个参数 ①由服务器返回,并根据dataType参数进行处理后的数据 ②描述状态的字符串 function(data,textStatus){ //data 可能是xmlDoc/jsonObj/html/text等等 this;//调用本次Ajax请求时传递的options参数 } |
error |
function |
请求失败时被调用的函数,该函数有3个参数,即 XMLHttpRequest对象/错误信息/捕获的错误对象(可选) Ajax事件函数如下: function(XMLHttpRequest,textStatus,errorThrown){ //通常情况下 textStatus和errorThown只有其中一个包含信息 this;//调用本次Ajax请求时传递的options参数 } |
global |
boolean |
默认为true。表示是否触发全局Ajax事件,设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件 |
之前所用到的 $.load() / $.get() / $.post() / $.getScript() / $.getJSON() 这些方法,都是基于$.ajax() 方法构建的。$.ajax() 方法是 jQuery 最底层的 Ajax实现,因此可以用它来代替前面的所有方法
例如:
用$.ajax() 方法来代替 $.getJSON() 方法
$.getJSON() 方法
$(function(){ $('#send').click(function(){ $.getJSON('test.json',function(data){ // data: 返回的数据 $('#resText').empty(); var html = ''; $.each(data , function(commentIndex,comment){ html += '<div class= "comment"><h6>' + comment['username']+ ':</h6><p class="para">' + comment['content']+ '</p></div>' }); $('#resText').html(html); }); }); })
$.ajax() 方法
$(function(){ $('#send').click(function(){ $.ajax({ type:"GET", url :"test.json", dataType:"json", success: function(data){ $('#resText').empty(); var html = ''; $.each(data , function(commentIndex,comment){ html += '<div class= "comment"><h6>' + comment['username']+ ':</h6><p class="para">' + comment['content']+ '</p></div>' }); $('#resText').html(html); } }); }); })