Ajax(Asynchronous JavaScript and XML)是异步 JavaScript 和 XML,可以用于无刷新状态更新页面,并且实现异步处理数据。
在JQuery中如何使用Ajax呢?JQuery 对 Ajax 做了封装,我们使用起来也较为方便,不需要去考虑浏览器兼容性。最底层的封装方法为:$.ajax(),第二层封装有三种方:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。
$.load()方法是局部方法,需要一个包含元素的 jQuery 对象作为前缀。而$.get()和$.post()是全局方法,无须指定某个元素。 对于用途而言, .load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。
$.ajax()
该方法仅有一个参数,是一个一个键值对的对象,默认是get方式传递数据,如下是post方式传递数据
$('input').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{variable:'book'},
success:function(res,sta,xhr){ $('#box').html(res); }
});
});
结果:
遇见最美的你
$.load()
改方法有3个参数:url(请求数据的路劲,String类型)、data(请求的数据,键值对表示,Object类型)、回调函数(成功或失败的的回调,函数类型),后2个参数
可有可无。
文件的准备1:test.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"></div>
</body>
</html>
文件的准备2:test.php
<?php
if($_POST && $_POST['variable'] == 'book') {
echo '遇见最美的你';
}else if($_GET && $_GET['variable'] == 'book') {
echo '台湾单车环岛笔记';
} else{
echo '没有数据';
}
?>
现在编写test.js
1、用get方式请求数据
$('input').click(function () {
$('#box').load('test.php?variable=book');
});
结果:
台湾单车环岛笔记
2、用post方式请求数据
$('input').click(function () {
$('#box').load(
'test.php',
{variable : 'book'}
);
});
结果:
遇见最美的你
$.get()
$.get()方法有四个参数,url、data、回调函,比起.load()多了一个参数 type,即服务器返回的内容格式:包括 xml、html、script、json、jsonp 和 text,第4个默认可不写,系统会根据类型智能选择,如果人为选择不当,就会把放回的数据强制转化为人为的类型。第一个参数为必选参数,后面三个为可选参数。
$('input').click(function(){
$.get(
'test.php',
{variable:'book'},
function(res,sta,xhr){$('#box').html(res);},
'html'
);
});
结果:
台湾单车环岛笔记
接下来演示该方法请求xml文件的数据
xml文件:
<?xml version="1.0"?>
<root>
<book>遇见最美的你</book>
</root>
test.js的代码:
$('input').click(function(){
$.get(
'test.xml',
function(res,sta,xhr){ $('#box').html($(res).find('root').find('book').text()); }
);
});
接下来演示该方法请求json文件的数据
json文件:
[
{
"book" : "台湾单车环岛游",
"price": 45
},
{
"book" : "遇见最美的你",
"price": 23
}
]
$('input').click(function(){
$.get(
<span style="white-space:pre"> </span> 'test.json',
function(res,sta,xhr){ $('#box').html($(res)[0].price); },
'json'
);
});
结果:
45
$.post()
该方法与$.get()用法基本一样,也可以用于请求xml,json文件
$('input').click(function(){
$.post(
'test.php',
{url:'ycku'},
function(res,sta,xhr){$('#box').html(res);},
'html'
);
});
结果:
遇见最美的你
$.getScript()
用于加载特定情况下指定的 JS 文件,比如用户点击了某个按键,触发了某个事件才把该js文件加载进来,否则不加载,以节省资源。
$('input').click(function(){
$.getScript('test.js');
});
$.getJSON()
用于专门加载 JSON 文件。
被请求的json文件
test.js文件:
[
{
"book" : "台湾单车环岛游",
"price": 45
},
{
"book" : "遇见最美的你",
"price": 23
}
]
$('input').click(function(){
$.getJSON(
'test.json',
function(res,sta,xhr){ $('#box').html( res[1].book); }
);
});
结果:
遇见最美的你