【jQuery基礎學習】05 jQuery與Ajax以及序列化

好吧，這章不像上章那麼水了，總是炒剩飯也不好。關於AJAX 所謂Ajax，全名Asynchronous JavaScript and XML。（也就非同步的JS和XML）簡單點來講就是不刷新頁面來發送和獲取數據，然後更新頁面。 Ajax的優勢無需插件支持優秀的用戶體驗提高web程式的性能減

好吧，這章不像上章那麼水了，總是炒剩飯也不好。

關於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應用程式跨域

$.ajax()方法
- 這個方法是jQuery最底層的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);
}