About AJAX
For javascript language ,anything must become JSON from Object!We can see following code:
Demo:
Before select one friend:
After select one friend,and …AJAX ! (catch his occasions)
Before show my code , I assume some variable.
1.SITE_URL: is our website's URL
[Html]:
<select class="select_fr_box" tabindex="1" onchange="getOccasion(this,'100000882157254,100002707491356&','GroupGiftProjectFacebookFriends');" id="GroupGiftProjectFacebookFriends">
<option value="">Select friends</option>
<option value="">blabla...</option>
</select>
[Javascript & jQuery]:
function getOccasion(ctrl,fb_user_friends,id){
$.ajax({
type: 'POST'
,url: SITE_URL+'/groupgiftprojects/getOccasion'
,data: {fb_id:ctrl.value}
,success:
function(data) {
var myObject = eval('(' + data + ')');
console.log(myObject);
var string ='<option value="">Select One</option>';
(jQuery).each(myObject, function(i,value){
string+="<option value='"+(value.id).toString()+"'>"+(value.name).toString()+"</option>";
});
string+='<option value="Other">Other</option>';
$('#GroupGiftProjectOccasionId').html(string);
document.getElementById('id_other_text').style.display = 'none';
document.getElementById('app_user').style.display = 'block';
}
})
}
值得注意的一點,關於line5 的data部分是要輸入和種格式?為此我去查找jQuery Lib,這是輸入JSON格式. 講到JSON其實有很多可以去討論的,先來講幾個基本的東西
首先,在javscript中轉變成JSON之前,他必須是個物件
var a ={};
a.username="blue";
console.log(a.username) //blue
JSON.stringify(a);// 這時候就是個JSON格式'{"username":"blue"}'
但要怎麼從JSON轉回javscript可用的物件呢?
var a ='{"username":"blue"}';// 假設有個JSON
var b = JSON.parse(a); //把JSON轉成物件
這時候就可以像obj一樣導用JSON的函式
console.log(b.username); //"blue"
繼續[javascript部分]:line6的success函式function(data),這時候的data指的是回傳的JSON(從controller回傳的)再用你喜歡的方法去抓想要的JSON內部值.
此外,補充一些在用facebook api的JSON心得,關於facebook graph的GET與POST中,jQuery 的AJAX只可有POST and GET,那麼DELETE要如何去傳送呢? 其實不只有jQuery的AJAX無法直接傳送,連browser也需最近幾年的才有DELETE協定,不過這部份不列入我目前想探討的部份,用jQuery AJAX傳送DELETE可以先透過POST外加method方法,如下: (比方說做個”取消likes”的功能)
$.ajax({
type: 'POST',
url: 'https://graph.facebook.com/' + post_id + '/likes?method=delete',
data: {
"access_token": access_token,
"_method": "delete"
}
});
[php](controller):
public function getOccasion(){
$fb_id =$_POST['fb_id'];
$today_date = gmdate('Y-m-d',mktime(gmdate("H")+$this->me['timezone']));
$occasion_list = $this->Occasion->query("SELECT * FROM occasions as Occasion WHERE (Occasion.fb_id=".$fb_id." AND Occasion.recurs_annually =1) OR (Occasion.fb_id=".$fb_id." AND Occasion.recurs_annually=0 AND Occasion.starting_date >='".$today_date."' )");
$occasion_arr =array();
foreach( $occasion_list as $list){
$temp =array();
$occasion_name = $list['Occasion']['name'];
$occasion_date = $list['Occasion']['starting_date'];
$temp['fb_id']=$list['Occasion']['fb_id'];
$temp['id']=$list['Occasion']['id'];
$temp['name']=$occasion_name." - ".gmdate('F d, Y',strtotime($occasion_date));
$occasion_arr[]=$temp;
}
echo json_encode($occasion_arr);
exit;
}
這段php,對於AJAX來說,最重要的是line2部分:$_POST[‘’]
這是負責抓取JSON給controller端的php函式,而最後第二行是從php轉成JSON代碼傳回給前端.
最後,來談談關於嚴謹的程式架構,我記得之前在研討會上,就有如此的疑問:
AJAX在controller端直接讀取json這個行為,究竟有沒有違反MVC架構? 我找了許多資料,嚴格的MVC架構中的C唯一的出口就是view,而這個行為就是只有從Controller順向過去View端(在呈現data時的流程)這是不可逆的,,因此證明這個答案是違反的!
但是這部份因為一樣都可以跑出結果,因此沒有受到廣泛注意,也有一些人都把此行為定義可彈性化的MVC架構,對於我來說這是有點雞肋,如果每個規範都彈性化,那規範真的就不較規範了!而這部份該如何去改善,其實現今各大主流的MVC框架都有相關作法,有空多讀讀核心原始碼即可知道!
舉例來說,以cakephp為例:
我們會在controller端把值傳到某個AJAX套用的ctp中,controller端會多以下function:
$this->set('cookieValue', $cookieValue);
$this->layout = 'ajax';
(就跟平常傳值到某ctp方法一樣)
而view端會在鄉對應的ctp中去echo出值,而AJAX就直接到這ctp裡面抓值,這就完成嚴謹的MVC架構的AJAX!