jQuery與Ajax以及序列化_jquery

關於AJAX

所謂Ajax，全名Asynchronous JavaScript and XML。 （也就異步的JS和XML）

簡單點來講就是不刷新頁面來發送和獲取數據，然後更新頁面。

Ajax的優勢

•無需外掛程式支援
•優秀的使用者體驗
•提高web程式的效能
•減輕伺服器和頻寬的負擔

Ajax的不足

•瀏覽器相容不足
•破壞瀏覽器前進與後退按鈕的正常功能
•對搜尋引擎的支援不足
•開發與調試工具的 缺乏

好吧，這些都是幾年前的不足。技術的發展很快，這些不足也會慢慢彌補，起碼現在調試Ajax並不難。

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵。

傳統的實現Ajax的例子就不舉了，太蛋痛了，我都沒記，網路上一搜一大堆。

關於jQuery中的Ajax

$.ajax()方法是封裝了最原始的js的Ajax方式。

load(),$.get(),$.post()是封裝了$.ajax()得來

$.getScript()和$.getJSON()是進一步的封裝。

•load()方法 •用處：載入遠端HTML程式碼並插入DOM中，通常用於取得靜態的資料文件，結構為：load(url [,data] [,callback])。 •url為請求的位址
•data可選，為發動到伺服器的參數物件
•callback為回呼函數，請求不論成功或失敗都呼叫
•載入頁面的時候甚至可以在地址裡加上篩選

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText：请求返回的内容
//textStatus： 请求状态：success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
}); 

•$.get()方法 •明顯的看到呼叫的方式不同，所以說這函數是jQuery的全域函數。而此前的方法和load()這種都是對jQuery物件進行操作
•$.get()方法使用GET方式來進行非同步請求，結構為：$.get(url [,data] [,callback] [,type]) •前三個參數就不說了，唯一不同的是callback只有請求成功才會呼叫
•type參數為伺服器端傳回內容的格式，包括xml,html,script,json,text和_default
•範例

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容，可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态：success、error、notmodiffied、timeout 4种
}
)
}) 

•$.post()方法 •它與get方法的玩法一樣，不過一個是get方式，一個是post方式。
•$.getScript()方法 •有的時候頁面初次載入沒必要取得所有的腳本，所以jQuery提供了getScript這種方法來直接載入js檔案。
•範例

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了，不需要再对js文件进行处理
});
}); 

• $.getJSON()方法 •用來載入JSON文件，用法同上，只不過傳回的json資料而已

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex，comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法，同样是个全局函数。他的回调函数中，第一个参数为成员的索引，第二个为变量和内容 

順便擴充一下，跨域存取的JSONP

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?"
,function(data){
//某些操作
}
)
})

//JSONP是個非官方協議，採用json與<script>標記結合的方式，主要用於web應用程式跨域</script>

•$.ajax()方法 •這個方法是jQuery最底層的Ajax實現，所以理所當然更強大、更複雜。

雖然它只有一個參數，但是這個參數物件包含的屬性非常多，不過都是可選的。以下列出所有屬性： • url：預設目前頁位址，也可以手動寫入請求的位址

•type：預設為GET，也可以寫POST
•timeout:設定請求超時時間（毫秒）
•data：傳送的資料
•dataType：預期伺服器傳回的資料類型。
•beforeSend：發送前的呼叫的函數，如果次函數回傳false將取消本次ajax請求。

function(XMLHttpRequest){//XMLHttpRequest是唯一的参数
this;//调用本次Ajax请求时传递的options参数
} 

•complete:請求完後，無論成功或失敗都會呼叫。

function(XMLHttpRequest，textStatus){//textStatus描述成功请求类型
this;//调用本次Ajax请求时传递的options参数
}

•success：請求成功後的回呼函數

function(data,textStatus){//data为成功返回的数据
this;//调用本次Ajax请求时传递的options参数
}

•error：請求失敗呼叫的函數

function(XMLHttpRequest，textStatus,errorThrown){
// textStatus为错误信息，errorThrown为捕获的错误对象，通常只有其中一个包含信息
this;//调用本次Ajax请求时传递的options参数
} 

•global：預設為true。表示是否觸發全域Ajax事件。
•序列化元素 •serialize()方法 •它能夠將DOM元素內容序列化為字串

//不仅可以序列化整个表单，也可以序列化单个元素，并且都是自动编码过的
$.post("myurl",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})

•serializeArray()方法 •它能夠將DOM元素內容序列化為JSON格式
•$.param()方法 •這是serialize方法的核心，用來將一個陣列或物件依照鍵值對進行序列化

var obj={a:1,b:2,c:3};
var k=$.param(obj);//输出为a=1&b=2&c=3 

•jQuery中的Ajax全域事件 •ajaxStart()方法：當Ajax請求開始就觸發
•ajaxStop()方法：當Ajax請求結束就觸發

<div id="loading">加载中...</div>
$("#loading").ajaxStart(function(){
$(this).show();//ajax开始请求就显示加载中
});
$("#loading").ajaxStop(function(){
$(this).hide();//ajax开始结束就隐藏加载中
}); 

•ajaxComplete():当Ajax请求完成就触发
•ajaxError():当Ajax请求发生就触发,捕捉到的错误可以作为最后一个参数传递
•ajaxSend():当Ajax请求发送前就触发
•ajaxSuccess():当Ajax请求成功就触发
•如果想使某个Ajax请求不受全局事件的影响，可以在$.ajax中将global属性设置为false，这个在前面已经讲过了。当然也可以在ajax请求前：

$.ajaxPrefilter(function(options){//每次发送前请求
options.global=true;
})

好吧，写完了。最后顺带提一下，setTimeout("doMethod()",4000);为4s后执行doMethod这个函数。

//一个简单的定时发送功能
function updateMsg(){
$.post("myurl",{time:timestamp},function(xml){
//do something
});
setTimeout("updateMsg()",4000);
}