锋利的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 结果书上的代码敲完都运行没啥反应~~真愁人啊~不知道啥原因！！