$.ajax()方法
$.ajax()
方法是jQuery最底层的Ajax实现。
它的结构为:
$ajax(options);
这个对象里包含了$.ajax()方法所需要的请求设置以及会掉函数信息,参数以key/value 的形式存在,所有参数都是可选的,常用参数如表 6-3所示。

参数名称    类型             说明 
url         string           (
默认为当前页地址)发送请求的地址
type       string           
请求方式(postget)默认为get,注意其他http请求方法,例如putdelete 也可以使用。
timeout    Number           
设置请求超时时间(毫秒),此数值将覆盖$.ajaxSetup()方法得全局设置。
data       object           
发送到服务器的数据,如果已经不是字符串,将自动转换为字符串格式,Get请求中将附加在URL后,防止这种自动转换,可以查看processData选项,对象必须为key/value格式 
                              
例如{fool:"bar1",foo2:"bar2"}   转换为&fool=bar1&foo2=bar2 如果是数组,jquery 将自动为不同值对应同一个名称 例如 {foo:["bar1","bar2"]} 转换为 &foo=bar1&foo=bar2
dataType  string            
预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTPMIME信息返回responseXML  responseText,并作为回调函数参数传递。
                             
可用的类型如下。
                              xml:
返回XML文档,可用jQuery处理
                              html:
返回存文本Html信息;包含的script标签会在插入DOM时执行
                              script:
返回纯文本javascript代码,不会自动缓存结果,除非设置了cache参数,注意在远程请求时(不在同一个领域下),所有post请求都将转为get请求
                              json:
返回json 数据
                              jsonp:JSONP
格式,使用SONP形式调用函数时,例如myurl?callback=?,jQuery将自动替换后一个"?"为正确的函数名,以执行回调函数
                              text
:返回存文本字符串 
beforeSend  function        
发送请求钱可以修改xmlhttprequest 对象的函数,例如添加自定义http头,在beforeSend中如果返回false 可以取消本次Ajax请求,xmlHttpRequest对象是惟一的参数
complete    function        
请求完成后调用的回调函数(请求成功或失败时均调用) 参数XMLHttpRequest对象和一个描述成功请求类型的字符串 function(xmlhttprequest,textstatus){ this;//}
success     function        
请求成功后调用的回调函数,有两个参数
                             (1)
有服务器返回,并根据dataType参数进行处理后的数据。
                             (2)
描述状态的字符串。
                             function(data,textStatus){ //data
可能是xmlDoc,jsonObj,html,text等等    this//调用本次ajax时传递的option参数 }
error      funciton         
请求失败时被调用的函数,该函数有3个参数,即XMLHttpRequest对象,错误信息,捕获的错误对象(可选)
                             Ajax
事件函数如下。
                             function(XMLHttpRequest,textStatus,errorThrown) {  //
通常情况下textstatus errorThrow 只有其中一个包含信息this//调用本次 ajax请求时传递的options参数 }
global     boolean          
默认为true   表示是否处罚全局ajax事件,设置为false 将不会触发全局ajax事件,ajaxstartajaxStop可用于控制各种Ajax事件


$.load(),$get(),$post(),$getScript()
$.getJSON这些方法,都是基于$.ajax()方法构建的,$ajax()方法是jQuery最底层的Ajax实现,因此可以用来代替前面的所有方法。

使用jQuery 代码代替$.getScript()方法
$(function(){ 
    $('#send').click(function(){ 
       $ajax({
             type:"GET",
             url:"test.js",
             dataType:"script"
           });  
   });

})

使用jQuery 代码来代替$getJSON()方法:
$(funciton(){ 
  $('#send').click(function(){ 
      $.ajax({ 
       type:"GET",
       url:"test.json",
       dataType:"json",
       success:function(data){
          $('#resText').empty();
          var html='';
          $each(data,function(commentIndex,commnet){ 
              html+='<div class="comment"><h6>'
              +comment['username']+':</h6><p class="para">'
              +comment['content']+'</p></div>';
          });
          $("#resText") .html(html);
         }
     });
  })

})

 
                  
                                                                        序列化元素serialize()方法
表单是必不可少的,经常用来提供数据.

<!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 type="text/javascript">
$(function(){
   $("#send").click(function(){
$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
                        $("#resText").html(data); //
把返回的数据添加到页面上
}
);
   })
})
</script>
</head>
<body>
<form >http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html

 

相关文章:

  • 2021-12-03
  • 2021-08-01
  • 2021-11-30
  • 2021-05-26
  • 2022-02-06
猜你喜欢
  • 2022-01-17
  • 2021-11-19
  • 2021-12-13
  • 2021-09-25
  • 2021-11-19
  • 2021-05-31
相关资源
相似解决方案