jquery与ajax的应用
一、ajax的优势和不足
-
ajax的优势
- 不需要插件支持
- 优秀的用户体验
- 提高web程序的性能
- 减轻服务器和带宽的负担
-
ajax的不足
- 浏览器对XMLHttpRequest对象的支持度不足
- 破坏浏览器前进、"后退"按钮的正常功能
- 对搜索引擎的支持的不足
- 开发和调试工具的缺乏
二、jquery中的ajax
最底层的方法：$.ajax()
第二层的方法：load()、$.get()、$.post() —— 使用频率最高
第三层的方法：$.getScript()、$.getJson()
- load(url [ , data] [ , callback])
一个简单的小例子：
<!-- test.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="coment">已有评论：</div>
<div class="coment">
<h6>张山：</h6>
<p class="para">沙发.</p>
</div>
<div class="coment">
<h6>李四：</h6>
<p class="para">板凳.</p>
</div>
<div class="coment">
<h6>王五：</h6>
<p class="para">地板.</p>
</div>
</body>
</html>
<!-- index.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.1.10.2.js"></script>
<script src="js/test.js"></script>
<link href="css/test.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<button id="send">ajax获取</button>
<div class="coment">已有评论：</div>
<div id="resText"></div>
</body>
</html>
// test.js
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");//载入html文档
$("#resText").load("test.html");//筛选载入的html文档
});
});
2.传递方式：
load()的传递方式根据参数data来自动指定，如果没有参数传递，则用get传递，反之则会自动采用post传递。
//无参数传递，则是GET方式
$("#resTest").load("test.php",function(){
//...
});
//无参数传递，则是POST方式
$("resText").load("test.php",{name:"niuniu",age:"22"},function(){
//...
});
3.回调参数
$("resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//responseText：请求返回的内容
//textStatus：请求状态：success、erro、notmodified、timeout四种
//XMLHttpRequest对象
});
注意：无论ajax请求是否成功，只要当请求完成，回调函数就会被触发。
4.$.get()方法和$.post()方法
$.get()方法使用get方式来进行异步请求。
$(function(){
$("#send").click(function(){
$.get("json/test.json",{
username: $("#username").val(),
content: $("#content").val()
},回调函数);
});
});
如果服务器端接收到传递的data数据并成功返回，那么就可以通过回调函数将数据显示在页面上。
$.get()的回调函数只有两个参数
function(data,textStatus){
// data:返回的内容，可以是XML文档、JSON文件、HTML片段等等
// 请求状态：success、erro、notmodified、timeout四种
}
注意：$.get()的回调函数只有当数据成功返回（success）后才能被调用，和load()不同。
5.数据格式
服务器返回的数据格式可以有很多种，他们都可以完成相同的任务。
HTML片段
HTML实现起来只需要很少的工作量，但这种固定的数据结构并不一定在其他的web应用程序中得到重用。
XML文档
处理xml与处理html一样，也可以使用常规的dom操作。但文档体积大，难以解析。
注意：由于期待服务器端返回的数据格式是xml文档，因此需要在服务器端设置content-type类型，代码如下：
header("Content-type:text/xml;charset=utf-8");//php中
json文件
json非常简洁，容易理解，方便被重用。
ajax获取json数据的方法：
$.getScript（）
1.通过$.getScript请求载入并执行一个js文件
<body>
<script src="../js/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#send').click(function() {
$.getScript('test2.js');
});
})
</script>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论：</div>
<div id="resText" >
</div>
</body>
//test2.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);
2.通过$.getScript请求载入并执行一个js文件，成功载入后回调函数。比如像载入官方的颜色动画插件，载入成功后给元素绑定颜色变化的动画。
<head>
<script src="../js/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$.getScript('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){
$("<p>加载JavaScript完毕</p>").appendTo("body");
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
})
//]]>
</script>
</head>
<body>
<button id="go">运行</button>
<div class="block"></div>
</body>
$.getJSON（）
<head>
<script src="../js/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#send').click(function() { $.getJSON('../json/test.json', function(data) { $('#resText').empty(); var html = '';//先清空元素的内容，以便重新构造新的html $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); }) }) }) //]]> </script> </head> <body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论：</div> <div id="resText" > </div> </body>
jquery提供了一个通用的遍历方法$.each()，可以用来遍历数组和对象。
$.each()方法接受两个参数，第一个是需要遍历的对象集合（JSON对象集合），第二个是用来遍历的方法，这个方法又接受两个参数，第一个是遍历的index，第二个是当前遍历的值。
一个例子：$.each()加载四张图片，但遍历的索引等于3的时候退出循环。
<head>
<script src="../js/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#send').click(function() {
$.getJSON("../json/testSrc.json",
function(data){
$.each(data, function( i,item ){
$("<img class='para'/> ").attr("src", item.src ).appendTo("#resText");
if ( i == 3 ) {
return false;
}
});
}
);
})
})
//]]>
</script>
</head>
<body>
<p><input type="button" id="send" value="加载"/></p>
<div id="resText" ></div>
</body>
//json数据
[
{
"src": "test.png"
}
]
