[jQuery]jQuery AJAX

在網頁上常常會看到，點擊某些東西之後就會即時的顯示一些資料

例如旅行社網頁，選擇價錢可以即時出現該價位的飯店

其實是透過AJAX(Asynchronous JavaScript and XML)處理的

jQuery Ajax
HTML：

   <div id="con">
   </div>

jQuery：

function fetch_data(n){
	$.ajax({
		type : "GET",
		url  : "fetch_data.php?act="+n,
		data : "",
		success : function($msg){
			$('#con').html($msg);
		}
	});
	//注意！因為ajax是同步的，因此當執行ajax後，瀏覽器會馬上接著執行接下來的程式碼
	console.log(123);
}

fetch_data：

    echo $_GET['act'];

jQuery會將fetch_data echo出來的東西全部塞到#con這個區塊內，不過#con裡原先若有其他內容將會被覆蓋過去
且原先就寫在網頁中的javascript判斷不到利用AJAX顯示出來的DOM元件
若要使用則需將javascript放在fetch_data一同輸出。

sync ajax

$.ajax({
	type : "GET",
	url  : "fetch_data.php?act="+n,
	//加入async參數
	async : false,
	data : "",
	success : function($msg){
		$('#con').html($msg);
	}
});

jQuery在AJAX部份也越來越多新用法，比如說：

//以AJAX post為例(執行後test.php就會抓的到$_POST['name']的資料囉)
$.post("test.php", { "name": "姓名", "bir": "19891028" },
function(data) {
	alert(data);
});

AJAX觸發事件流程

ajaxStart > ajaxSend > ajaxSuccess 或 ajaxError > ajaxComplete > ajaxStop

所以可以針對以上觸發事件做一些loading的特效

$(document).ajaxStart(function(){
	alert("運行中");
});
$(document).ajaxComplete(function(){
	alert("結束");
});

AJAX因為安全性問題所以無法跨網域抓資料，如果有需求的需要再另外處理