Ajax 整理

Ajax 全称为Asychronous Javascript and XML（异步javascript 和XML）  是一种无刷新更新页面的技术

 

 优点： 能在不刷新整个页面的前提下更新数据，这使得WEB应用程序能更为迅速地回应用户的操作。

 

load（方法）

 load（url[, data ],[, callback]）;

url  ：请求HTML页面的url地址

data：发送至服务器的key数据

callback：请求完成时的回调函数，无论请求成功或失败

<input type="button" id="send" value="ajax">
<div class="comment"> comment </div>
<div id="resText"></div>

　　

 $(function(){
   $("#send").click(function(){
     $("#resText").load("text.html")
})
})

　　如果只需要加载text.html 页面中class为para的内容，可以使用如下代码来完成

$("#resText").load("#text.html  .para");

　　load（）方法的传递方式根据参数data来自动指定，如果没有参数，则采用 GET方式

                                                                           反之，有参数传递，则采用POST方式

load()方法提供了回调函数，该函数有三个参数

  

$("#resText").load("text.html",function(responseText,textStatus,XMLHttpRequest){
          //responseText  请求返回的内容
           // textStatus   请求状态：success,error notmodified timeout 四种
         // XMLHttpRequest XMLHttpRequest 对象
})

　　注意： load()方法中 无论Ajax 请求是否成功，只要当请求完成后，回调函数就被出发。

$.get()

   $.get()方法使用GET方式来进行异步请求

         $get(url,[, data][, callback] [ ,type])

            url : 请求的url地址

            data:  发送至服务器的key/value数据会作为QueryString 附加到请求url中

            callback： 载入成功时回调函数（只有response状态为success才调用）自动将请求结果和状态传递给该方法

             type:   服务器返回内容的格式 XML，html，script，json，text，_default

 $("#send").click(function(){
 	$.get("get1.php",{ 
         username:$("#username").val(),
         content:$("#content").val()
 	},回调函数)
 });

　　$.get() 方法的回调函数只有两个参数

functioin(data,textStatus){
    // data: 返回的内容，可以是XML文档 json文件 HTML片段
   //  textStatus : 请求状态  success  error notmodified timeout

}

　　回调函数只有当数据成功返回success后才被调用 。

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

　　当返回的是XML

 $("#send").click(function(){
 	$.get("get1.php",{ 
         username:$("#username").val(),
         content:$("#content").val()
 	},function(){
        var username=$(data).find("comment").attr("username");
        var content=$(data).find("comment content").text();
        var txtHtml="<div class='content'><h6>"+
                      username+"</h6><p class='para'>"
                      +content+"</p></div>";
             $("#resText").html(txtHtml);//将返回的数据添加到页面上 
 	})
 });

　　XML优点： 重用性提高，可移植性是其他文件无可比拟的

              缺点：文件体积相对较大，解析和操作它们的速度要慢一些.

     当返回的是JSON

  

 $("#send").click(function(){
 	$.get("get1.php",{ 
         username:$("#username").val(),
         content:$("#content").val()
 	},function(){
        var username= data.username;
        var content=  data.content;
        var txtHtml="<div class='content'><h6>"+
                      username+"</h6><p class='para'>"
                      +content+"</p></div>";
             $("#resText").html(txtHtml);//将返回的数据添加到页面上 
 	},"json")
 });

　　$.post  

       与$.get()方法的结构和使用方法都相同

        区别

                GET                                                        POST

 参数       参数会在url后进行传递                                      作为HTTP消息的实体内容发送给web服务器

 大小           通常不能大于2KB                                                  理论上不受限制

  缓存         会被浏览器缓存起来，历史记录中可读取           可以避免这些问题

                    会带来严重的安全问题

获取方式 传递的数据在服务器端的获取不同

                $.GET[] 获取                                                               $.POST[] 获取

两者都可用 $.REQUEST[] 获取

 

  $.ajax()

$(function(){
	$("#send").click(function(){
		$.ajax({
			type:"GET",
			url:"test.json",
			dataType:"json",
			success:function(data){
                  $("#resText").empty();
                  var html="";
                  $.each(data,function(commentIndex,comment){
                                html+="<div><h6>"+comment['username']+"</h6><p class='para'>"
                                     +comment['content']+"</p></div>";

                  })
                  $("#resText").html(html);
			}
		})
	})
})