# AJAX POST

## 前情提要

這篇是接續 [AJAX 基礎篇](/pCxNDP9JRUij1AvMpS3Lsw)、[AJAX 非同步觀念](/B2Lkn8QWSTel5zAmjyCTyQ)，有疑問可以先看完再回來

###### # 等等要串接的 [六角學院 API](https://github.com/hexschool/nodejs_ajax_tutorial) 在這

請抬頭看看標題，沒錯！要特別注意有資料要傳送時，open 內的格式不是 get，要改成「post」

// 建立 XMLHttpRequest 物件
var xhr = new XMLHttpRequest();

// 將物件初始化
// 物件.open("格式","網址", 非同步)
xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send('email=[e-mail]&password=012345678');

###### #額外補藥 [API 是什麼 | ALPHAcamp](https://tw.alphacamp.co/blog/understand-api)

### setRequestHeader

` 物件.setRequestHeader("標頭", "標頭的值") `

<p style="text-align: justify">重送資料前，要先告訴對方的伺服器，你傳的資料型態是什麼，標頭填"Content-type"，標頭的值(資料型態)則有下面三種：</p>

- **application/x-www-form-urlencoded (最常見)**
- multipart/form-data
- text/plain

application/x-www-form-urlencoded: 資料被編碼成以「&」分隔的鍵值對，同時以「=」分隔鍵和值。

### send()

// 這是假的 email 請不要寄信 xDDD 
xhr.send('email=[e-mail]&password=012345678');

這次使用的 send() 也跟基礎篇不太一樣，括號裡面多了我們要傳送過去的值，我怎麼知道該輸入什麼樣的值呢？

API 的文件會告訴你要給什麼資料

<p style="text-align: justify">前面已經選定好資料型態了(Content Type)，資料就依據型態去作調整，最終才會變成「email=[e-mail]&password=012345678」這串內容</p>


## 資料來源
上課筆記 加上個人詮釋與額外補充
- [JavaScript 入門篇 - 學徒的試煉](https://www.udemy.com/course/javascript-learning/)
- [Content- Type | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type)

###### tags: `六角學院` `程式設計` `前端` `筆記`