jQuery中的Ajax
jQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装，也对Ajax异步交互进行了封装。jQuery提供了六个Ajax操作的方法。
+load()方法
$.get()方法 $.post()方法
$.ajax()方法
$.getScript()方法 和$.getJSON()方法
jQuery除了封装六个Ajax操作的方法，还提供了以下几种事件：
ajaxStart()和ajaxStop()事件
ajaxComplete()事件、ajaxSend()事件、ajaxError()事件、ajaxSuccess()事件
1、 load()方法
load()方法是jQuery中最为简单的Ajax方法，其语法结构如下：
$element.load(url,[data],[callback]);
url：请求HTML页面的url地址。
data：发送给服务器端的key/value形式的数据内容。
callback：Ajax请求完成时的回调函数。
注意：load()方法的请求方式由是否传递参数决定。即传递参数，为GET方式；不传递参数，为POST方式。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>load()方法</title> </head> <body> <button id="btn">按钮</button> <script src="../js/jquery-1.12.4.js"></script> <script> $('#btn').click(function(){ /* load(url,data,callback)方法 * 参数 * url - 异步请求的地址 * data - 异步请求的数据 * 如果省略请求数据的话，当前的请求方式为GET * 如果发送请求数据的话，当前的请求方式为POST * callback - 异步请求成功后的回调函数 * 返回值 - 服务器端的响应结果 * 注意 - 自动将返回结果写入到目标元素中 */ $('#btn').load('server.json',{name:'猪猪侠'},function(){ console.log('异步请求成功...'); }) }); </script> </body> </html>
2、 $.get()方法和$.post()方法
$.get()方法使用GET方式向服务器端发送异步请求。
$.post()方法使用POST方式向服务端发送异步请求。
其语法结构如下：
$.get(url,[data],[callback],[type]) $.post(url,[data],[callback],[type])
参数如下：
url：请求HTML页面的url地址。
data：发送给服务器端的key/value形式的数据内容
callback：Ajax请求完成时的回调函数。
type：设置返回数据内容的格式。值为xml、html、script、json、text和_default。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>get()和post()方法</title> </head> <body> <button id="btn">按钮</button> <script src="../js/jquery-1.12.4.js"></script> <script> $('#btn').click(function () { /* get(url,data,callback，type)方法 post(url,data,callback，type)方法 * 参数 * url - 异步请求的地址 * data - 异步请求的数据 * callback - 异步请求成功后的回调函数 function(reponse){} * type - 设置服务器端的响应结果格式 * 可以为xml、html、script、json、text等 */ $.get('server.json', { name: '猪猪侠' }, function (response) { console.log(response); }); }); </script> </body> </html>
3、 $.ajax()方法
$.ajax()方法是jQuery中最为底层的Ajax方法，其语法结构如下：
$.ajax(url,[settings]);
url : 请求HTML页面的url地址。
settings : key/value形式的请求设置，所有参数都是可选的。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax()方法</title> </head> <body> <button id="btn">按钮</button> <script src="../js/jquery-1.12.4.js"></script> <script> $('#btn').click(function () { /* $.ajax(url,[settings])方法 * 参数 * url - 请求地址 * settings - 设置异步请求的参数 *settings选项 - 对象的类型 * type - 设置请求方式 get or post * data - 发送给服务器端的请求数据 * dataType - 服务器端响应结果的格式 * success - 异步请求成功后的回调函数 function(data,textStatus,jqXHR){ * data - 表示服务器端响应的结果 * textStatus - 表示服务器端当前的状态 * jqXHR - Ajax中的核心对象 } */ $.ajax('../code/server1.json', { type: 'get', dataType: 'text', //设置响应格式 success: function (data) { console.log(data); } }) }); </script> </body> </html>
4、$.getScript()方法
$.getScript()方法是jQuery中用于动态加载指定JavaScript文件，其语法结构如下：
$.getScript(url,[callback]);
url : 请求JavaScript文件的url地址。
callback ： 指定JavaScript文件成功加载后的回调函数。
示例代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>$.getScript()方法</title> </head> <body> <button id="btn">按钮</button> <script src="../js/jquery-1.12.4.js"></script> </body> <script> $('#btn').click(function () { $.getScript('../code/server2.js', function () { console.log('你成功了！') }) }) </script> </html>
5、$.getJSON()方法
$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容，其语法结构如下：
$.getJSON(url,[data],[callback]);
url : 请求JavaScript文件的url地址。
data : 发送给服务器端的key/value形式的数据内容。
callback ： 指定JavaScript文件成功加载后的回调函数。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>$.getJSON()方法</title> </head> <body> <button id="btn">按钮</button> <script src="../js/jquery-1.12.4.js"></script> </body> <script> $('#btn').click(function () { $.getJSON('../code/server1.json', {name:'猪猪侠'},function (data) { console.log(data); }) }) </script> </html>
