# AJAX (with jQuery)
###### tags: `AJAX`

以傳統來說，送出表單後，會把資料丟給後端的server判斷有沒有錯誤，然後頁面會跳到下一頁告訴你結果(換頁)：

但以AJAX來做的話，送出資料時會在背景偷偷做，再偷偷把判斷結果送回來，且會更新在同一個頁面(不換頁)：

## post & get
get request 會把parameters帶進網址，而post request則不會把參數顯示在網址上：

## RESTful API
除了一般API的get、post之外，還另外衍生出了put與delete，等於是把CRUD直接用API來實作：



## $.ajax / $.post / $.get
$.ajax主要在做3件事，給參數、要data、處理data，主要格式如下：
上面的data是我們要給的參數(object type)，下面的complete是當request有送出，success最重要，因為他會收到我們需要的data，我們就是要針對這個data做操作，error就是錯誤訊息，通常會把這個訊息給user看。

$.post就是簡化ajax內容而來的：
其中要給的參數前面也不用打data:，全部改以逗號分隔

$.get也一樣：

範例，先準備好要傳遞的參數，再用post：

另一種更簡略的方式，使用serialize，但只能用在form，會自動整理form裡面的元素，最後送出的格式有點像get，中間用&隔開：

## 資料型態
### HTML
資料回傳就直接是HTML格式，可以直接塞進程式碼中。

### JSON
JS內建的格式，以物件的格式存放，中間也可以儲存list，或是多層物件：


### JSONP
就是JSON with Padding，為什麼要有JSONP，這關於cross domain issue，也就是說，在不同網站的server，不能拿取對方的資料：

因為有規定Same-orgin policy：

範例：

如果違反Same-orgin policy就會產生cross domain issue。

所以現在有很多網站有提供API，可以透過API拿資料，但是要如何解決cross domain issue?，答案就是使用JSONP。

也就是在外面包一個padding，這個padding就是一個js的程式，等於是跟別的網站要一個js的程式：

那要如何使用呢? 必須要使用在ajax裡面，因為會使用到不同的參數，也只有ajax才能寫那麼多參數，request形態要用GET，Type要設定為jsonp，jsonCallback就是要看對方的api文件來決定要回傳的內容，就可以把data拿來使用：

## 實際操作instegram API
透過Instegram的API來利用jsonp讀取popular的資料，此範例不須寫callback function，成功回傳data後，利用$each功能針對每一個資料做處理，後面的function裡的參數是index與內容(photo)，宣告一個DOM(li)，然後把每個圖片的網址放進去，最後再append回id="photos"的位置：

## MAMP
MAMP是一個可以把電腦變成執行apache server的工具，透過MAMP可以把我們的網站透過http protocol來執行網頁，才能使ajax順利執行。

MAMP -> https://www.mamp.info/en/windows/


測試(port80)：

## 透過AJAX做到只換內容不換頁
html架構：

我們希望點擊之後只更換內容，而不是刷新整個頁面。

所以透過ajax來做，首先docoment ready之後，當點擊navigation的a時，就觸發事件，先把他的預設動作(切換頁面)擋下來，然後抓這個a連結到的網址，然後再使用ajax的.get function，針對目標網址，然後傳參數(但因這邊不需任何參數，所以傳一個空物件)，然後再寫一個callback function來接收傳回的data，回傳回來的格式則是設定html，成功取到data後，在把他寫回content的html內：

補強：因為一開始的內容是Intro haha，那如果我們一開始就想顯示Home的內容呢，有一個比較直觀的做法是直接把Home.php的內容複製一分到html裡面，但是這樣做等於把同樣的東西放在兩個不同的地方，而且，萬一更改Home.php裡的內容時，預設頁面的內容卻還是沒有更改，所以我們的補強方法是，透過js在一開始時就抓取home.php的內容：

再進化：因為讀取data再把內容再進html這一段的code幾乎一模一樣，所以單獨寫成function：

## 範例練習Random User Generator
Random user generator是一個工具來製作假資料(類似lorem) -> https://randomuser.me/

這邊不需要用jsonp的原因是這網站用一些特殊的手法不需要另外包padding來偽裝成js，因為這本來就是做假資料的，沒有甚麼安全疑慮：

實作：

把data內容製作成DOM物件：

將DOM塞回去：

改取多位user，根據document來加入帶參數：


利用jQuery的$each功能針對每一個來做：

## 範例練習todo list
### Creat部分
假設透過PHP來接收傳進來的todo content，然後儲存進DB，之後再以POST回傳結果，然後打包成JSON檔：

配合前端AJAX，改為把內容先送到後端，再從回傳值取資料(data)，最後再加上一個簡單的判斷是否success：

### Update部分
正常來說，會給每一個item對應的id，這樣在更新DB的時候才能知道要更新哪一個內容：

配合前端AJAX：

但是並沒有成功：

問題就出在this，因為之前的this是指事件發生(input)的當下環境，若放到ajax call裡面則是代表ajax，就不是原本的環境了：

所以要把this改為e.currentTarget，因為e沒有被取代掉：

### delete部分
php：

ajax：