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); } }); }); })