一. 事件
JavaScript和HTML之間的交互是通過事件Event實現的，當文檔或瀏覽器窗口發生一些特定的交互的時候，會觸發瀏覽器生成一個時間對象，這個對象可以被捕獲。與原生js相比，jquery提供了更加優雅的事件處理語法，增強了事件處理的能力。
$(document).ready() 是jquery中最重要的一個事件函數，用於替代原生js中的window.onload() 方法，$(function(){}); 是一種簡寫形式，當dom樹結構加載和解析完畢之後，該函數綁定的方法就會被調用
爲元素綁定事件：jquery中可以使用bind(type, [data], fn)方法來爲jquery對象綁定事件，其中type是事件的類型，data屬性是傳遞給事件對象的額外數據對象，fn是指綁定的事件處理函數。事件的類型有很多，常見的有鼠標的單擊和雙擊click、dbclick，元素獲取或者失去焦點focus、blur
<div id="panel">
<h5>什麼是jQuery?</h5>
<div style="display:none">
jQuery是一個優秀的javascript函數庫！
</div>
</div>
<script type="text/javascript">
// 基本的時間綁定
$("#panel h5").bind("click", function(){
// this關鍵字是指攜帶相應行爲的DOM元素
$(this).next().show();
});
// 常見的事件綁定可以簡寫
$("#panel h5").click(function(){
var $content = $(this).next();
// 判斷元素的可見性
if($content.is(":visible")){
$content.hide();
} else {
$content.show();
}
});
</script>
事件冒泡：如果頁面上有多個元素同時響應一個事件，那麼事件會按照dom的層次結構像水泡一樣不斷向上直到頂端。
// 停止事件冒泡
$(".content").click(function(event){
// do something...
event.stopPropagation(); // event是指當前事件對象
});
// 有些網頁內容是有默認行爲的，比如單擊超鏈接會跳轉、單擊提交按鈕會提交表單，
// 有時需要阻止這些默認行爲，比如提交表單之前需要對錶單數據進行校驗
$("#submit").click(function(event){
// do something....
event.preventDefault(); // 阻止默認行爲
});
二. Ajax基礎
- Ajax的概念：ajax允許瀏覽器通過javascript向服務器發送HTTP請求接收數據，無需刷新整個頁面！
- XMLHttpRequest對象：該對象是瀏覽器的內置對象，使用該對對象可以向服務器發送HTTP請求接收數據
// 創建XMLHttpRequest對象
var request = new XMLHttpRequest();
// 初始化XMLHttpRequest對象，requestType請求類型GET/POST，url請求的地址，
// async是否異步模式，默認是異步模式，如果是同步模式會鎖定頁面
request.open(requestType, url, async);
// XMLHttpRequest對象包含一個readystate屬性，該屬性的值是一個數字，用於表示請求的當前狀態
// 0 ---- 對象剛創建，未調用opne()方法初始化
// 1 ---- 已調用open()方法初始化，未發送http請求
// 2 ---- 請求已發送
// 3 ---- 開始接收來自服務端的數據
// 4 ---- 服務端響應完畢（200/404/500...）
// readyState的屬性值變化會觸發readyStateChange事件，爲事件綁定處理函數
function reqReadyStateChange(){
// 服務端響應完畢
if(request.readyState == 4){
// http狀態碼200，請求成功
if(request.status == 200){
// responseText表示服務端返回的數據
alert(request.responseText);
} else {
alert("The server retutn a status code of " + request.status);
}
}
}
request.onreadystatechange = reqReadyStateChange;
// 發送請求，接收一個字符串類型的參數，參數爲發送給服務器的請求體，如果不包含請求體，
// 則將null作爲值傳入（必須）
request.send(null);
三. jQuery對ajax的封裝
jQuery將ajax封裝在$.ajax(url, [setting])中，該方法是jquery中ajax的底層方法，$.get()和$.post()都是對$.ajax()的封裝
$.ajax()中的參數詳情：
- async：是否爲異步請求，默認是異步的
- data：發送到服務器的數據
- dataType：預期服務端返回的數據類型，xml、json、text、jsonp
- success：請求成功後的回調函數
$.ajax({
url:"xxx",
type:"POST",
data:{key-value},
success:function(data){ // data是服務端返回的數據
alert(data);
}
});
$.get(url, data, callback, type) 通過GET請求獲取數據：
- url：請求的地址
- data：待發送給服務端的數據
- callback：請求成功後的回調函數
- type：返回數據的格式xml、json、text
$.get({"xxx url", {name:"znker"},
function(data){ // data服務端返回的數據
alert(data);
}, "json"
});