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);
}
})
})
})
