jQuery 学习笔记之十 (jQuery ajax ) 

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);
    })  
 })

})
posted @ 2011-03-23 11:15  jackyong  阅读(1069)  评论(0)  编辑  收藏  举报