Jquery源碼分析---Ajax分析

7.1 jquery的ajax常用方法

對於Ajax原理不深入分析。Jquery肯定也 會提供Ajax的實現。對於ajax的請求，可以分成如下的幾步：

1、通過 new XMLHttpRequest 或其它的形式（指IE）產生ajax的對象xhr。

2、通 過xhr.open(type, url, async, username, password)的形式建立一個串連。

3、通過setRequestHeader設定xhr的要求標頭部（request header）。

4、通過send(data)請求伺服器端的資料。

5、執行在xhr上註冊 的onreadystatechange回調處理返回資料。

任何的lib都是在這幾步之上 進行相關擴充而達到自己的功能。這幾步之中，對於url，我們要考慮是跨域請 求怎麼辦，ajax為了安全的考慮不支援跨域請求，那麼對於這個問題，Jquery和 Ext都是採用scriptTag的方式。

Jquery主要就是解決上面這問題，之後 就在這個基礎之上進行擴充，如getScript,getJson之類的函數。Ajax一個很重 要的任務就是提交form。Jquery Ajax提供了如Prototype的form中 serializeElements把form的元素串列起請求字串。這是ajax的輔助方法。

對於ajax的應用，不管對返回的資料進行如何的處理，其最終目的還是 得落在頁面的顯示上，也是某一個或一些dom元素上。那麼我從這個需要改變內 容的dom元素（集合）出發，通過ajax去獲得資料進行一些處理最終填充到給定 的元素中。這和prototype中Ajax.Updata相似。

load

Jquery對象 的load(url, params, callback)函數就是完成這類似的工作的。

// 載入遠程 HTML 檔案代碼並插入至 DOM 中。
// 預設使 用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式。jQuery 1.2 中，
//可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 程式碼。
// 文法形如 "url #some > selector"。
load : function(url, params, callback) {
　　if (typeof url != 'string')　　 return this._load(url);
　　var off = url.indexOf(" ");// 找到第一個空格處
　　if (off >= 0) {　　　　　　　　　　　　　　　　　　　　　　　　　 ①
　　　 var selector = url.slice(off, url.length);// 第一個空格之後的字元
　　　 url = url.slice(0, off);// 第一個空格之前的字元
　　　 }
callback = callback || function() {
　　};
var type = "GET";// 預設的是get類型
// 這裡是判斷第二參數，如果是 fn,那麼就是指callback
// 如果是object,那麼就是指data.load(url, [data],[callback])
if (params)
　　if (jQuery.isFunction (params)) {
　　　 callback = params;　 params = null;}
else if (typeof params == 'object') {
　　　 params = jQuery.param(params);type = "POST";　　　　②
　　}
var self = this;
jQuery.ajax( {//Ajax請求　　　　　　　　　　　 　　　　　　　　　 ③
url : url,　type : type,dataType : "html",data : params,
complete : function(res, status) {
　　　 // 成功就注射html到所有匹配的元素中
　　if (status == "success" || status == "notmodified")
　　 　 // selector是否指定？沒有的話就是全部的內容
　　　 // 指定的話 ，就是產生dom文檔的形式，之後在中間找到滿足條件的元素。
　　　 // 這中間刪除 scripts 是避免IE中的 'Permission Denied' 錯誤
self.html(selector ? jQuery("<div/>")　　　　　　　 　　　　④
　　.append(res.responseText.replace(/<script(.|s) *?/script>/g, ""))
　　　　　 .find(selector) : res.responseText);
self.each(callback, [res.responseText, status, res]); // 執行回調⑤
　　}
});
return this;
　　 },