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