javascript之jQuery ajax 操作

ajax不足

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

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

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

4.开发调试工具缺乏

三层方法

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

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

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

load方法

  $(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方法

//<![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>";
?>

//<![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>";
?>

//<![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']}\"}" 
?> 

//<![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()就可以，其它不变

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

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

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

$.getScript()

动态加载js文件

   $(function(){
        $('#send').click(function() {
             $.getScript('test.js');
        });
   })

设置回调函数

//<![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个为对应变量或内容.

//<![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张最新图片

//<![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

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

serialize()方法

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

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

serializeArray()方法

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

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

$.param方法

//<![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全局事件

//可以为网页提供一个提示信息,常用的提示信息是"加载中" 
  $(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();
	   });


   })