这些日子我学到的JavaScript:Day28- AJAX 2

post — 传统表单输入介绍
这个功能常用在注册帐号时，将使用者输入的资料跟资料库做比对，检查是否有重复的帐号。form 表单的 action 属性要填入後端服务器的网址，使用者输入的资料将会被传送到那个位址。按了传送的按钮後，该网页的网址将会有所不同。

在原本的网址後面，会接「传送至後端的网址」+「问号」+「表单栏位的 name 值」+「等於」+「使用者输入的值（参数）」。数个 name 值 + 参数的组合之间，会用 & 来做连接。
https://ithelp.ithome.com.tw/upload/images/20190930/20120114xgzAkaCJWx.jpg

get 与 post 的差异
get：从浏览器发出请求，服务器会回传资料（在 responseText 里面回传一个物件）。
post：从浏览器发出请求，传送资料时注明格式，若选择用表单格式，则传送资料的内容要仿照表单传送後的网址（也就是：栏位1 name 值 = 使用者输入的值1 & 栏位2 name 值 = 使用者输入的值2 & ...）。
post 内容的格式，一般有两种：

表单输入格式：content-type application/x-www-form-urlencoded
JSON 格式：content-type application/json
传送资料格式应依後端工程师的要求而定，有些情况可以直接丢 JSON 格式到後端，有些情况则是要用表单输入格式传送。

注明 post 格式的程序码通常在下 open() 指令的下一行，使用 setRequestHeader() 方法，并在 () 中加入两个参数，第一个参数是 'Content-type'，第二个参数就是以 application 开头的格式了。

xhr.setRequestHeader('Content-type','application/json');
AJAX JSON 的传递
如果传送资料到服务器的格式要用 JSON 格式的话，方式跟表单输入格式有点不同。

// 宣告变数储存物件（将使用者输入的资料写入）
var account = {
email: '[email protected]',
password: '1234'
}
// xhr
var xhr = new XMLHttpResquest;
xhr.open('post','服务器URL',true);
// 传送资料的格式选择为 JSON
xhr.setRequestHeader('Content-type', 'application/json');
// 用另一个变数储存字串化的 JSON
var data = JSON.stringify(account);
// 传送
xhr.send(data);
同理，收到服务器回传资料後要再作利用的时候，要把 responseText 里的字串物件化（用 JSON.parse()）。