我理解的ajax 跨域 事件代理，委託20170222am

先上代碼。

function   submitData(){

var  xhr = createXHR();  //建立一個XHR對象。

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){  //確保已取得所有響應資料

 if((xhr.status >= 200&&xhr.status< 300)||xhr.status==304){  //確定響應成功返回。

alert(xhr.responseText);

}else{

alert("request  was  unsuccessful" + xhr.status);

}

}

};

};  //在open()前，避免跨瀏覽器不相容。該代碼採用Dom0級方法為XHR對象添加事件處理常式，因為並非所有瀏覽器都支援Dom2方法。

xhr.open("post","tsxt.php",true);  //準備請求。向伺服器發送請求tsxt.php的請求。true表示非同步。

xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");  //佈建要求頭部資訊。

var  form = document.getelementById("user-info");  

xhr.send(serialize(form));  //正式發送請求。取得id為user-info的表單資料將其序列化然後發送給伺服器。

後三行代碼：使用XHR模仿表單提交。服務端必須有程式讀取發送過來的未經處理資料，並從中解析出有用部分。

XHR屬性：

responseText：響應返回的資訊

responseXML：響應返回的XML DOM文本（前提是相應的內容類型為text/xml或application/XML）

status：http狀態代碼

statusText：http狀態代碼的說明

readyState：0：未調用open()，未初始化。初始化就是把變數賦為預設值，把控制項設為預設狀態，把沒準備的準備好。

1：調用open()，未調用send()

2：調用send()，未接收到響應

3：發送部分響應資訊

4：發送全部響應資訊，可在用戶端使用。

Dom0級方法，DOM2級方法：

Dom0級：1、在標籤內寫onclick

<input  id="tfs"  onclick="alert(thanks);">

2、在js裡寫onclick = function（）{}函數。

document.getElementById("tfs").onclick = function(){

alert(thanks);

}

Dom2級：

二者區別：

事件代理委託

跨域。

jsonp  點擊開啟連結

1、jsonP：被包含在函數調用中的json。callback({"name":"tfs"});  組成：回呼函數和資料。

var  script  =  document.creatElementById（"script"）;

script.src = "http://tfs.com/json/?callback = handleResponse";

document.body.insertBefore(script,document.body.firstChild);

function  handleResponse(){

alert("bala");

}

為了便於用戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback參數給服務端，然後服務端返回資料時會將這個callback參數作為函數名來包裹住JSON資料，這樣用戶端就可以隨意定製自己的函數來自動處理返回資料了。

優點：1、可以訪問響應文本。2、支援用戶端與伺服器端雙向通訊。

缺點：1、JSONP是從其他域載入代碼，容易發生安全問題。2、難以確定JSONP請求是否失敗。