当前位置: 代码迷 >> Ajax >> jquery学习札记-ajax应用
  详细解决方案

jquery学习札记-ajax应用

热度:442   发布时间:2012-06-25 21:24:50.0
jquery学习笔记--ajax应用

直切主题,介绍方法
$("#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);
    })
})

})




  相关解决方案