直切主题,介绍方法
$("#div").load(url,data,callback);
url:String类型 请求HTML页面的URL地址
data(可选) Object类型 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败
url
注: url部分,可填写过滤器,得到符合条件的数据返回 语法结构 "url selector" url和选择器之间有一个空格
例: $("#div").load("test.html .seleted");
传递方式
load()方法的传递方式根据参数data来自动指定,如果没有参数传递,则采用get,反之则会自动转换为post方式
$("#div").load("test.jsp",{name:"rain",age:"22"},function(){});
回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调参数(callback),该参数有3个参数,分别代表请求返回的内容,请求状态(success和error)和XMLHttpRequest对象
$("#div").load("test.jsp",function(responseText,textStatus,XMLHttpRequest){
//responseText 请求返回的内容
//textStatus:success,error,notmodified,timeout4种
//XMLHttpRequest对象
})
从其他网站copy的总结的相当完善
jQuery中的Ajax
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load(),$.get()和$.post()方法,第三层是$.getScript()和$.getJson()方法。首先介绍第2层得方法,使用效率很高。
load()方法
1.载入HTML文档
load()方式jQuery中最为简单的Ajax方法,能载入远程HTML代码并插入DOM中,它的结构为:
load(url[,data][,callback]);
load()方法参数解释如表6-1所示。
load参数说明:
参数名称 类型 说明
url string 请求html的url地址
data(可选) object 发送至服务器的key/value数据
callback function 请求完成时的回调函数,
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">
已有评论:
</div>
<div id="resText" ></div>
</body>
</html>
test.html 页面里并没有添加样式,但现在加载的内容有样式了,这些样式是在主页面中添加的,
即主页面相应的样式会立即应用到新加载的内容上。
传递方式
load()方法得传递方式根据参数data来自动指定,如果没有参数传递,则采用get方式传递;反之,
则自动转换为post方式。
//无参数传递
$("#resText").laod("test.php",function(){
});
//有参数传递,则是post方式
$("#resText").laod("test.php",{name:"rain",age:"22"},function(){
});
回调参数
对于必须加载完后才能继续操作,load()方法提供了回调函数(callback),该函数有3个参数,
分别代表请求返回的内容,请求状态和XMLHttpRequest 对象,jQuery代码如下:
$("#resText").laod("test.html",function(responseText,textStatus,XMLHttpRequest)){
//请求返回的内容
//请求状态 success error notmodiffed,timeout 4种
//XMLHttpRequest: XMLHttpRequest
}
在load()方法中,无论Ajax请求是否成功,只要当请求完成complete后,回调函数(callback)就被触发,对应下面将介绍$.ajax()方法中的complete回调函数。
$.get()方法和$.post()方法
laod()方法通常用来从web服务器上获取静态的数据文件,然而这并不能体现Ajax的全部价值,在项目中,如果需要传递一些参数给服务器的页面,那么可以使用$.get()或者
$.post()方法,或者是$.ajax()方法。
$get()和$post()方法是jQuery中的全局函数,而在此之前得jQuery方法都是对jQuery对象进行操作的。
$.get()方法
$.get()方法使用GET方式来进行异步请求。
它的结构为
$.get(url[,data][,callback][,type])
$.get()方法参数解释
参数名称 类型 说明
url string 请求的HTML页的URL地址
data(可选) object 发送至服务器的key/value数据会作为QueryString附加到请求url中
callback(可选) function 载入成功时回调函数(只有当response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选) string 服务器端返回内容的格式,包括xml,html,script,json text 和_default
(1) 使用参数
首先,需要确定请求页面的URL地址
$("#send").click(function(){
$.get("get1.php",data参数,回调函数);
});
然后,在提交之前,需要获取 "姓名" 和 "内容" 的值为data参数传递给后台。
$("#send").click(function(){
$.get("get1.php"),{
username:$("#usernmae").val(),
content:$("#content").val()
},回调函数
}
} )
$.get()方法得回调函有两个参数
function(data,textstatus){
//data 返回的内容,可以使xml文档,json文件,HTML片段等等
//testStatus: 请求状态: success,error,notmodified,timeout4种
}
data 代表请求的参数,state代表请求的状态,回调函数只有当翻书success可以被调用。
由于服务器端返回的数据格式可能有多种,他们都可以完成同样的任务,分别介绍一下
HTML片段
返回的是HTML片段,不需要特殊的处理,就可以将新的数据插入到主页面中。
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username: $("#username").val(),
content: $("#content").val()
},function(data,textStatus){
$("#resText") .html(data);//将返回的数据添加到页面上
});
})
})
HTML 片段实现起来比较简单,但是不一定能够在其他的web应用程序中得到重用。
处理XML文档
游湖服务器端返回的数据格式是XML文档,因此需要对返回的数据进行处理,前面的章节已经介绍过jQuery强大的DOM处理能力,处理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);//将返回的数据添加到页面上
})
})
})
json 文件
xml文档体积大和难以解析.json 文件和xml文档一样,也可以方便的被重用,而且json 文件简洁,容易阅读
由于服务器返回的数据格式是json 文件,因此需要对放回的数据进行处理之后,才可以将新的HTML数据调价到主页面中。
$(function(){
$("#send").click(function(){
$("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(textHtml);
})
})
},"json")
在上面的代码中,将$.get()方法得第4个参数(type)设置为json 来代表期待服务器端返回的数据格式。
$.post()方法
它与$.get()方法得结构和使用方式多相同,不过他们之间仍然有一些区别
GET 请求会将参数跟在URL后进行传递,而POST 请求则是作为HTTP消息的实体内容发送给WEB服务器。
当然在ajax请求中,这种区别对用户是不可见的。
GET 方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要不GET方式大的多(理论上不受限制)。
GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。
在某种情况下,GET方式会带来严重的安全性问题,而POST 方式相对来说可以避免这些问题。
建议是用POST请求
$(function(){
$("#send") .click(function(){
$post("post1.php",{
username:$("#username").val(),
content:$("content").val()
},function(data,textStatus){
$("#resText").append(data); //将返回的数据添加到页面上
});
});
})
$ajax()方法不仅能实现与load(),$.get() 和$.post()方法相同的功能,而且还可以设定beforeSend(提交钱回调函数),
error(请求失败后处理),success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给哟高呼更多的ajax提示信息
另外,还有一些参数,可以设置Ajax请求的超时时间或者页面的“最后更改 ”状态等等。关于$.ajax()方法将在后面的章节中进行详解。
$getScript方法和$getJson方法
1.$getScript()
有时候,在页面初次加载时就去的所需的全部JavaScipt文件是完全没有必要的,虽然可以在需要哪个JavaScript文件时,动态地创建<script>标签,jQuery代码如下:
$(document.createElement("script")).attr("src","test.js");.appendTo("head");
或者
$("<script type='text/javascript' src='text.js'/>").appendTo("head");
这种方式并不理想,jquery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便。不要对javascript文件进行处理。
$(function(){
$("#send").click(function(){
$.getScript('test.js');
});
})
$getJSON()
$getJSON()方法用于加载JSON文件,与$.getScript()方法得用法相同。
jQuery代码如下:
$(function(){
$('#send').click(function(){
$.getJson('test.json');
})
})
单击按钮"加载"按钮后,网页上没有效果,虽然加载了json文件但是并没有告诉javascript对返回的数据处理,为此jquery 提供回调函数,在回调函数里面处理返回的数据。
$(function(){
$("#send").click(functioin(){
$.getJSON('test.json',function(data){
//data 返回数据
})
})
})
可以在函数中通过data变量来遍历相应的数据,也可以使用迭代方式为每个项构建相应的HTML代码。
$each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,
以一个回调函数作为第2个参数,回调函数拥有两个参数,第1个位对象的成员或数组的索引,第2个为对应变量或内容。
$(function(){
$('#send').click(function(){
$.getJSON('test.json',function(data){
$('#resText').empty();
var html='';
$each(data,functioin(commentindex,comment){
html+='<div class="comment"><h6> '
+comment['username']+':</h6><p class="para">'
+comment['content']+'</p></div>';
});
$("#resText").html(html);
})
})
})