Landy Blog
0%

AJAX課程筆記-2

發表於 分類於

什麼是 Cross-Origin Resource Sharing (CORS)？

這個章節在說當你想要擷取線上的開放資料，會遇到CORS的問題。
如果資料源的CORS沒有開放，代表該資料源不支持跨網域的功能，即你無法從你的本機端跟該opendata做互動，即做資料的傳輸與擷取。

你可以利用
這個連結
這個連結，將你的opendata的連結丟到這個測試網站中的Remote URL
的欄位裡面，接著按Send Request按鈕，
你可以看XHR status的數字，
如果是200代表該opendata 有支援跨網域的功能，
如果是0代表該opendata 沒有支援跨網域的功能。

傳統表單輸入介紹

這個章節在教有關AJAX的POST技巧，即我們將像帳號或密碼丟到伺服器端做驗證的動作。
例

1
2
3
4
5
6
7
8
9
<form action="index.html">
   <label for="inputEmail">帳號</label>
   <input type="text" name="account" id="inputEmail">
   <br>
   <label for="password">密碼</label>
   <input type="password" name="password" id="password">
   <br>
   <input type="submit" value="送出">
</form>

你可以看到以上的form的action屬性值是確定表單資料提交的方向，如果不寫則提交當前頁面，而這邊的範例的話，
是直接放當前頁面因為我們沒有要提交該表單。
當你提交了此表單之後，你看你的瀏覽器上放網址中的內容
file:///D:/hexschool/Javascript_lecture/Ajax_practice/index.html?account=you%40gmail.com&password=123

你可以看到index.html? 代表你的當前頁面，而在問號後面接的就是這個表單提交的參數，分別是
account 就是你輸入的帳號內容
password就是放你輸入的密碼

AJAX POST - 以form表單格式傳送 (提供 API 練習)

這個小節是示範，怎麼將資料丟到伺服器端，並從伺服器端回傳的內容，判斷是否該資料是傳送成功或失敗。
例

1
2
3
4
var xhr = new XMLHttpRequest();
xhr.open('post','伺服器端的網址', true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send('email=abcd@gmail.com&password=123456');

以上的程式範例就是將資料post到伺服器端的語法，要特別注意這一行新的指令，
即setRequestHeader這一行的指令就是post API的格式，這個是一般表單輸入的格式。

另外，在xhr的send函式裡面要送哪些訊息，你要先去看你的伺服器端能夠接收那些資料，像這個例題，它能接受的就是email和password的資料。
若以上的操作都成功的話，你再呼叫一次xhr這個物件，readyState應該會回傳4，而在responseText欄位裡面應該就會出現註冊成功的字串內容溜~

從 Chrome 開發人員工具檢視 AJAX POST

你可以利用你的瀏覽器的開發者視窗中的網路這個選項中，
有回應跟請求，可以看到用戶端丟了什麼訊息給伺服器端，
而伺服器端又回應了什麼樣的訊息給客戶端。

AJAX - 以JSON格式傳遞

本小節是在教導如何改用JSON格式把資料傳送給伺服器端做驗證，其實，跟上面的傳統表單傳送的寫法差不多，一點點差異而已
例:

1
2
3
4
5
6
7
8
9
var account = {
   email: 'jaredleto@gmail.com',
   password: '12313'
}
var xhr = new XMLHttpRequest();
xhr.open('post,'https://hexschool-tutorial.herokuapp.com/api/signup',true);
xhr.setRequestHeader('content-type','application/json');
var data = JSON.stringify(account);
xhr.send(data);

以上的範例你可以看到在創XMLHttpRequest物件的方式一模一樣，
不同的部分是setRequestHeader有更動內容改成application/json，就代表我們要上傳json的格式資料給伺服器端。
而我們要傳入物件account的內容，故我們在上傳此物件時，並須把先它轉成JSON的字串格式給伺服器端，才能將它上傳。

由此總結在上傳一般表單格式 和 上傳JSON格式的內容給伺服器不一樣的地方為setRequestHeader的內容
和 上傳之前是否需要把上傳內容做json的字串轉換。
注意~!!在寫json的時候，你要注意json的拚法喔，因為，你會一直寫成
JASON 這是不對的，應該是JSON才對，沒有A啦，不要把它跟頂級超市的JASONS搞混了==