javascript之jQuery ajax 操作

来源：互联网发布：王克勤记者知乎编辑：程序博客网时间：2024/05/20 23:38

ajax不足

1.浏览器的支持度不够,IE 5以后才支持

2.破坏浏览器的前进,后退功能

3.搜索引擎的支持度不同

4.开发调试工具缺乏

三层方法

1.$.ajax()最底层方法

2.$.load(),$.get(),$.post()最常用

3.$.getScript(),$.getJSON()方法

load方法

[javascript] view plaincopy
  $(function(){  
      $("#send").click(function(){  
              $("#resText").load("test.html");  
      })  
  })  
  $(function(){  
      $("#send").click(function(){  
              $("#resText").load("test.html .para");  
      })  
  })  
  $(function(){  
      $("#send").click(function(){  
              $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){  
                         alert( $(this).html() );    //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]  
                         alert(responseText);       //请求返回的内容  
                         alert(textStatus);            //请求状态：success，error,notmodified,timeout  
                         alert(XMLHttpRequest);     //XMLHttpRequest对象  
            });  
      })  
  })  
//无论ajax是否请求成功,只要当请求完成后,回调函数就被触发.   

get方法

[javascript] view plaincopy
//<![CDATA[  
    $(function(){  
       $("#send").click(function(){  
            $.get("get1.php", {   
                        username :  $("#username").val() ,   
                        content :  $("#content").val()    
                    }, function (data, textStatus){  
                        $("#resText").html(data); // 把返回的数据添加到页面上  
                    }  
            );  
       })  
    })  
//]]>  
//返回HTML格式,在不需要与其他应用程序共享数据的时候,使用HTML最为简单  
 <?php   
    header("Content-Type:text/html; charset=utf-8");  
    echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";  
?>  

[javascript] view plaincopy
//<![CDATA[  
    $(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); // 把返回的数据添加到页面上  
                    });  
       })  
    })  
//]]>  
//返回XML格式,体积相对较大,解析和操作的速度都会慢一点  
<?php   
    header("Content-Type:text/xml; charset=utf-8");  
    echo "<?xml version='1.0' encoding='utf-8'?>".  
         "<comments>".  
         "<comment username='{$_REQUEST['username'] }' >".  
         "<content>{$_REQUEST['content']}</content>".  
         "</comment>".  
         "</comments>";  
?>  

[javascript] view plaincopy
//<![CDATA[  
    $(function(){  
       $("#send").click(function(){  
            $.get("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(txtHtml); // 把返回的数据添加到页面上  
                    },"json");  
       })  
    })  
//]]>  
//返回JSON文件  
<?php   
    header("Content-Type:text/html; charset=utf-8");  
    echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}"   
?>   

[javascript] view plaincopy
//<![CDATA[  
    $(function(){  
       $("#send").click(function(){  
              $("#resText").load("get1.php?username="+$('#username').val()+"&content="+$('#content').val());  
              //如果是中文需要编码  
       })  
    })  
//]]>  

POST方法

1.GET请求会在URL进行传递,POST是作为消息实体发送给Web服务器

2.GET对传输的数据大小有限制,不大于2KB,POST方法理论上不受限制

3.GET方法请求的数据会被浏览器缓存起来,别人可以从历史记录中查看,存在安全问题

只需要修改$.get()为$.post()就可以，其它不变

[javascript] view plaincopy
$(function(){  
   $("#send").click(function(){  
        $.post("post1.php", {   
                    username :  $("#username").val() ,   
                    content :  $("#content").val()    
                }, function (data, textStatus){  
                       $("#resText").html(data); // 把返回的数据添加到页面上  
                }  
        );  
   })  
})  

还可以使用load实现相同功能

[javascript] view plaincopy
$(function(){  
   $("#send").click(function(){  
          $("#resText").load("post1.php",{   
                    username :  $("#username").val() ,   
                    content :  $("#content").val()    
          })  
   })  
})  

$.getScript()

动态加载js文件

[javascript] view plaincopy
$(function(){  
     $('#send').click(function() {  
          $.getScript('test.js');  
     });  
})  

设置回调函数

[javascript] view plaincopy
//<![CDATA[  
   $(function(){  
             $.getScript('jquery.color.js',function(){  
                  $("<p>加载JavaScript完毕</p>").appendTo("body");  
                  $("#go").click(function(){  
                       $(".block").animate( { backgroundColor: 'pink' }, 1000)  
                                  .animate( { backgroundColor: 'blue' }, 1000);  
                  });  
             });  
   })  
//]]>  

$.getJSON()

$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数,回调函数拥有两个参数,第1个为对象的成员函数或数组的索引,第2个为对应变量或内容.

[javascript] view plaincopy
//<![CDATA[  
   $(function(){  
        $('#send').click(function() {  
             $.getJSON('test.json', function(data) {  
                 $('#resText').empty();  
                  var html = '';  
                  $.each( data  , function(commentIndex, comment) {  
                      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';  
                  })  
                 $('#resText').html(html);  
            })  
       })  
   })  
//]]>  

JSONP形式

从图片网站搜索汽车类别的4张最新图片

[javascript] view plaincopy
//<![CDATA[  
   $(function(){  
        $('#send').click(function() {  
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",  
                      function(data){  
                          $.each(data.items, function( i,item ){  
                                $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");  
                                if ( i == 3 ) {   
                                    return false;  
                                }  
                          });  
                     }  
            );   
       })  
   })  
//]]>  

ajax方法实现get

[javascript] view plaincopy
//<![CDATA[  
   $(function(){  
        $('#send').click(function() {  
            $.ajax({  
              type: "GET",  
              url: "test.js",  
              dataType: "script"  
            });   
        });  
   })  
//]]>  

serialize()方法

能够将DOM元素内容序列化为字符串，会自动编码

[javascript] view plaincopy
$(function(){  
   $("#send").click(function(){  
        $.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){  
                       $("#resText").html(data); // 把返回的数据添加到页面上  
                }  
        );  
   })  
})  

serializeArray()方法

不是返回字符串,而是将DOM元素序列化后，返回JSON格式的数据.

[javascript] view plaincopy
$(function(){  
var fields = $(":checkbox,:radio").serializeArray();  
console.log(fields);// Firebug输出  
$.each( fields, function(i, field){  
   $("#results").append(field.value + " , ");  
);   
})  

$.param方法

[javascript] view plaincopy
//<![CDATA[  
    $(function(){  
        var obj={a:1,b:2,c:3};  
        var  k  = $.param(obj);  
        alert(k)        // 输出  a=1&b=2&c=3  
    })  
//]]>  
//用来对一个数组或对象按照key/value进行序列化  

ajax全局事件

[javascript] view plaincopy
//可以为网页提供一个提示信息,常用的提示信息是"加载中"   
  $(function(){  
    //demo1:  
        $('#send1').click(function() {  
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",  
                      function(data){  
                          $("#resText1").empty();  
                          $.each(data.items, function( i,item ){  
                                $("<img/> ").attr("src", item.media.m ).appendTo("#resText1");  
                                if ( i == 3 ) {   
                                    return false;  
                                }  
                          });  
                     }  
            );   
       });  
  
   //demo2:  
       $("#send2").click(function(){  
            $.post("get1.jsp", {   
                        username :  $("#username").val() ,   
                        content :  $("#content").val()    
                    }, function (data, textStatus){  
                        $("#resText2").html(data); // 把返回的数据添加到页面上  
                    }  
            );  
       })  
  
        $.ajaxPrefilter(function( options ) {  
            options.global = true;  
        });  
        //共用这2个全局的ajax事件  
       $("#loading").ajaxStart(function(){  
          $(this).show();  
       });  
       $("#loading").ajaxStop(function(){  
          $(this).hide();  
       });  
  
  
   })  

0 0