锋利的jQuery 第六章 jQuery于Ajax的应用

6.5jQuery中的load()方法

结构：load(url,[,data],[,callback])
参数名称	类型	说明
url	String	请求HTML页面的URL地址
data	Object	发送至服务器的key/value数据
callback	Function	请求完成时的回调函数，无论请求成功或者失败，只要写了回调函数会执行此函数

用法举例：

1.直接载入整个HTML文档页面

$(function(){

$("#send").click(function(){$("#target").load("JQt.html");});

});

2.载入HTML部分文档页面

$(function(){

$("#send").click(function(){$("#target").load("JQt.html.panl");});
});

3.传递方式

传递方式由data参数来自动指定。注意如果没有参数传递，采用GET方式传递，反之采用POST方式传递。

$("#send").load("test.php",function(){//写回调函数内容默认是GET

});

$("#send").load("tets.php",{name:"rain",age:"23"},function()
{

//POST方式传递

})

4.回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback）,该函数有3个参数，分别代表请求返回的内容，状态和XMLTttpRequest

$("#send").load("tets.php",{name:"rain",age:"23"},function(responseText,textStatus,XMLHttpRequest){

//responseText返回的内容
//textStatus
请求状态：success,notmodified,timeout

// XMLHttpRequest: XMLHttpRequest对象

})

6.5.2 $get()和$post()方法

方法名称	参数名称	类型	说明
$get()	url	String	请求的HTML的地址
data	Object	发送至服务器的key/value数据会作为QueryString附加到请求的url中
callback	Function	载入成功时回调函数（只有Response的返回状态是success才调用该方法）自动将强求结果和状态传递给该方法
type	String	服务器端返回内容的格式，包括xml、html,script,json,text,_default

读取xml数据

$(function(){

$("#send").click(function(){

$.get("get2.asp",{

username: $("#username").val() ,

content: $("#content").val()

},function (data, textStatus){

var username =$(data).find("comment").attr("username");

varcontent = $(data).find("comment content").text();

var txtHtml = "<divclass='comment'><h6>"+username+":</h6><pclass='para'>"+content+"</p></div>";

$("#resText").html(txtHtml); //
把返回的数据添加到页面上

});

})

})

读取 json
数据

$(function(){

$("#send").click(function(){

$.get("get3.asp",{

username: $("#username").val() ,

content: $("#content").val()

},function (data, textStatus){

var username = data.username;

varcontent = data.content;

var txtHtml = "<divclass='comment'><h6>"+username+":</h6><pclass='para'>"+content+"</p></div>";

$("#resText").html(txtHtml); //
把返回的数据添加到页面上

},"json");

})

})

以上是书上源码

2.$post()和$get()
区别

使用方法相同 ，但是依然存在区别：

使用及功能	post()	get()
参数传递（在ajax中参数传递都是不可见的）	作为http信息的实体内容发给web服务器。	跟着url进行传递
传递数据大小	基本没有限制	不能大于2K
是否会被浏览器缓存	否	是
服务器端获取方法（都可以使用$_REQUEST[]获取）	$_POST[]	$_GET[]

6.5.3 $getScript()方法和$getJson()方法

1. $getScript()
方法用于动态加载js文件,同样具有回调函数

$getScript(‘test.js’)

2.$getJson()和 $.each()

$(function(){

$('#send').click(function() {

$.getJSON("test.json",function(data){

$.each(data.items, function( i,item ){

$("<imgclass='para'/>").attr("src",item.media.m ).appendTo("#resText");

if ( i == 3 ) {
returnfalse; }});}); })})

6.5.4 $ajax()方法

$ajax(option) ,其中参数有很多类型，url,type,timeout,data,dataType,beforeSend,complete等

例如：$(function(){

$('#send').click(function() {

$.ajax({url:”test.js”,type:”GET”,dataType:”script”});});});

6.6序列化元素

1.serialize()
表单中必不可少的，经常用在ajax里提交数据。

$(“#form1”).serialize(); //可以把表单中的数据序序列化

例如：$.get("get1.asp", $("#form1").serialize() ,function (data, textStatus){

$("#resText").html(data); } );//
把返回的数据添加到页面上

当序列化复选框和单选框的时候，只会将选中的值序列化。$(“:checkbox,:radio”).serialize()

6.7 jQuery中的Ajax全局事件

当ajax()方法开始的时候会触发：ajaxStart() 和结束的时候会触发：ajaxStop()

还有另外几个全局事件：

方法名称	说明
ajaxComplete(callback)	Ajax请求完成时执行的函数
ajaxError(callback)	Ajax请求发生错误的时候执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)	Ajax请求发送前执行的函数
ajaxSuccess(callback)	Ajax请求成功时执行的函数

看了半天ajax
结果书上的代码敲完都运行没啥反应~~真愁人啊~不知道啥原因！！