《锋利的jQuery》要点归纳(五)jQuery与ajax的应用(上)

一、jQuery中的Ajax 

1 load()方法 load(url[,data][,callback])

url // string类型,请求html页面的url地址
data // object类型,发送至服务器的key/value数据
callback // function类型,请求完成时的回调函数,无论请求成功或失败

1.1 载入html文档

首先构建一个被load()加载并追加到页面中的html文件,取名为test.html,如下:

<div class="comment">
<h6>项目1:</h6>
<p class="para">值1</p>
</div>
<div class="comment">
<h6>项目2:</h6>
<p class="para">值2</p>
</div>
<div class="comment">
<h6>项目3:</h6>
<p class="para">值3</p>
</div>

触发ajax页面和jQuery代码如下:

<input type="button" id="send" value="ajax获取"/>
<div class="comment">所有项目:</div>
<div id="resText"></div>
<script>
$(
function(){
$(
"#send").click(function(){
$(
"#resText").load("test.html");
});
});
</script>

执行如上代码后,test.html的内容被加载进#resText中。

1.2 筛选载入的html文档

<!--在载入的文件名后跟选择器-->$("#resText").load("test.html .para");

1.3 传递方式

load()方法的传递方式根据参数data自动指定,如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方式。

$("#resText").load("test.php",{name:"rain",age:"22"},function(){
//...
});

1.4 回调参数

加载完成(无论请求成败)后继续的操作。提供3个参数:请求返回的内容、请求状态、XMLHttpRequest对象。

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
// responseText: 请求返回的内容
//
textStatus: 请求状态:success、error、notmodified、timeout 4种
//
XMLHttpRequest: XMLHttpRequest对象
});

2 $.get()方法和$.post()方法

2.1 $.get()

$.get(url[,data][,callback][,type])

参数名称

类型

说明

url

String

请求的HTML页的URL地址

data(可选)

Object

发送至服务器的key/value数据回作为QueryString附加到请求URL中

callback(可选)

Function

载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法

type(可选)

String

服务器端返回内容的格式,包括xml、html、script、json、text和_default

$.get()方法的回调函数注释:

$.get()方法的回调函数只有两个参数data和textStatus,且回调函数只有当数据成功返回(success)后才被调用,和load()方法不同

function(data,textStatus){
//data:返回的内容,可以是XML文档,JSON文件,HTML片段等等
//
textStatus:请求状态:success、error、notmodified、timeout4种
}

例(P182)

<form id="form1" action="#">
<p>评论</p>
<p>姓名<input type="text" name="username" id="username"/></p>
<p>内容<textarea name="content" id="content"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class="comment">已有评论</div>
<div id="resText"></div>

2.1.1 使用参数

$("#send").click(function(){
$.get(
"get1.php",{ //确定请求页面的URL地址
username:$("#username").val(),
content:$(
"#content").val() //将姓名和内容的值作为data参数传递给后台
},回调函数);
});

2.1.2 数据格式

HTML片段

$(function(){
$(
"#send").click(function(){
$.get(
"get1.php",{
username:$(
"#username").val(),
content:$(
"#content").val()
},
function(data,textStatus){
$(
"#resText").html(data); //将返回的数据添加到页面上
});
});
});

XML文档(需要在服务端设置Content-Type类型:header("Content-Type:text/xml; charset=utf-8");//php)

$(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文件

$(function(){
$(
"#send").click(function(){
$.get(
"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(txtHtml); //将返回的数据添加到页面上
},"json"); //设置$.get()方法的第四个参数(type)为"json"来代表期待服务器端返回的数据格式
});
});

2.2 $.post()

与$.get()的区别

  • get请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给web服务器。
  • get方式对传输的数据有大小限制(<=2kb),而使用POST方式传递的数据量不受限制
  • get方式请求的数据会被浏览器缓存起来,引起安全性问题
  • get方式和post方式传递的数据在服务器端的获取也不相同。php中,get方式的数据可以用$_GET[]获取,而post方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

由于post和get方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数,就可以在get请求和post请求之间切换。(P186)

另外,当load()方法带有参数传递时,会使用post方式发送请求。因此也可以使用load()方法来完成同样的功能。如:

$(function(){
$(
"#send").click(function(){
$(
"#resText").load("post1.php",{
username:$(
"username").val(),
content:$(
"#content").val()
});
});
});

3 $.getScript()方法和$.getJson()方法(P187)

3.1 $.getScript() 动态加载js文件(可以加回调函数)

$(function(){
$(
"#send").click(function(){
$.getScript(
"test.js");
});
});

3.2 $.getJSON() 动态加载json文件,加载后的数据可通过回调函数处理

$(function(){
$(
"#send").click(function(){
$.getJSON(
"test.json",function(data){
//data:返回的数据
});
});
});

遍历数据(P189):

$(function(){
$(
"#send").click(function(){
$.getJSON(
"test.json",function(data){
$(
"#resText").empty();  
 //返回数据成功后,首先清空id为resText的元素的内容,以便重新构造新的html
var html ="";
$.each(data,
function(commentIndex,comment){  
 //$.each()函数遍历对象和数组
//(以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。
//回调函数拥有2个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容)
html +="<div class='comment'><h6>"+ comment['username']
+":</h6><p class='para'>"+ comment['content'] +"</p></div>";  
 //将遍历出来的内容构建成html代码拼接起来
});
$(
"#resText").html(html); //将构建好的html添加到id为resText的元素中
});
});
});

引申:JSONP(P190)

JSONP允许在服务器端集成Script tags返回至客户端,通过JavaScript Callback的形式实现跨域访问。(略)

4 $.ajax()方法(P191)

$.ajax(options)  // 该方法只有1个参数

常用参数表(参数详细说明见原书P192)

参数名称

类型

说明

url

String

发送请求的地址,默认为当前页地址

type

String

请求方式(POST或GET,默认为GET)

timeout

Number

设置请求超时时间

data

Object或String

发送到服务器的数据

dataType

String

预期服务器返回的数据类型,可用类型有:xml、html、script、json、jsonp、text

beforeSend

Function

发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头

complete

Function

请求完成后调用的回调函数(请求成功或失败时均调用)

success

Function

请求成功后调用的回调函数

error

Function

请求失败时被调用的函数

global

Boolean

默认为true。表示是否触发全局Ajax事件

 $.ajax()方法是jQuery最底层的Ajax实现,可以用来代替前面所有的方法

如使用$.ajax()方法代替$.getScript()方法:

$(function(){
$(
"#send").click(function(){
$.ajax({
type:
"GET",
url:
"test.js",
dataType:
"script"
});
});
});

再如使用$.ajax()方法代替$.getJSON()方法:

$(function(){
$(
"#send").click(function(){
$.ajax({
type:
"GET",
url:
"test.json",
dataType:
"json",
success:
function(data){
$(
"#resText").empty();
var html ="";
$.each(data,
function(commentIndex,comment){
html
+="<div class='comment'><h6>"+ comment["username"]
+":</h6><p class='para'>"+ comment["comment"] +"</p></div>";
});
$(
"#resText").html(html);
}
});
});
});
posted @ 2010-12-06 02:06  Reibin  阅读(858)  评论(1编辑  收藏  举报

日志版权保留,转载请注明来自http://www.cnblogs.com/bienfantaisie